JS Array Methods You Should Know: .map, .reduce, and .filter (ft. Chaining)
Tags: javascript, beginners, tutorial
Published: 2020-10-08 19:33:17

As a Javascript developer, at one point or another, you are going to use arrays — there is no way around it. That being said, there are three Javascript array methods that you should know that will make your life easier as a developer.

**.map**

The *.map* method is used when we want to iterate over every item in an original array and in return receive a new array with updated items based on the result of whatever operation we decide to perform on each item from the original array. This means that:

- our new array will always be the same length as our original array
- our original array will not be manipulated

Example: Adding 10 to each number in an original array of numbers

```jsx
let numbers = [1,2,3,4,5] 
let newNumbers = numbers.map(num => num + 10)

console.log(newNumbers) // [11,12,13,14,15]
```

So what happened here?

1. We had an array called *numbers* whose values were *[1,2,3,4,5]*
2. We created a *newNumbers* variable which would ultimately equal a new array (since *.map* always returns a new array)
3. We called *.map* on the *numbers* array and basically said "okay Mr. Map, take each number (**num**) in our *numbers* array and add 10 to it, and then insert it into the new array that you are creating for us (*newNumbers*)
4. So when we try to use, or simply console.log *newNumber,* we'll see that its values are now *[11,12,13,14,15]*

**Note**: **num** can be named whatever you like, just know that it will simply refer to a value from the original array (in order) on each pass through.

If you do not plan on using the newly returned array, you most likely don't need *.map* and can just use .*forEach.*

**.filter**

The *.filter* method is used when we want to create a new array based on.. you guessed it.. filtered results of an original array that pass a particular test/condition. Just like *.map* our original array will not be manipulated, but the length of our new array will likely be different.

Example: Return all numbers that are greater than 50

```jsx
let numbers = [1,2,3,4,5,10,20,30,35,40,49,51,52,53,54,55,60,70,80,90,100]
let numbersGreaterThan50 = numbers.filter(num => num > 50)

console.log(numbersGreaterThan50) // [51, 52, 53, 54, 55, 60, 70, 80, 90, 100]
```

So what happened here?

1. We had an array called *numbers* whose values were *[1,2,3,4,5,10,20,30,35,40,49,51,52,53,54,55,60,70,80,90,100]*
2. We created a *numbersGreaterThan50* variable which would ultimately equal a new array (since *.filter* always returns a new array)
3. We called *.filter* on the *numbers* array and basically said "okay Mr. Filter, take each number (**num**) in our *numbers* array and check if it is greater than 50, if so.. take that number (**num**) and insert it into the new array that you are creating for us (*numbersGreaterThan50*), if not.. we don't need it.
4. So when we try to use, or simply console.log *numbersGreaterThan50,* we'll see that its value is now *[51, 52, 53, 54, 55, 60, 70, 80, 90, 100]* because those are the only numbers in our original *numbers* array that are greater than 50 (and thus passed the condition/test (num > 50) that we set.

**Note**: Again, **num** can be named whatever you like, just know that it will simply refer to a value from the original array (in order) on each pass through.

**.reduce**

The *.reduce* method is used when we want to take an array and return a single value (think shopping cart total, average from a list of grades, etc). Just as with *.map* and *.filter* our original array will not be manipulated, but our return value will instead be a single value (a total, an average, etc)

Example: Add up an array of numbers

```jsx
let numbers = [1,2,3]
let sum = numbers.reduce((accumulator, value) => accumulator + value

console.log(sum) // 6
```

1. We had an array called *numbers* whose values were *[1,2,3]*
2. We created a *sum* variable which would ultimately equal a single value (since *.reduce* returns a value rather than an array)
3. We called *.reduce* on the *numbers* array and then set two arguments (*accumulator* and *value*)
4. *accumulator* will always equal the first item in the array, unless we provide an additional *initialValue* argument (more here: [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce)) — so in this case our accumulator will be 1.
5. *value* will be equal to the next item/value from the original array (if *initialValue* is not set, it will skip over the first element since we are using *accumulator* as the first value / default *initialValue* to add upon.. again.. more in the link above)

So in our case, after adding/accumulating each *value* we received from *numbers* we got to *6* like this:
*(we have 3 passes since there are 3 items in the numbers array)*

1st Pass: 
*accumulator =* 1 (first number of original array)
*value* = (skipped since no *initialValue* was set)
*accumulator* for 2nd pass = 1 since we did not perform *accumulator + value* here

2nd Pass: 
accumulator = 1
*value* = 2
*accumulator* for 3rd pass will be 3 since *accumulator* + *value = 3*

3rd Pass: 
*accumulator* = 3
*value* = 3
final *accumulator* value will be 6 since *accumulator + value = 6*

**Note**: Again, **accumulator** and **value**  can be named whatever you want, just know that **accumulator** will be the running total / value based on what you are doing inside of *.reduce* and **value** will be each item from your original array (in order)

**Chaining**

A nice bonus to using *.map, .filter,* and *.reduce* is that they are chainable. Meaning that we could do something like this:

```jsx
let numbers = [1,2,3,4,5]
let newNumbersOver20 = numbers.map(num => num * 10).filter(num => num > 20)

console.log(newNumbersOver20) // [30,40,50]
```

![https://media0.giphy.com/media/l0NwHXQy3kUSfFF60/giphy.gif?cid=ecf05e47tw7j4tmhwiflre0i2fw4e9xsjtn56q1f1wfsixdk&rid=giphy.gif](https://media0.giphy.com/media/l0NwHXQy3kUSfFF60/giphy.gif?cid=ecf05e47tw7j4tmhwiflre0i2fw4e9xsjtn56q1f1wfsixdk&rid=giphy.gif)

So what happened here?

1. We took our original *numbers* array
2. We used .*map* to multiply each number by 10, which would give us a new array of *[10,20,30,40,50]*
3. We then used .*filter* on the new array we received from *.map* to... filter/return numbers that were greater than 20, which gave us *[30,40,50]*

So as you can imagine, we can do some pretty nifty things when chaining these methods together.

These are all very simple examples of how to use *.map, .filter*, and *.reduce.* 

As always, refer to MDN for more info:
.map: [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)
.filter: [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)
.reduce: [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce)

Feel free to reach out on any of my socials for questions, feedback (good and bad), or just to connect / say hello 👋.