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:
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) });
Ages output as follows:
All ages: 12 8 40 66
using filter()
To obtain the list of objects whose age is less than 12, we use filter:
var older = items.filter(item => item.age > 12); console.log("All ages > 12:"); older.forEach(item => { console.log(item.age) });
Giving the following output:
All ages > 12: 40 66
using map()
And then to put the ages of those filtered objects into their own list, we use map:
var olderMap = older.map(item => item.age); console.log("All ages > 12 in new array:"); olderMap .forEach(item => { console.log(item) });
Giving the following output:
All ages > 12 in new array: 40 66
using reduce()
And then we wish to find the total aggregate age of the new array of ages:
var olderMapTotal = olderMap.reduce((acc, value) => value + acc); console.log("Total of ages > 12:");
Giving the following output:
Total of ages > 12:' 106
And you can also chain the use of filter, map and reduce as follows:
// 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);
Giving the following output:
Total of ages > 12 using chaining:' 106
These operations can be done within the curly brackets as shown:
var olderMapTotalChained = items .filter(item => { return item.age > 12 || item.name.includes('Wedge') }) .map(item => item.age) .reduce((acc, value) => acc + value);