Map, Filter and Reduce explained.

You probably have heard of .map(), .reduce() and .filter(). Map, reduce, and filter are all array methods in JavaScript. In this article, you will learn why and how to use each one. I will try and explain with examples of how each of these functions works.

map()

map() is used to transform an array. It creates a new array populated with the results of the calling function on every element in the calling array.

const array=[1,2,3,4,5];

const output=array.map(element=>
 {
  return element*2;
})

console.log(output);  // [2,4,6,8,10]

In the above code, array ===calling array and element=>{...} ===calling function

The array elements are being traversed one by one and in each iteration, the current element is multiplied by 2. The new value is pushed into a new array and after the traversal is complete we get a new array of elements in the output.

filter()

Filter is used to filter the array. filter() method creates a new array with all the elements that pass the test implemented by the provided function. If the test condition returns true, the element gets pushed to the output array. If the condition returns false, the element does not get pushed to the output array.

const array=[10,23,55,40,111];

const output=array.filter(element=>
                      {
  return element%2;
})

console.log(output); // [23,55,111]

In the example above it is filtering out all the odd elements from the array based on the test implemented in the function and pushing them into a new array and then returning the new array.

reduce()

The reduce() method executes a reducer function on each element of the array, resulting in a single output value. The reducer function takes two-parameter (accumulator, current).

accumulator= the returned value of the previous iteration and current=the current item in the array

const array=[1,2,3,4,5,6,7,8,9];

const output=array.reduce((acc,curr)=>
{
acc=acc+curr
 return acc

},0)

console.log(output); // 45

The above code calculates the sum of the elements of the array. The initial value of acc is set to 0 as mentioned in the code. On each iteration, the current element is added to acc, and hence at last the total sum is returned.

Conclusion

I really hope that you enjoyed reading this article and learned something from it. If you have any doubt or you think I missed something let me know in the comments. Feel free to like and share the post. You can connect with me on:

Twitter:Namit Malasi

LinkedIn:Namit Malasi

Github: Namit Malasi