JavaScript map, filter & reduce — explained with live examples

If you only learn three array methods, learn these. map transforms, filter selects, reduce combines. Run everything below in the JavaScript compiler — open DevTools console alongside to see output.

1. Map — same length, new values

const prices = [12, 7, 25];
const withTax = prices.map(p => p * 1.1);
console.log(withTax); // [13.2, 7.7, 27.5]

Rule: map always returns a new array. If you don't return, you get [undefined, undefined] — the classic beginner bug.

2. Filter — keep what matches

const users = [
  { name: 'Asha', active: true },
  { name: 'Rahim', active: false },
  { name: 'Mina', active: true },
];
const active = users.filter(u => u.active);
console.log(active.map(u => u.name)); // ['Asha', 'Mina']

3. Reduce — many to one (always pass 0)

const orders = [
  { total: 42, paid: true },
  { total: 17, paid: false },
  { total: 99, paid: true },
];
const revenue = orders
  .filter(o => o.paid)
  .map(o => o.total)
  .reduce((sum, n) => sum + n, 0);
console.log(revenue); // 141

That chain — filter, map, reduce — is the interview answer. Forgetting , 0 gives NaN on empty arrays.

4. Find vs filter, some vs every

const nums = [3, 7, 10, 15];
console.log(nums.find(n => n > 5)); // 7 (first match)
console.log(nums.some(n => n > 12)); // true
console.log(nums.every(n => n > 2)); // true

5. Real drill: group by key

const events = [
  { type: 'click', x: 10 }, { type: 'scroll', x: 0 }, { type: 'click', x: 22 },
];
const byType = events.reduce((acc, e) => {
  (acc[e.type] ||= []).push(e);
  return acc;
}, {});
console.log(byType.click.length); // 2

Mistakes I see every week

• Pushing inside forEach — you wanted map.
• Mutating inside map — return new objects with {...u, active: true}.
• Chaining without checking length — log after each step when debugging.

6. Sort without surprises (copy first)

const names = ['Mina', 'asha', 'Rahim'];
// WRONG — sorts in place, case-sensitive
// names.sort();
// RIGHT — copy + locale-aware
const sorted = [...names].sort((a, b) => a.localeCompare(b));
console.log(sorted); // ['asha', 'Mina', 'Rahim']

sort() mutates the original — spread-copy first. For numbers, always pass a comparator: [10, 9, 80].sort((a,b) => a-b), otherwise 80 sorts before 9 (string order).

7. One-week practice plan

Day 1–2: rewrite three for loops as map/filter. Day 3–4: chain filter-map-reduce on the orders example until the 141 feels obvious. Day 5: do the group-by drill from memory. Day 6–7: take a real API response, beautify it in the JSON formatter, then summarize it with one chain. If you can explain each step out loud, you're interview-ready.

Practice: same logic in Python, then run these live until you can write filter-map-reduce from memory.