Explaining filter array method map array method and reduce array method in javascript

Hello everyone, Welcome to Metric Tree Labs blog series:

Today we are discussing about es6 array functions,that is mainly classified into 3 that are

• Filter ()
• Map ()
• Reduce ()

Now, let’s discuss these in details:

The filter method creates a new array with all elements that pass the test implemented by the provided function.

The map method creates a new array with the result of calling a provided function on every element in the calling array.

The reduce method executes reduce function on each element  of array resulting in single output values

Now, let’s check the working of these in detail:

• Filter Method

First take an array that include number 1 to 8.

arr=[1,2,3,4,5,6,7,8]

If a new array is passed to a filter method given below, we will get even numbers from the array.

The filter method is used in the following line:

const newArr=arr.filter(a=>a%2==0)

Here, we have used new es6 arrow function for implementing filter method.

And the operation ‘a %2==0’ is used to get an even number from the array. Similarly, other functions can be used to get different results.

To get the answer, the following is used

console.log(newArr);

To check whether the method is working, run javascript using ‘node test.js’ where node is the keyword and test.js is the program file.

Once we run the program, we get the following output:

[2,4,6,8]

Which is an array of even numbers from the input array

[1,2,3,4,5,6,7,8]

• Map Method

To apply a map method, let’s consider the same array

arr=[1,2,3,4,5,6,7,8]

If we apply the map method which is given below,

const newArr=arr.map(a=>a*a)

Here, we have defined the result that we require from the method. In this case, the resultant array elements will be the square of the inputted array elements.

console.log(newArr)

The output will be the following. The resultant array will have the same length as that of the inputted array.

[1,4,9,16,25,36,49,64].

Similarly, we can define multiple methods by changing the function defined in the map method.

For example: const newArr=arr.map(a=>a*10) 

Will give you the output [10,20,30,40,50,60,70,80]

• Reduce Method

Comparing to the previously discussed methods, the reduce method is slightly different. In both the previous methods we got an array as an output. But, in the case of Reduce method, we get a single element or a single number.

Let’s take a new array:

var arr1=[12,8,22,15,33].

If we apply the reduce method in the above array, it will look like this:

const newArr=arr1.reduce((a,b))=>a + b).

In this case, we have used the reduce method ((a,b))=>a + b)

Which will have the following result.

The sum of the first two elements 12 & 8 is 20

This gets added to the third element 22 which gives the result 42

42 is the sum of the first 3 elements which gets added to the fourth element 15.

This goes on till a single sum is obtained.

Running console.log(newArr);

This will give you the result 90 which is same as already obtained

refer to our youtube video tutorial for more details