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:

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);