JS Array Methods You Should Know: .map, .reduce, and .filter (ft. Chaining)

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

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

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

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) — 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:

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

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

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
.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

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