Using Map, Filter, and Reduce: Collection-Processing Methods in Javascript 
Tags: javascript, tutorial, webdev
Published: 2020-12-27 16:32:15

filter, map and reduce are very powerful methods. They allow you to iterate through the contents of an array, similar to a for loop. Each method creates a new array, element or object, based on the callback function that it's supplied. 

![curtsy](https://media.giphy.com/media/vCwMOU05OcdQk/giphy.gif)
I would say these three methods win the popularity contest due to the following:
* ***their non-destructive nature***(The return value is a copy of the original, the original stays unchanged)
* they are easier to write and follow DRY(Don't Repeat Yourself) principles

Let's go ahead and break these down: 
## Array.Map()
* invokes a callback function on every element in the array
* returns a copy of the original array that is passed to it
* the original array does not change

```javascript
let array = [8, 10, 12, 14]
let newArray = array.map(element => element + 4)
console.log(newArray) // [12, 14, 16, 18]
console.log(array) //[8, 10, 12, 14]
```
Learn more about map [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) and [here](https://www.digitalocean.com/community/tutorials/4-uses-of-javascripts-arraymap-you-should-know)

## Array.Filter()
The filter method is very similar to map. It also goes through every element of an array and returns a new updated copy of that array. ***The difference lies in how we utilize the callback*** function. 

 For example:
```javascript
let array = [8, 10, 12, 14]
array.filter(function(e) {
    return e >= 12;
  }) // [12, 14]
```
In this example, ***the new array here has all the elements that return true*** for the callback function. All elements that return false will be skipped. If we have no true elements, the return value will be an empty array.

## Array.Reduce()
The reduce method ***applies a function to each value of the array*** using an accumulator, ***reducing it to one single value***. Just like map and filter, the original array remains unchanged.

***The reducer function takes four arguments:***
* Accumulator
* Current Value
* Index
* Array (our original)

***MDN Syntax:***
`arr.reduce(callback( accumulator, currentValue, [, index[, array]] )[, initialValue])
`

![reduce](https://media.giphy.com/media/3o85xuUoAybzvzsMPS/giphy.gif)

## More on reduce()
* You can think of the `accumulator` as a running total, with each element of our array being added to that total.
* The `index`, `array`, and `initialValue` are all optional. 

* If an `initialValue` is not provided, the first element of the array will be the ***accumulator*** and the second element will become the ***currentValue***.
```javascript
let array = [1, 2, 3, 4].reduce(
(accumulator, currentValue, currentIndex, array) => accumulator + currentValue) 

console.log(array) // 10
```
* If an initial value IS provided, the accumulator will be equal to the `initialValue`. `currentValue` will equal the first element in our array. 
```javascript
let array = [1, 2, 3, 4].reduce(
(accumulator, currentValue, currentIndex, array) => { return accumulator + currentValue}, 10) 

console.log(array) // 20
```
Since we provided an initial value of 10, we start with our accumulator at 10, adding each element in the array to 10, giving us a total of 20.

## Summary
[`map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map): Transform every element and create a new array
[`filter`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter): Create a new array with all elements that pass the test implemented by the callback function.
[`reduce`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce): Reduce every element into a new value

Photo by [Sharon McCutcheon](https://www.pexels.com/@mccutcheon?utm_content=attributionCopyText&utm_medium=referral&utm_source=pexels) from Pexels

Thanks for reading! :)