Skip to content
UniCircle
MediumConceptualArrays

map, filter and reduce

Question JS-ARR-003

Explain map, filter and reduce with a small example each. When would you choose a plain for loop instead?

Show the explanation

Model answer. All three take a callback and return a new value without changing the original array.

  • `map(fn)` transforms each item and returns an array of the same length.
  • `filter(fn)` keeps the items where fn returns truthy.
  • `reduce(fn, initial)` folds the array into one value (a number, object, another array...).
JavaScript
const orders = [{ amt: 250, paid: true }, { amt: 90, paid: false }, { amt: 400, paid: true }];
const amounts = orders.map(o => o.amt);                 // [250, 90, 400]
const paid = orders.filter(o => o.paid);                // 2 orders
const revenue = paid.reduce((sum, o) => sum + o.amt, 0); // 650

Always pass an initial value to reduce; without one, an empty array throws a TypeError.

Choose a plain loop (for...of) when you need to stop early (break), when you are doing side effects rather than building a value, or when chaining several passes over a very large array is measurably slow.

Original UniCircle question. Last reviewed 22 Oct 2026.