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

#javascript #tutorial #webdev

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.

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]

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]

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])

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

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

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