DEV Community

Cover image for Using Map, Filter, and Reduce: Collection-Processing Methods in Javascript
Allison Cortez
Allison Cortez

Posted on

Using Map, Filter, and Reduce: Collection-Processing Methods in Javascript

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
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
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]
Enter fullscreen mode Exit fullscreen mode

Learn more about map here and here

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:

let array = [8, 10, 12, 14]
array.filter(function(e) {
    return e >= 12;
  }) // [12, 14]
Enter fullscreen mode Exit fullscreen mode

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

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.

let array = [1, 2, 3, 4].reduce(
(accumulator, currentValue, currentIndex, array) => accumulator + currentValue) 

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

console.log(array) // 20
Enter fullscreen mode Exit fullscreen mode

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: Transform every element and create a new array
filter: Create a new array with all elements that pass the test implemented by the callback function.
reduce: Reduce every element into a new value

Photo by Sharon McCutcheon from Pexels

Thanks for reading! :)

Top comments (3)

Collapse
 
gedalyakrycer profile image
Gedalya Krycer

Thanka for sharing these. I found your breakdowns to be clear and to the point. 👍🏼

Collapse
 
allisoncortez profile image
Allison Cortez

Thanks for the feedback. I'm glad it was helpful! :)

Collapse
 
bhanu101 profile image
Bhanupraksh

I found this article very helpful. Thank you