Understanding Array Methods: filter(), map(), forEach() 

Tags: javascript, beginners, webdev, tutorial
Published: 2021-10-06 03:21:11

Arrays are one of the most popular data types used in javascript as they have variety of methods that makes it easy to use. 

In this article, I will be talking about three popular array methods; the `filter()` method, the `map()` method and the `forEach()` method,and I will be showing how they are used.

## filter() 
The `filter()` method is mostly used for returning a subset of an array that meets a certain condition. 

### How its used

```JS
array.filter((currentValue, index, arr) => {
    // condition
})
```

* The `filter()` method accepts a callback function.
* The callback takes in three positional arguments.
    * The first is the `currentValue`: which specifies the current element in the array being looped over. The `currentvalue` argument is required, i.e the value must be passed into the callback function.
    * The second is the `index`: which specifies the index of the current element in the array, this is an optional argument.
    * The third is the present `array` which the `filter()` method is applied on, this is an optional argument.
* The callback takes in a condition to test all the elements in the array and return values based on the condition.


### Example
**Return even numbers from an array of numbers**

```JS
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
arr.filter(item=> item % 2 == 0)
// result => [2, 4, 6, 8, 10]
```

### How it works
* The `filter()` method loops over every element in the array.
* It checks if the element pass the set condition; if it has a remainder after dividing two in this case.
* It passes it to a new array.
* When it has checked all the elements, it returns a new array that contains elements that pass the set condition.

### Note: 
* The `filter()` method does not mutate the array.
* The method returns a new array with all the elements that passed the condition set.

## map()
The `map()` method enables us to loop over every element of an array and perform various operations on them.
It returns a new array with the new values of the elements after the operations have been carried out on them.

### How its used

```JS
array.map((currentValue, index, arr) => {
    // operation
})
```

* The `map()` method accepts a callback function.
* The callback takes in three positional arguments.
    * The first is the `currentValue`: which specifies the current element in the array being looped over. The `currentvalue` argument is required, i.e the value must be passed into the callback function.
    * The second is the `index`: which specifies the index of the current element in the array, this is an optional argument.
    * The third is the present `array` which the `map()` method is applied on, this is an optional argument.
* The callback function allow us to perform various operations on the elements in the array.


### Example
**Return all texts in an array in uppercase**

```JS
let arr = ['Dog', 'Cat', 'HORSE', 'elEPHANT']
arr.map(item=> item.toUpperCase())
// result => ['DOG', 'CAT', 'HORSE', 'ELEPHANT']
```

### How it works
* The `map()` method loops over every element in the array.
* It picks each element and performs the stated operation on it; in this case it converts each element to uppercase.
* It passes it to a new array.
* When it has worked on all elements, it returns a new array that contains all elements in uppercase.

### Note: 
* The `map()` method does not mutate the array.
* The method returns a new array with the results of the operation in the callback function.


## forEach()
The `forEach()` method is mostly used to loop over each of the items in an array. It executes a provided function once for each array element. The `forEach()` does not have a return value, it returns `undefined`.

### How its used

```JS
array.forEach((currentValue, index, arr) => {
    console.log(currentValue)
})
```

* The `forEach()` method accepts a callback function.
* The callback takes in three positional arguments.
    * The first is the `currentValue`: which specifies the current element in the array being looped over. The `currentvalue` argument is required, i.e the value must be passed into the callback function.
    * The second is the `index`: which specifies the index of the current element in the array, this is an optional argument.
    * The third is the present `array` which the `forEach()` method is applied on, this is an optional argument.
* The callback function allow us to perform various operations on the elements in the array.


### Example
**As an alternative to the `for of` loop**

```JS
let animals = ['Dog', 'Cat', 'HORSE', 'elEPHANT']

// for of
for(let animal of animals){
    console.log(animal)
}

// forEach
animals.forEach((animal)=>{
    console.log(animal)
})
```

### How it works
* The `forEach()` method loops over every element in the array.
* It picks each element in the array and logs it to the console.

### Note: 
* The `forEach()` method does not mutate the array.
* The method returns `undefined`.

## Conclusion
I hope you have been able to learn something new about the `map()`, `filter()` and `forEach()` method.

If you have any questions, and or more insights into the topic, please drop a message for me in the comment section below. 

## Resources and further reading
* [Array.prototype.filter()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter), MDN
* [Array.prototype.map()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map), MDN
* [Array.prototype.forEach()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), MDN