Map, Filter and Reduce are like Amar-Akbar-Antony in JavaScript. These 3 are array methods of JavaScript.

Before we dig deep into these methods we need to understand Higher Order Function

A Function that takes another function or functions as an argument or returns a function or does both is known as the Higher Order Function.

Since this topic is not within the scope of this article we will not discuss about it. You can read more here.

Now let's understand Map, Filter, and Reduce.

Map

Syntax:-

Array.prototype.map(callback function)

What it does:-

• It iterates over each element of the array and executes the callback function on each element then returns a new array.

• It does not change the original array but creates a new Array.

Example:-

Let's say we have an array like this -> num = [2,5,8,9,12,15]

Let's create an Array with the double of each element of the num array.

Let's see how we can solve this problem by using normal for loop

const num = [2,5,8,9,12,15]
let doubledNum = [];
for(let i=0; i<num.length; i++){
  doublesNum.push(num[i]*2)
}
console.log(doubleNum)
// Output:- [4,10,16,18,24,30]

Now let's see how we can solve this problem using the map method.

const num = [2,5,8,9,12,15]
const doubleNum = num.map(item => item*2)
console.log(doubleNum)
// Output:- [4,10,16,18,24,30]

You can see how we reduce the number of lines of code only by using the map function.

Filter

Syntax:-

Array.prototype.filter(callback function)

What it does:-

• It iterates over each element of the array and executes the callback function on each element. If that function returns true then the element will be added to the new array else it will not be added to the new array.

• It does not change the original array but creates a new Array.

Example:-

Let's take the same num array we used before.

Let's create an Array with only the even numbers from the num array.

Let's see how we can solve this problem by using normal for loop

const num = [2,5,8,9,12,15]
let evenNum = [];
for(let i=0; i<num.length; i++){
  if(num[i]%2 === 0){
    evenNum.push(num[i])
  }
}
console.log(evenNum)
// Output:- [2,8,12]

Now let's see how we can solve this problem using the filter method.

const num = [2,5,8,9,12,15]
const evenNum = num.filter(item => item%2===0)
console.log(evenNum)
// Output:- [2,8,12]

Reduce

Syntax:-

Array.prototype.reduce(callback function(accumulator,currentValue), initialValue )

What it does:-

1. callback function:- This function executes on each element of the array, it takes 2 parameters-

   • accumulator:- It accumulates the return value of the callback function
   • currentValue:- This is the current element on which the function will execute.

2. initialValue:- This is an optional parameter. It will be passed to the callback function on the first call as the accumulator. If this value is not provided then the 1st element of the array works as an accumulator on the first call and the callback function will not execute on it.

Example:-

Let's again take the same num array we used before.

Let's find out the sum of all the elements of the num array

Let's see how we can solve this problem by using normal for loop

const num = [2,5,8,9,12,15]
let result = 0;
for(let i=0; i<num.length; i++){
   result += num[i]
}
console.log(result )
// Output:- 51

Now let's see how we can solve this problem using the reduce method.

const num = [2,5,8,9,12,15]
const sum = num.reduce((acc,curr) => {
    return acc+curr
}, 0)
console.log(sum)
// Output:- 51