map(), filter() and reduce() in JavaScript

For more such articles, visit www.knowledgescoops.com

Prototype in JavaScript array have the map(), filter() and the reduce() method. We have been generally using these methods with an array. This article explains the usage of these methods that help to iterate, modifying the array with much ease.

The map() method

The map() method creates a new array from an existing array by modifying each item by the function that is passed to the map() method.

let arr = [1, 2, 3, 4, 5];
let doubleValues = arr.map(value => { return value * 2; });

doubleValues now contains:

[2, 4, 6, 8, 10]

The map() returns a new array which contains the newly mapped elements which are stored in the doubleValues array.

The filter() method

The filter() method filters the elements and makes a subset of an array. The filter() methods accept a function returning a boolean as an argument. If the boolean method returns true, the value will be selected else the value will be rejected.

let values = [1020, 3323, 8876, 2983, 1122];
let largeValues = values.filter(value => { 
    return (value > 3000); 
});

The above method filters the values and extracts out the larger values (greater than 3000) in a variable named largeValues.

largeValues now contains:

Similar to map() method, filter() also returns a new array of filtered elements that we have assigned in the array named largeValues.

The reduce() method

The reduce() method is different from the map() and filter(). Instead of creating a new array, it reduces the array to some concrete value (say sum of all array elements). It uses an accumulator to do so.

let arr = [1, 2, 3, 4, 5];

The reduce() method needs a callback as its first parameter which is defined as:

const reducer = (accumulator, currentValue, currentIndex) => {
    console.log("Current Index: " + currentIndex);     
    console.log("Accumulator Value: " + accumulator); 
    console.log("Current Value: " + currentValue); 
    return accumulator + currentValue; 
}

To actually use the reduce method, we write:

arr.reduce(reducer);

We get the output as:

Current Index: 1
Accumulator Value: 1
Current Value: 2
Current Index: 2
Accumulator Value: 3
Current Value: 3
Current Index: 3
Accumulator Value: 6
Current Value: 4
Current Index: 4
Accumulator Value: 10
Current Value: 5
15

The number 15 is the value returned by the reduce() method.

reduce() method can also take a second optional parameter like:

arr.reduce(reducer, 10);

We get the output as:

Current Index: 0 
Accumulator Value: 10 
Current Value: 1 
Current Index: 1 
Accumulator Value: 11 
Current Value: 2 
Current Index: 2 
Accumulator Value: 13 
Current Value: 3 
Current Index: 3 
Accumulator Value: 16 
Current Value: 4 
Current Index: 4 
Accumulator Value: 20 
Current Value: 5
25

The number 25 is the value returned by the reduce() method. The second parameter 10 is called the initialValue, that gets added to the array sum 15 with the iterations as defined in the above stack trace.

For more such articles, visit www.knowledgescoops.com

Want to read more articles like this?
Follow me on medium @kunaltandon.kt
Connect with me on LinkedIn:
https://www.linkedin.com/in/kunal-tandon/