map(), filter() and reduce() in JavaScript
July 27, 2019
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 15with the iterations as defined in the above stack trace.
0 comments