JavaScript Array Methods: map, filter and reduce Explained

JavaScript’s three essential array methods do three distinct jobs: map transforms every element, filter keeps the elements that pass a test, and reduce combines the whole array into a single value. Master these and you’ll rarely write a manual for loop again — they’re cleaner, non-mutating, and exactly what modern JavaScript codebases use everywhere.

They’re Phase 2 of learning JavaScript and among the highest-leverage things you can learn early.

map — transform every element

map runs a function on each element and returns a new array of the same length with the results.

const nums = [1, 2, 3];
const doubled = nums.map((n) => n * 2);   // [2, 4, 6]

const users = [{ name: "Ana" }, { name: "Ben" }];
const names = users.map((u) => u.name);   // ["Ana", "Ben"]

Use it whenever you want a transformed copy — same number of items, each changed.

filter — keep what passes

filter runs a test on each element and returns a new array of only the elements that returned true.

const nums = [1, 2, 3, 4, 5];
const evens = nums.filter((n) => n % 2 === 0);   // [2, 4]

const active = users.filter((u) => u.active);    // only active users

The result is the same length or shorter. Use it to select a subset.

reduce — boil it down to one value

reduce is the most powerful and most general. It carries an accumulator across the array, combining everything into a single result — a number, an object, anything.

const nums = [1, 2, 3, 4];
const sum = nums.reduce((total, n) => total + n, 0);   // 10
//                       ^accumulator  ^current   ^start value

It can do far more than sums — counting, grouping, and flattening:

// Count occurrences into an object
const fruits = ["apple", "pear", "apple"];
const counts = fruits.reduce((acc, f) => {
  acc[f] = (acc[f] || 0) + 1;
  return acc;
}, {});   // { apple: 2, pear: 1 }

The trickiest part for beginners is remembering to return the accumulator each step and to pass the initial value (the second argument).

Chaining them

Because map and filter return arrays, you can chain them into a readable pipeline:

const result = users
  .filter((u) => u.active)        // keep active users
  .map((u) => u.name.toUpperCase()); // then transform to names

This reads as a description of what you want, not how to loop — the same declarative style as Java streams or Python comprehensions.

map vs forEach

forEach also loops, but returns nothing — use it for side effects (logging, updating the DOM). If you’re building a new array, use map. A telltale sign you want map: you’re calling push inside a forEach.

Common mistakes

• Forgetting to return inside map/reduce — you get undefineds or a broken accumulator.
• Forgetting reduce’s initial value — omitting the second argument can produce surprising results on empty or single-element arrays.
• Using forEach to build an array — use map.
• Expecting these to mutate — they return new arrays; the original is unchanged (usually what you want). See common JavaScript mistakes.

Where this fits

Array methods are Phase 2 of the JavaScript roadmap and pair with the ES6 features (arrow functions, destructuring) that make them concise.

They’re drawn out with worked examples in JavaScript in One Month and taken further — custom reducers, performance, transducers — in the job-ready JavaScript in Three Months.

Learn map, filter, and reduce cold, and most “loop over data” problems become one readable line.