Using .map(), .reduce() and .filter() in JavaScript
Useful links:
https://code.tutsplus.com/tutorials/how-to-use-map-filter-reduce-in-javascript--cms-26209
https://medium.com/poka-techblog/simplify-your-javascript-use-map-reduce-and-filter-bd02c593cc2d
To summarize:
map
Creates a new array by transforming every element in an array, individually.
filter
Creates a new array by removing elements that don't belong.
reduce
Takes all of the elements in an array, and reduces them into a single value.
reduce method executes a provided function for each value of the array (from left-to-right).
reduce passes your callback four arguments:
The current value
The previous value
The current index
The array you called reduce on
In this post I use playcode.io to do the compiling of the JavaScripts online.
Example
Suppose we have the following array of objects, and we wish to filter the list of objects whose age is greater than 12, put the ages of those filtered objects into another array, and find the total age from the new array:
[code language="js"]
var items = [
{
age: 12,
name: "Wedge Antilles",
faction: "Rebels",
val: 23
},
{
age: 8,
name: "Ciena Ree",
faction: "Empire",
val:19
},
{
age: 40,
name: "Iden Versio",
faction: "Empire",
val:213
},
{
age: 66,
name: "Thane Kyrell",
faction: "Rebels",
val:3
}
];
console.log("All ages:");
items.forEach(item => {
console.log(item.age)
});
[/code]
Ages output as follows:
[code language="text"]
All ages:
12
8
40
66
[/code]
using filter()
To obtain the list of objects whose age is less than 12, we use filter:
[code language="js"]
var older = items.filter(item => item.age > 12);
console.log("All ages > 12:");
older.forEach(item => {
console.log(item.age)
});
[/code]
Giving the following output:
[code language="text"]
All ages > 12:
40
66
[/code]
using map()
And then to put the ages of those filtered objects into their own list, we use map:
[code language="js"]
var olderMap = older.map(item => item.age);
console.log("All ages > 12 in new array:");
olderMap .forEach(item => {
console.log(item)
});
[/code]
Giving the following output:
[code language="text"]
All ages > 12 in new array:
40
66
[/code]
using reduce()
And then we wish to find the total aggregate age of the new array of ages:
[code language="js"]
var olderMapTotal = olderMap.reduce((acc, value) => value + acc);
console.log("Total of ages > 12:");
[/code]
Giving the following output:
[code language="text"]
Total of ages > 12:'
106
[/code]
And you can also chain the use of filter, map and reduce as follows:
[code language="js"]
// Combined
console.log("Total of ages > 12 using chaining:");
var olderMapTotalChained = items
.filter(item => item.age > 12)
.map(item => item.age)
.reduce((acc, value) => acc + value, 0);
console.log(olderMapTotalChained);
[/code]
Giving the following output:
[code language="text"]
Total of ages > 12 using chaining:'
106
[/code]
These operations can be done within the curly brackets as shown:
[code language="js"]
var olderMapTotalChained = items
.filter(item => { return item.age > 12 || item.name.includes('Wedge') })
.map(item => item.age)
.reduce((acc, value) => acc + value);
[/code]
Comments
Post a Comment