JavaScript - Map, Filter, and Reduce

Map, filter, and reduce are three useful functions which can help to simplify your JavaScript code.

Below is a simple data structure which we will reference as we learn about these functions.

const people = [
    {
        age: 25,
        name: "Jane"
    },
    {
        age: 30,
        name: "Joe"
    },
    {
        age: 35,
        name: "John"
    }
];

Let's say that we just needed a collection of peoples ages; there are numerous ways to do this. The following is a common solution.

const ages = [];
for (const person of people) ages.push(person.age);
// [25,30,35]

Map allows us to simplify the solution quite a bit.

const ages = people.map(person => person.age);
// [25,30,35]

Here, we pass a callback to map, and for each element within the collection, we determine what we want to return.

Now, what if we need to create a collection comprised only of people over the age of 30? We could do something like the following.

const peopleOverThirty = [];
for (const person of people) {
    if (person.age > 30) peopleOverThirty.push(person);
}
// [{age: 35, name: "John"}]

Now, let's see how filter can be used to produce the same result.

const peopleOverThirty = people.filter(person => person.age > 30);
// [{age: 35, name: "John"}]

Similar to map, we pass filter a callback, here however, rather than what we want to return, we determine which elements to return using a conditional statement.

Next, let's get a sum of every person's age. Assuming that we have our ages array from earlier, below would be one way to achieve this.

let ageSum = 0;
for (const age of ages) ageSum += age;
// 90

Here's the solution using reduce.

const ageSum = ages.reduce((acc, age) => acc + age);
// 90

As per usual, we pass the function a callback, although we're giving our callback two arguments this time. The first argument is the accumulator, which is going to hold the result of each consecutive operation. The second argument is the current element, as with map and filter.

These are small examples of how map, filter, and reduce can help to keep your code simple.