When should I use `map`, `filter`, or `reduce` on an array?

Start by describing the shape of the result you want:

1. A transformed value for each input: use map.
2. Some of the original items, chosen by a test: use filter.
3. One value built up from the items: use reduce.

For a shared example, assume the input is const numbers = [3, 7, 10];. Mapping each number to double it gives three results. Filtering for numbers above 5 keeps only the matching original numbers. Reducing by addition accumulates a total. These methods have different jobs: map constructs an array from callback return values, filter creates an array of items whose callback result is truthy, and reduce accumulates a result. [S1] [S2] [S3]

With the same numbers array, here are the two operations:

const numbers = [3, 7, 10];

const doubled = numbers.map(number => number * 2);
// [6, 14, 20]

const aboveFive = numbers.filter(number => number > 5);
// [7, 10]

Read the map callback as “turn each number into twice that number.” Each input has a corresponding returned value, so all three numbers contribute to the result. [S1]

Read the filter callback as “does this number pass the test?” Only numbers for which number > 5 is true are included. The result contains the original matching numbers, not their doubled versions. [S2]

A useful check: if you want to change values, reach for map; if you want to decide which items stay, reach for filter.

reduce fits when you want to build up a result as the array is processed. For this example, the accumulated result is a number: the sum.

const numbers = [3, 7, 10];

const total = numbers.reduce(
  (sum, number) => sum + number,
  0
);
// 20

Here, sum is the running total, number is the current item, and 0 is the starting value. The callback adds each item to the running total; the final result is 20, not an array. MDN’s example likewise uses reduce to accumulate cart costs into a total with an initial accumulator value. [S3]

If your intended answer is still a list of transformed values, map is a clearer fit. If it is a list containing only items that pass a test, use filter. Choose reduce when accumulation is the actual task.

Name the result before choosing the method: “I need a transformed list,” “I need a subset,” or “I need one accumulated answer.” Then match it to map, filter, or reduce. For the sample array, here are all three results:

const numbers = [3, 7, 10];

const doubled = numbers.map(number => number * 2);
const aboveFive = numbers.filter(number => number > 5);
const total = numbers.reduce((sum, number) => sum + number, 0);

// doubled:    [6, 14, 20]
// aboveFive:  [7, 10]
// total:      20

The results follow from this input and these callbacks. If the desired result is unclear, write down a sample of what it should look like first. A transformed list, a smaller selected list, or one value usually makes the choice apparent.