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.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more