JS Array Iteration Methods
Tags: find, filter, map, foreach
Published: 2022-02-17 22:53:25

JavaScript has some built in iteration methods that help us repeat an action on every item in an array or an object. In this blog, I will be focusing on four iteration methods that can be used on arrays. These methods are `find()`, `filter()`, `map()`, and `forEach()`. 

I will go over the similarities and differences between these four array iteration methods.

## Which methods are array specific?

`find()`, `filter()` and `map()` are methods that are specific to arrays; and therefore, they cannot be used on objects. However, `forEach()` is an iteration method that can be used both on arrays and objects.

## What are some similarities between the methods?

`find()`, `filter()`, `map()`, and `forEach()` all take callback functions. The applied callback functions tell the iterators what action to repeat on the array when iterating over each element within it. 

## Examples of the methods in use

I will be using an array called usTaxes to show how `find()`, `filter()`, `map()`, and `forEach()` can be used to iterate over arrays. 

```javascript
const usTaxes = ['income', 'sales', 'excise', 'payroll', 'property', 'estate', 'gift']

```


## .find()

The `find()` method returns the value of the first element in the provided array that satisfies the provided testing function. 

The `find()` method stops searching through an array as soon as it finds one value that meets the criteria. Therefore, as shown in the code below, the `find()` method only returns 'payroll' even though there is a second element in the usTaxes array that starts with the letter 'p', `'property'`.

If no values satisfy the testing function, `find()` returns undefined.

```javascript
console.log(usTaxes.find ((el) => el.startsWith('p')))

// => 'payroll'

console.log(usTaxes.find ((el) => el.startsWith('a')))

// => undefined
```

## .filter()

The `filter()` method creates a new array with all elements that pass the test implemented by the provided function. 

Unlike the `find()` method, the `filter()` method keeps searching though an array even after it finds a value that meets the criteria of the callback function. Therefore, as shown in the code below, the `filter()` method keeps searching through the usTaxes array even after it finds 'payroll' and returns an array with all the values that start with the letter 'p' `['payroll', 'property']`.

If no values satisfy the testing function, the `filter()` method returns an empty array.

```javascript
console.log(usTaxes.filter ((el) => el.startsWith('p')))

// => ['payroll', 'property']

console.log(usTaxes.filter ((el) => el.startsWith('a')))

// => [ ]
```


## .map()

The `map()` method creates a new array populated with the results of calling a provided function on every element in the calling array. 

For example, in the code below, we use `map()` to iterate over the usTaxes array and return a new array called newUSTaxes. We also used `map()` to make all the elements of the usTaxes array in uppercase when returning them in the newUSTaxes array.

```javascript
newUSTaxes = usTaxes.map(el => el.toUpperCase())

console.log(newUSTaxes) 

//=> ['INCOME', 'SALES', 'EXCISE', 'PAYROLL', 'PROPERTY', 'ESTATE', 'GIFT']

```

## .forEach()

The `forEach()` method executes a provided function once for each array element. This is a method that can be used both on objects and arrays. Unlike the other three methods, `forEach()` returns undefined. 

```javascript
newUSTaxes = usTaxes.forEach(el => el.toUpperCase())

console.log(newUSTaxes) 

//=> undefined
```
If we want the result of the `forEach()` to be logged, then we have to tell `forEach()` to do so inside of the callback function we pass it.

```javascript
usTaxes.forEach(el => console.log(el))

//=>
'income'
'sales'
'excise'
'payroll'
'property'
'estate'
'gift'
```

## Summary

`find()`, `filter()`, `map()`, and `forEach()` are very useful when we want to iterate over an array.

- `find()` is the best method to use when you want to find the first element that meets the criteria of the callback function you pass the method.

- `filter()` is the best method to use when you want to find all the elements within the array that meets the criteria of the callback function you pass the method.

- `map()` is the best method to use when you want to manipulate the data within an array in a non-destructive way and expect to have a return value.

- `forEach()` is the best method to use when you want to repeat an action on an array in a non-destructive way but not necessarily need a return value at the end.



## Resources

- [.find()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find)

- [.filter()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)

- [.map()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)

- [.forEach()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)