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.
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
, andinitialValue
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 arrayfilter
: 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! :)
Original Link: https://dev.to/allisoncortez/using-map-filter-and-reduce-collection-processing-methods-in-javascript-2a5o
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To