sr✳SHUBHAM RAJFRONTEND ENGINEER
FULL TECHNICAL GUIDEFoundation3 min read

When should you choose map, filter or reduce?

Use map to transform every item, filter to retain matching items, and reduce to combine items into a single result.

JavaScript#arrays#functional
THE ANSWER / PLAIN ENGLISH

The idea to remember.

Use map to transform every item, filter to retain matching items, and reduce to combine items into a single result. Clear intent matters more than forcing every operation into reduce.

From first example to real project.

Start with the smallest working idea, examine a more detailed example, then look at a real application pattern. Adapt dependencies, error handling and data models to your project.

Basic: transform a list

01 / BEGINNER

Map builds a new array without changing the original.

JAVASCRIPT / EXAMPLE
const prices = [5, 10, 15];
const discounted = prices.map(price => price * 0.9);

Intermediate: group with reduce

02 / INTERMEDIATE

Reduce can create a lookup keyed by a stable ID.

JAVASCRIPT / EXAMPLE
const usersById = users.reduce((map, user) => {
  map[user.id] = user;
  return map;
}, {});

Real scenario: efficient list filtering

03 / REAL SCENARIO

Derive results without mutating your source collection.

JAVASCRIPT / EXAMPLE
function visibleProducts(products, query, category) {
  const term = query.trim().toLowerCase();
  return products.filter(item =>
    (!category || item.category === category) &&
    item.name.toLowerCase().includes(term)
  );
}

Try it in your own words.

Explain when should you choose map, filter or reduce without looking at the code. Then modify the intermediate example, describe one trade-off and identify when the real-world pattern fits.

Keep learning here.

Explore more in-depth guides, exercises and related interview questions in this library.

Browse JavaScript study guides ↗
← Back to question library

Have something
in mind?

Start a conversation