DEV Community

Brandon Weaver
Brandon Weaver

Posted on

14 3

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"
    }
];
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

Map allows us to simplify the solution quite a bit.

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

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"}]
Enter fullscreen mode Exit fullscreen mode

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"}]
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Here's the solution using reduce.

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

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.

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay