Menu
CodeSprout
Typo-tolerant search across every article, problem and post. to open

The five array methods you will actually reach for

map, filter, reduce, find and some/every cover almost every array transform you will ever write. Here is when to pick each and the one-line patterns worth memorising.

kvi5hnu2 min read
0comments
On this page

Arrays have more than thirty methods. Five of them do about ninety percent of the real work. Learn these cold and the rest fall into place.

map — one in, one out

map returns a new array with each element transformed. It never changes the input and the output length always matches.

js
const prices = [100, 200, 300];
const withTax = prices.map(p => p * 1.18);
// [118, 236, 354]

Pick map when: you want the same shape with each element changed.

filter — fewer out than in

filter keeps the elements where the callback returns a truthy value. Non-matches are dropped.

js
const users = [{ name: 'A', active: true }, { name: 'B', active: false }];
const active = users.filter(u => u.active);
// [{ name: 'A', active: true }]

Pick filter when: you want a subset and the order should be preserved.

reduce — many in, one out

reduce folds the array down to a single value by threading an accumulator through every element. Always pass the initial value explicitly — relying on the first element as the seed is a common source of bugs with empty arrays.

js
const total = [10, 20, 30].reduce((acc, n) => acc + n, 0);
// 60

const byRole = users.reduce((acc, u) => {
    (acc[u.role] ??= []).push(u);
    return acc;
}, {});
// group by role

Pick reduce when: no other method shapes the output and you need an aggregate — a sum, a lookup object, a single derived value.

If you catch yourself writing .map().reduce() with the same accumulator pattern often, that is just reduce.

find — the first match, or nothing

find returns the first element the callback accepts, or undefined. findIndex gives you the position instead.

js
const admin = users.find(u => u.role === 'admin');
if (!admin) throw new Error('no admin set');

Pick find when: you only care about one match. filter()[0] works but walks the whole array; find stops at the first hit.

some / every — a yes/no answer

Both return a boolean. some is true if any element matches; every is true only if all do (and vacuously true on an empty array — worth remembering).

js
const anyAdmin = users.some(u => u.role === 'admin');
const allActive = users.every(u => u.active);

Pick these when: you want a boolean, not a shorter list. Both short-circuit on the first decisive element, so they are the fastest option.

A note on performance

Each of these walks the array once. Chaining them (arr.filter(...).map(...)) walks it twice — fine for most code, but for huge arrays prefer a single reduce or a plain for loop. Reach for the clean form first; measure before you squint at it.

What to skip

  • forEach — if you are not using the return value, a for...of loop reads better and lets you break.
  • indexOf on arrays of objects — use findIndex.
  • .sort() without a comparator — the default is lexicographic ("10" < "2"). Always pass (a, b) => a - b for numbers.

Learn these five, and most array code becomes two or three expressive lines.

Written by

kvi5hnu

More in JavaScript

Discussion

Sign in to ask a question or share what you learned.