map, filter & reduce

Transform lists declaratively

Arrays often hold many similar things: products in a cart, names in a roster, messages in an inbox, points on a chart. You already know how a loop can visit each index. This lesson gives you the array-method vocabulary professionals use when the goal is clearer than the index mechanics.

The short version is a decision chart: use map when every item becomes one new item, filter when some items stay, reduce when many items become one final value, and forEach only when you want a side effect. flat and flatMap help when arrays are tucked inside other arrays.

map is the array factory conveyor belt. Every item enters the same machine, your callback runs, and one transformed item comes out. The new array has the same number of slots as the original.

These examples prove several map facts at once: braces arrows need an explicit return, returning object literals needs parentheses, map(parseInt) is a classic trap, and the original array is not mutated.

1const numbers = [1, 2, 3];2const missingReturn = numbers.map(n => { n * 2; });3const objects = numbers.map(n => ({ value: n }));4const parsed = ["1", "2", "3"].map(parseInt);5 6console.log(missingReturn);7console.log(objects);8console.log(parsed);9console.log(numbers);

• Line 2 prints [undefined, undefined, undefined] because a braces arrow body must say return.
• Line 3 works because ({ value: n }) means “return this object.” Without parentheses, JavaScript reads braces as a function body.
• Line 4 prints [1, NaN, NaN]. map passes (value, index, array), and parseInt treats the index as its radix argument.

filter is a sieve or a bouncer. The callback returns a value for each item. If that value is truthy, the item gets through; if it is falsy, the item is left out. The callback does not need to return the literal boolean true, but comparisons like age >= 18 are nice and clear.

1const values = [0, "hi", "", 42, null, "ok"];2const compact = values.filter(Boolean);3const adults = [{ age: 17 }, { age: 22 }, { age: 31 }].filter(person => person.age >= 18);4 5console.log(compact);6console.log(adults.map(person => person.age));

filter(Boolean) is a compact idiom for dropping falsy values such as 0, "", null, undefined, and NaN. Use it when “remove empty values” is really what you mean; do not use it when 0 is a valid value you need to keep.

reduce is the most powerful and the easiest to overuse. Its callback receives an accumulator and the current item. Whatever the callback returns becomes the accumulator for the next item. At the end, reduce returns the accumulator.

1const prices = [5, 12, 3];Run2const total = prices.reduce((acc, price) => {3  return acc + price;4}, 0);5console.log(total);

Prefer an explicit initial value. Omitting it makes the first array item the starting accumulator, so callbacks begin at the second item. On an empty array, [].reduce(callback) throws TypeError: Reduce of empty array with no initial value.

reduceRight uses the same accumulator idea but visits indexes from right to left. That matters when order matters: composing functions right-to-left, rebuilding text from the end, or explaining a right-associative operation.

Array methods return values, so you can put the next method directly after the previous one. A chain is an assembly line of small machines: filter the cart, map tax onto each item, filter by price, then reduce to one total.

1const cart = [2  { name: "Notebook", price: 4, inStock: true },3  { name: "Marker", price: 2, inStock: false },4  { name: "Mug", price: 8, inStock: true },5  { name: "Stickers", price: 3, inStock: true },6];7 8const total = cart9  .filter(item => item.inStock)10  .map(item => ({ ...item, priceWithTax: item.price * 1.1 }))11  .filter(item => item.priceWithTax > 5)12  .reduce((sum, item) => sum + item.priceWithTax, 0);

flat & flatMap: unpack boxes inside boxes

Sometimes the result of a transformation is nested: arrays inside an array. flat returns a new array with nested arrays unpacked by a chosen depth. With no argument it unwraps one level. flatMap maps each item and then flattens one level.

1const nested = [1, [2, [3]]];2const oneLevel = nested.flat();3const allLevels = nested.flat(Infinity);4const letters = ["map", "fun"].flatMap(word => word.split(""));5 6console.log(oneLevel);7console.log(allLevels);8console.log(letters);

[1, [2, [3]]].flat() produces [1, 2, [3]], because the inner [3] is still one level too deep. Use flat(Infinity) when you intentionally want all levels. flatMap(word => word.split("")) is a compact way to turn words into one stream of letters.

The biggest beginner confusion is using forEach when map is needed. forEach calls your callback for each item and returns undefined. It is for side effects: logging, updating the page, pushing into an existing array, or calling a function that changes something outside the callback.

1const numbers = [1, 2, 3];2const mapped = numbers.map(n => n * 2);3const visited = [];4const eachResult = numbers.forEach(n => visited.push(n * 2));5 6console.log(mapped);7console.log(visited);8console.log(eachResult);

One more difference: forEach has no normal break. If you need to stop early, use for...of or a search method like some or every.

Where you’ll use this

Array methods show up anywhere data becomes UI. Object.keys/values/entries often pair with map: turn an object into entries, transform the entries, then render or rebuild. Here are reducer patterns beyond sums: counts and groups.

1const words = ["tea", "coffee", "tea", "juice"];2const counts = words.reduce((result, word) => {3  result[word] = (result[word] ?? 0) + 1;4  return result;5}, {});6 7const grouped = words.reduce((result, word) => {8  const first = word[0];9  (result[first] ??= []).push(word);10  return result;11}, {});12 13console.log(counts);14console.log(grouped);

Grouping is common enough that newer JavaScript has Object.groupBy in supporting environments. Feature-check it with typeof Object.groupBy === "function" before relying on it in shared code. reduce remains useful when you need a custom shape or broader compatibility.

Common misconceptions

Read each callback carefully. Your first-try score matters, but every answer explanation is part of the lesson.

Key takeaways

• map transforms each item and returns a same-length array.
• filter keeps items whose callback result is truthy.
• reduce uses an accumulator to fold many items into one final value; give it an initial value.
• flat unpacks nested arrays; flatMap maps and flattens one level.
• forEach returns undefined and belongs to side effects, not transformations.

Up next: Sorting & copying safely.