# How to Use map(), filter(), and reduce() in JavaScript

If you want to learn React, it’s important to get a fair understanding of some core JavaScript concepts first.

So if that’s what you’re doing, first of all — great job! You have made a wise decision by not starting directly with React.

Second, React builds on key concepts like the map(), filter(), and reduce() JavaScript methods (after all — React is a JavaScript library). So this makes these methods a must-learn.

Map, filter, and reduce are three of the most useful and powerful high-order array methods. In this tutorial, you’ll see how each of these high-order array methods work. You’ll also learn where you’ll want to use them and how to use them, with the help of analogies and examples. It’ll be fun!

# How to Use the `map()`

Method

Suppose you have an array `arrOne`

where you've stored some numbers, and you'd like to perform some calculations on each of them. But you also **don't want to mess with the original array**.

This is where `map()`

comes into the picture. The `map`

method will help you do this:

`let arrOne = [32, 45, 63, 36, 24, 11]`

map() takes a maximum of three arguments, which are value/element, index, and array.

`arrOne.map(value/element, index, array)`

Let’s say you want to multiply each element by 5 while not changing the original array.

Here’s the code to do that:

`let arrOne = [32, 45, 63, 36, 24, 11] `

const multFive = (num) => {

return num * 5; //'num' here, is the value of the array.

}

let arrTwo = arrOne.map(multFive)

console.log(arrTwo)

And here’s the output:

`[ 160, 225, 315, 180, 120, 55 ]`

So what’s going on here? Well, I have an `arrOne`

array with 6 elements in it. Next, I initialized an arrow function `multFive`

with 'num' as an argument. This returns the product of `num`

and 5, where the 'num' variable is fed the data by the map() method.

If you’re new to arrow functions but are familiar with regular functions, an arrow function is the same as this:

`function(num) { return num * 5; }`

Then, I initialized another variable `arrTwo`

that will store the new array that the map() method will create.

On the right-hand side, I called the map() method on the ‘arrOne’ array. So, the map() method will pick each value of that array starting from the index[0] and perform the desired calculation on each value. Then it’ll form a new array with the calculated values.

**Important**: Notice how I’m stressing not changing the original array. That is because this property is what makes the map() method different from the ‘forEach()’ method. The map() method makes a new array whereas the ‘forEach()’ method mutates/changes the original array with the calculated array.

# How to Use the `filter()`

Method

The name kind of gives it away, doesn’t it? You use this method to filter the array based on conditions you provide. The filter() method also creates a new array.

**Let’s take an example**: Suppose you have an array `arrName`

and that array stores a bunch of numbers. Now, you would like to see what numbers can be divided by 3 and make a separate array from them.

Here’s the code to do that:

`let arrNum = [15, 39, 20, 32, 30, 45, 22] `

function divByFive(num) {

return num % 3 == 0

}

let arrNewNum = arrNum.filter(divByFive)

console.log(arrNewNum)

And here’s the output:

`[ 15, 39, 30, 45 ]`

Let’s break down this code. Here, I have an array `arrNum`

with 7 elements in it. Next, I initialized a function `divByFive`

with 'num' as an argument. It returns true or false for each time a new num is passed for the comparison, where the 'num' variable is fed the data by the filter() method.

Then, I initialized another variable `arrNewNum`

that will store the new array that the filter() method will create.

On the right-hand side, I called the filter() method on the `arrNum`

array. So, the filter() method will pick each value of that array starting from the index[0] and perform the operation on each value. Then it'll form a new array with the calculated values.

# How to Use the reduce() Method

Let’s say you are asked to find the sum of all elements of an array. Now, you could use a for loop or the forEach() method, but reduce is built for this kind of task.

The `reduce()`

method reduces an array to a single value by performing the desired operation on the elements collectively.

Everything is the same as the map() and filter() methods — but what’s important to understand is how the reduce method works under the hood.

There’s not a definite syntax of the reduce() method. Let’s see the simplest one and that will give you the gist of all the ways you can use reduce().

Here’s some example syntax for `reduce()`

:

`//Taking the above array for an example `

let arrNum = [15, 39, 20, 32, 30, 45, 22]

arrNum.reduce((a1, a2) => { return a1 + a2 })

Take a look at this syntax. Here, reduce is taking two arguments, `a1`

and `a2`

, where `a1`

acts as an accumulator while the `a2`

has the index value.

Now, on the first run the accumulator is equal to zero and `a2`

holds the first element of the array. What reduce does is that it throws the value in the accumulator that a2 holds and increments it to the next one. After that, the reduce() method performs the operation on both operands. In this case it is addition.

So, basically `a1`

is the accumulator which is currently zero and `a2`

holds 15. After the first run, the accumulator has 15 in it and `a2`

is holding the next value which is 39.

Now, on second run, reduce throws `a2`

's value, 39 in the accumulator and then performs the operation on both operands.

Now, on the third run, the accumulator has a sum of 15 and 39 which is 54. `a2`

now holds 20 which the reduce method throws at the accumulator which sums up to `54 + 20 = 74`

.

This process keeps on going until the end of the array.

# Signing Off

Well, that’s it, everyone! Hope you have a good idea of how these high-order array methods work now. Consider sharing if you had a good time reading it and find it helpful.

Check out my latest story here, and for my Git eBook, check here.

*Originally published at **https://www.freecodecamp.org** on October 3, 2022.*