The basics of JavaScript Map, Filter and Reduce

Are you tired of using long for loops and complicated constructions in order to perform simple tasks when working with arrays? By using some of the array methods that JavaScript offers you can improve your code and make it easier to understand. In this post we will go over how you can use the array methods Map, Filter and Reduce in order to write better code.

1. Array.map()

Calls a function on every item in the array and returns the modified array without mutating the original array.

Let's say we have an array of cats and would like to extract the id together with the name of each cat, then we would do the following:

// Original array of cats.
const cats = [
  { id: 1, name: "Fluffy", color: "white", age: 3 },
  { id: 2, name: "Steve", color: "orange", age: 1 },
  { id: 3, name: "Voldemort", color: "black", age: 5 },
]

// Modify cat object to only contain name and id.
const catsFiltered = cats.map(cat => {
  return {
    id: cat.id,
    name: cat.name,
  }
})

// Result.
[
  { id: 1, name: "Fluffy" },
  { id: 2, name: "Steve" },
  { id: 3, name: "Voldemort" },
]

2. Array.filter()

Creates a new array with all items that fullfills the condition provided by the given function without mutating the original array.

Maybe we would like to get all the cats that are older than one year, then we would the following:

// Original array of cats.
const cats = [
  { id: 1, name: "Fluffy", color: "white", age: 3 },
  { id: 2, name: "Steve", color: "orange", age: 1 },
  { id: 3, name: "Voldemort", color: "black", age: 5 },
]

// Filter out cats older than one year.
const catsFiltered = cats.filter(cat => cat.age > 1)

// Result.
[
  { id: 1, name: "Fluffy", color: "white", age: 3 },
  { id: 3, name: "Voldemort", color: "black", age: 5 },
]

3. Array.reduce()

Executes a reducer funtion on every item in the array without mutating the original array and returns a single value. The first argument of the reducer function is the accumulator which is the modified array from the previous iteration.

If we add a new property to each cat object called breed we can use Array.reduce() to group the cats.

// Original array of cats.
const cats = [
  { id: 1, name: "Fluffy", color: "white", age: 3, breed: "siamese" },
  { id: 2, name: "Steve", color: "orange", age: 1, breed: "munchkin" },
  { id: 3, name: "Voldemort", color: "black", age: 5, breed: "siamese" },
];

// Group cats by breed.
const catsGrouped = cats.reduce((acc, cat) => {
  const breed = cat.breed;

  if (!acc[breed]) {
    acc[breed] = [];
  }

  acc[breed].push(cat);

  return acc;
}, {});

// Result.
[
  {
    siamese: [
      { id: 1, name: "Fluffy", color: "white", age: 3, breed: "siamese" },
      { id: 3, name: "Voldemort", color: "black", age: 5, breed: "siamese" },
    ],
    munchkin: [
      { id: 2, name: "Steve", color: "orange", age: 1, breed: "munchkin" },
    ],
  },
];

Conclusion

Now you know the basics of Map, Filter and Reduce! Of course, there are more advanced use cases where these methods are useful but now when you know the basics you can incorporate these into your code and hopefully remove complicated code blocks dealing with arrays.