JavaScript map and filter explained with examples

filter keeps the items that pass a test, and map turns each item into something else. Both return a new array and leave the original alone, and you can chain them.

Filter, map, then chain

const products = [
  { name: "House Espresso", priceCents: 1600 },
  { name: "Single Origin", priceCents: 1700 },
  { name: "Decaf", priceCents: 1500 },
  { name: "Speckled blue mug", priceCents: 1800 },
  { name: "Dotted notebook", priceCents: 1200 },
];

const names = products.map((p) => p.name);
console.log(names);

const pricey = products.filter((p) => p.priceCents >= 1600);
console.log(pricey.length); // 3

const priceyNames = products
  .filter((p) => p.priceCents >= 1600)
  .map((p) => p.name);
console.log(priceyNames);

Output:

[
  'House Espresso',
  'Single Origin',
  'Decaf',
  'Speckled blue mug',
  'Dotted notebook'
]
3
[ 'House Espresso', 'Single Origin', 'Speckled blue mug' ]

How it works

• map calls your function on every item and collects the results into a new array of the same length. (p) => p.name reads as "each product, turned into its name".
• filter calls your function on every item and keeps the ones where it returns a truthy value. A function that answers true or false, like (p) => p.priceCents >= 1600, is called a predicate. The result can be shorter, or even empty.
• Because each method returns a new array, you can call the next method straight on the result. Put each step on its own line so the chain reads top to bottom: first keep the pricey products, then take their names.

Filter before you map. The filter needs the full product objects (to read priceCents), and after map you only have names.

Common mistake

Using braces in an arrow function without a return. This gives you an array of undefined:

const bad = products.map((p) => { p.name; });
console.log(bad[0]); // undefined

Either drop the braces, as in (p) => p.name, or write return p.name; inside them. Also, if you want to return an object from a one-line arrow, wrap it in parentheses: (p) => ({ name: p.name }).

Takeaway

Use filter to choose which items stay and map to change what each one looks like. Chain them, filter first, to go from a list of objects to exactly the values you need.