Map, Filter and Reduce In JavaScript

From ES6 version of JavaScript; map, filter and reduce function have been introduced in arrays. Which has become essential parts of life for JavaScript programmers. These methods use the functional programming concepts to the arrays. These methods automatically loop through the array so we don’t need to write separate loop to traverse the array.

Now let’s go through this method one by one,

Map

Map function is used to loop through the array, runs operation on its elements and returns a new array. This is just it does.

var arr= [1,2,3,4]
var array=arr.map(elem=> elem*2)
console.log(array) // [ 2, 4, 6, 8 ]

Here, we have an array named “arr” having 4 elements. We run the map function on each element of the array which is the “elem” parameter. The function makes every element multiplied by 2 and inserts them in a new array. After traversal it returns the new array, where all the elements are multiplied by 2.

Returned output — [2,4,6,8]

Note — It does not modify the original array. It traverses through the array and returns a new array.

Filter

Like map, filter traverses through each element of an array and returns a new array. It does not modify the real array.

var arr= [1,2,3,4]
var array=arr.filter(elem=> elem*2)
console.log(array) // [ 2, 4, 6, 8 ]

But there is a difference.

Let’s look at the following 2 pieces of code,

var arr= [1,2,3,4]
var array=arr.map(elem=> elem>2)
console.log(array) // [ false, false, true, true ]
var arr= [1,2,3,4]
var array=arr.filter(elem=> elem>2)
console.log(array) // [ 3,4 ]

In the map function, when we enter a condition it will return whether the condition is true for a specific element of an array. For example, for the first element of the array 1, the condition is false. So, it will return false. For 2 it is still false. For 3, it is true. For 4, it is true.

So, the final output is — [false, false, true, true]

In the filter function, when we enter a condition it will return those elements for those the condition is true. For example, for the first element of the array 1, the condition is false. So, it will not return the element. For 2 it is still false. For 3, it is true so, it will return the element. For 4, it is the same as 3.

So, the final output is — [3, 4]

Reduce

Reduce is different from both map, filter. These two returns traverse through the array and returns a new array. But Reduce traverses through an array and reduces it to one element.

Let’s look at the following code,

var arr= [1,2,3,4]
var value= arr.reduce(((acc, val)=> acc+val),5)
console.log(value) // 15

This reduce function takes a callback function and an initialValue, which is optional. The callback takes two parameters, the accumulator and the currentValue. Now if the initialValue is provided like the example, for the first iteration the accumulator is the initialValue and the currentValue is the first element of the array. Then it executes the code from the function, for this case adding the accumulator and currentValue and returns it.

For the next iteration, the accumulator is the returned value which is 6 and currentValue is the next element of the array which is 2. These two gets added inside the callback and returned as accumulator which is 8. For the next iteration the accumulator is 8 and the currentValue is 3, the next element. And it continues like this until the array is fully traversed.

The iteration of the array is given below,

Let’s look at another code,

var arr= [1,2,3,4]
var value= arr.reduce(((acc, val)=> acc+val))
console.log(value) // 10

Here the final output is — 15

There is another case where the initialValue is not set, the exception is the first iteration, where the accumulator will be the first element which is 1, and the currentValue will be the second element which is 2. These two gets added in the callback and returned, which is 3. In the next iteration, the accumulator is 3, the returned value and the currentValue is 3, the third element. These two gets added and returned. And it goes on until the whole array traversal finishes.

The iteration of the array is given below,

The final output is 10

The difference between having initialValue or not is the traversal number. The default accumulator value is the first element of the array so, the array traversal starts from the second element. If the initialValue is set then the traversal will start from the first element of the array.

Conclusion

Map, Filter and Reduce are some widely used functions in JavaScript. These can be called the backbones of functional programming. For applying functional programming to array these 3 are the basics.

Happy JavaScripting.