How Do map, filter and reduce Work in JavaScript?
Learn how JavaScript's map, filter and reduce array methods work, how they differ, when to use each, plus chaining examples and common interview questions.
Expected Interview Answer
map, filter, and reduce are higher-order array methods: map transforms every element into a new array of the same length, filter returns a new array with only the elements that pass a test, and reduce boils the whole array down to a single accumulated value.
All three take a callback and return a new value without mutating the original array, which makes them ideal for declarative, immutable data processing. map always yields an array the same length as the source; filter yields an array the same length or shorter; reduce yields whatever you accumulate — a number, string, object, or even another array. Because each returns a value, they can be chained together into readable pipelines.
- Declarative, readable data transformations
- Do not mutate the original array
- Chainable into clear pipelines
- Replace verbose manual for-loops
- Encourage a functional, immutable style
AI Mentor Explanation
map is like converting every player's raw score into a strike rate — one output per player. filter is like picking only the batters who scored fifties, dropping the rest. reduce is like adding all individual scores into one team total. Each ball's data flows in, and you either transform it, keep some of it, or combine it into a single number.
Step-by-Step Explanation
Step 1
Start with map
Call array.map(callback); the callback runs per element and its return value fills the same index in a new equal-length array.
Step 2
Use filter
Call array.filter(predicate); elements for which the predicate returns true are kept, producing a new array of equal or shorter length.
Step 3
Apply reduce
Call array.reduce((acc, item) => ..., initialValue); the accumulator carries across iterations to build one final result.
Step 4
Note immutability
None of the three mutate the source array — they each return a brand-new value, leaving the original intact.
Step 5
Chain them
Combine into a pipeline like arr.filter(...).map(...).reduce(...) to express multi-step transformations declaratively.
What Interviewer Expects
- Correct one-line purpose of each method
- That map returns an equal-length array
- That filter returns equal-or-shorter length based on a predicate
- That reduce collapses to a single accumulated value
- Awareness that none mutate the original array
Common Mistakes
- Using map when no transformed array is needed (use forEach instead)
- Forgetting to return a value from the map or reduce callback
- Omitting the initial value in reduce and hitting edge cases on empty arrays
- Expecting filter to transform elements rather than just select them
- Assuming these methods mutate the original array
Best Answer (HR Friendly)
“These are three tools for working with lists: map changes every item, filter keeps only the items you want, and reduce combines all items into a single result like a total. They keep the original list untouched and make data-processing code much easier to read.”
Code Example
const nums = [1, 2, 3, 4, 5];
// map: transform every element
const doubled = nums.map((n) => n * 2);
console.log(doubled); // [2, 4, 6, 8, 10]
// filter: keep elements that pass a test
const evens = nums.filter((n) => n % 2 === 0);
console.log(evens); // [2, 4]
// reduce: collapse to a single value
const total = nums.reduce((acc, n) => acc + n, 0);
console.log(total); // 15const orders = [
{ item: 'Book', price: 12 },
{ item: 'Pen', price: 2 },
{ item: 'Laptop', price: 900 },
];
const bigSpendTotal = orders
.filter((o) => o.price > 5) // keep pricier items
.map((o) => o.price * 1.1) // add 10% tax
.reduce((sum, p) => sum + p, 0); // total them
console.log(bigSpendTotal.toFixed(2)); // 1003.20Follow-up Questions
- Why should you pass an initial value to reduce?
- When would you use forEach instead of map?
- How do map and filter help with immutability in React?
- Can you implement map using reduce?
- What is the performance trade-off of chaining these versus a single loop?
MCQ Practice
1. What does array.map return?
map applies the callback to every element and returns a new array with the same number of elements.
2. Which method reduces an array to a single value?
reduce accumulates elements into one final value using an accumulator and a callback.
3. What does filter return when no elements pass the test?
filter always returns a new array; if nothing passes the predicate, that array is empty.
Flash Cards
What does map do? — Transforms every element and returns a new array of the same length.
What does filter do? — Returns a new array containing only the elements that pass the predicate test.
What does reduce do? — Collapses the array into a single accumulated value using an accumulator and callback.
Do map, filter and reduce mutate the array? — No — all three return new values and leave the original array unchanged.