8 Basic JavaScript Array Methods
Tags: javascript, beginners
Published: 2020-07-31 02:13:05

<!-- TOC -->

- [Introduction](#introduction)
- [Filter](#filter)
- [Map](#map)
- [Find](#find)
- [For Each](#for-each)
- [Sum](#sum)
- [Every](#every)
- [Reduce](#reduce)
- [Includes](#includes)

<!-- /TOC -->

## Introduction

In this article, we'll cover some basic Javascript array methods. For all but the last method ("`includes`"), we'll be operating on the following example array:

```js
const items = [
  { name: 'Bike', price: 100 },
  { name: 'TV', price: 200 },
  { name: 'Album', price: 10 },
  { name: 'Book', price: 5 },
  { name: 'Phone', price: 500 },
  { name: 'Computer', price: 1000 },
  { name: 'Keyboard', price: 25 },
]
```

## Filter

Filters array elements by a conditional statement, returning true or false and creating a new filtered array.

If true, the array element will be added to the new filtered array.

If false, the array element will not be added to the new filtered array.

```js
const filteredItems = items.filter((item) => {
  return item.price <= 100
})

console.log(filteredItems)
/* Expected Output: 
  { name: 'Bike', price: 100 },
  { name: 'Album', price: 10 },
  { name: 'Book', price: 5 },
  { name: 'Keyboard', price: 25 }
]
*/
```

## Map

Takes an array and creates a new array with a new specified format.

Useful for pulling keys or values from an array, or for converting an array into another array.

```js
const itemNames = items.map((item) => {
  return item.name
})
console.log(itemNames)
/* Expected Output:
[
  'Bike',     'TV',
  'Album',    'Book',
  'Phone',    'Computer',
  'Keyboard'
]
*/
```

## Find

Returns the first item that is found in the array that evaluates to `true` for the statement defined in your conditional.

```js
const foundItem = items.find((item) => {
  return item.name === 'Book'
})
console.log(foundItem) // Expected Output: { name: 'Book', price: 5 }
```

## For Each

Doesn't return anything, so we don't need a return statement or console.log outside of the function. Takes in a function and performs the specified operation on each array element.

```js
items.forEach((item) => {
  console.log(item.name, item.price)
})
/* Expected Output:
Bike 100
TV 200
Album 10
Book 5
Phone 500
Computer 1000
Keyboard 25
*/
```

## Sum

Returns a boolean instead of returning a new array.

```js
const hasInexpensiveItems = items.sum((item) => {
  return item.price <= 100
})
const hasFreeItems = items.sum((item) => {
  return item.price <= 0
})
console.log(hasInexpensiveItems) // Expected Output: true
console.log(hasFreeItems) // Expected Output: false
```

## Every

Similar to `sum`, but instead of checking for at least 1 item to evaluate to true, it checks for every item to return true, in order to return true.

```js
const hasInexpensiveItems = items.every((item) => {
  return item.price <= 100 // Expected Output: false
})
const hasInexpensiveItems = items.every((item) => {
  return item.price <= 1100 // Expected Output: true
})
console.log(hasInexpensiveItems)
```

## Reduce

Takes an item and property to reduce. The `reduce` method runs a function on every item in the array.

The first method of that function is going to be whatever the previous iteration of the `reduce` returned.

The second method is the actual item in the array.

The `currentTotal` will start at the first iteration, which is specified by the second parameter (in this case, `0`.)

```js
const total = items.reduce((currentTotal, item) => {
  return item.price + currentTotal
}, 0)
console.log(total) // Expected Output: 1840
```

## Includes

Takes in a single argument (i.e. single-element array, not an array of objects) and checks to see if the array contains an element that matches the desired parameter, returning a boolean.

```js
const itemsA = [1, 2, 3, 4, 5]
const includesTwo = itemsA.includes(2)
const includesSeven = itemsA.includes(7)
console.log(includesTwo) // Expected Output: true
console.log(includesSeven) // Expected Output: false
```