Using JavaScript `map()` and `filter()` Together for Composition

Aug 14, 2020

JavaScript's Array#map() and Array#filter() functions are great when used together because they allow you to compose simple functions.

For example, here's a basic use case for filter(): filtering out all numbers that are less than 100 from a numeric array.

const nums = [25, 125, 75, 200];

function atLeast100(num) {
  return num >= 100;
}

nums.filter(atLeast100); // [125, 200]

This function works fine on an array of numbers. But what happens when you need to find the number of products based on price? Do you need a separate priceAtLeast100() function? No, you can just use map() to transform the products array to fit what the atLeast100 function expects.

const products = [
  { name: 'T-Shirt', price: 25 },
  { name: 'Headphones', price: 125 },
  { name: 'Keyboard', price: 75 },
  { name: 'Monitor', price: 200 }
];

// Gets the number of products whose price is at least 100.
products.map(product => product.price).filter(atLeast100).length;

This is an example of composition: by combining map() and filter(), you can reuse the simple atLeast100() function to operate on a slightly different input.

Filter then Map

The previous example shows why you might want to use map() followed by filter(). There's also cases where you may want to use filter() followed by map(). For example, you may want to check that a nested property exists before calling map().

const orders = [
  { quantity: 2, item: { name: 'T-Shirt', price: 25 } },
  { quantity: 1, item: { name: 'Keyboard', price: 75 } },
  // Maybe there was a bug and a order with a null `item` ended up in the database!
  { quantity: 2, item: null }
];

const orderedItemNames = orders.
  filter(order => order.item != null).
  map(order => order.item.name);

Did you find this tutorial useful? Say thanks by starring our repo on GitHub!

More Fundamentals Tutorials