Discussion on map, filter and reduce methods in Javascript.

Interview Question: If you can guess the output of the below code successfully then you can skip this blog :)

Code:

let input_array=[1,6,3,7,9,2];
let updated_array=input_array.map((element)=>{
    return element<4;
})
console.log(updated_array);

If you have been trying to understand map, filter, and reduce methods and finding these methods a bit tricky to grasp then this blog is just for you.

Also, let me tell you all these methods are only applicable to an array which many programmers forget. Now let's dive into the main topic.

Map

The map method is responsible for performing certain operations on the input array and returns an array of the same size.

Syntax of using the Map method

let updated_array = input_array.map( function myfunc(single_element){
                            // performing operations on the element
                    })

Let's take an example where we are multiplying all the elements present in the array by 2 and returning the updated array and see its code.

Code:

let input_array=[4,6,3,7,9,2];
let updated_array=input_array.map(function myfunc(element){
    return element*2;
})
console.log(updated_array);

Output:

[ 8, 12, 6, 14, 18, 4 ]

Note: We can use an anonymous function as well in the above code example. It is used in the below filter method as an example :)

Filter

The filter method is responsible for returning only elements which are satisfying the given condition. Therefore the returned array size is lesser than the input array size.

In the case of the filter method the inner operations only return either true or false, saying that the current element should be included in the result or not.

Syntax of using the Filter method

let updated_array = input_array.map( function myfunc(single_element){
// Write conditions such that either true or false is returned      
})

Let's take an example where we are selecting people whose age is greater than 18 and printing the total count. The code is written below for the same.

Code:

let input_object={"pulkit":21, "bhavya":17, "chirag": 19, "anushka": 18};
let updated_array=Object.values(input_object).filter((age)=>{
    if(age>18){
        return true;
    }else{
        return false;
    }
})
console.log(updated_array.length);

Output:

2

Reduce

The reduce method is responsible for using array elements in such a way that there is only one value returned at the end.

Syntax of using the Reduce method

let result=input_array.reduce( function myfunc(prevres,curvalue){
                                // perform operations
                                }, initialvalue)

Let's take an example where we want to find the sum of all the elements present inside the array. The code is written below.

Code:

let input_array=[1,2,3,4,5,6,7,8,9];
let result=input_array.reduce(function myfunc(prevres,value){
   return prevres+value; 
},0)
console.log(result);

Output:

45

I hope you were able to understand this blog and the above methods clearly. Feel free to ask your doubts or add anything extra in the comment box :)