JavaScript array methods cheat sheet: map, filter, reduce and friends

Most data handling in JavaScript is a chain of a few array methods. Each takes a callback that receives (item, index, array). The examples below use this sample data:

const orders = [
  { id: 1, customer: "ana", total: 40, paid: true },
  { id: 2, customer: "ben", total: 15, paid: false },
  { id: 3, customer: "ana", total: 25, paid: true },
];

Transform and select

• map(fn) returns a new array of the same length with each item transformed. orders.map(o => o.total) gives [40, 15, 25].
• filter(fn) returns a new array with only the items where the callback returned a truthy value.
• flatMap(fn) maps and then flattens one level. Useful when each item produces zero or more results.
• flat(depth = 1) flattens nested arrays.

const paidIds = orders.filter((o) => o.paid).map((o) => o.id); // [1, 3]

Reduce to a single value

reduce(fn, initial) walks the array carrying an accumulator. Always pass the initial value; without it, an empty array throws a TypeError.

const revenue = orders.reduce((sum, o) => sum + o.total, 0); // 80

const byCustomer = orders.reduce((acc, o) => {
  acc[o.customer] = (acc[o.customer] ?? 0) + o.total;
  return acc;
}, {}); // { ana: 65, ben: 15 }

For grouping, Object.groupBy(array, fn) (Node 21+, current browsers) is often clearer than a hand-written reduce. It returns an object with a null prototype whose values are arrays.

Search and test

• find(fn) / findLast(fn): the first or last matching item, or undefined.
• findIndex(fn) / findLastIndex(fn): its position, or -1.
• some(fn): true if at least one item matches. every(fn): true if all do (and for an empty array).
• includes(value): strict-equality membership test that also finds NaN.
• at(i): item by index, with negative numbers counting from the end. arr.at(-1) is the last item.

Mutating versus copying

Some older methods change the array in place. Each has a newer copying twin (available in Node 20+ and current browsers):

• sort() mutates; toSorted() returns a sorted copy.
• reverse() mutates; toReversed() returns a copy.
• splice() mutates; toSpliced() returns a copy.
• arr[i] = x mutates; arr.with(i, x) returns a copy.
• push, pop, shift, unshift and fill always mutate.

The sort trap

Without a comparator, sort converts items to strings and compares them as text, so numbers come out in the wrong order:

[10, 1, 5].sort();                 // [1, 10, 5]
[10, 1, 5].toSorted((a, b) => a - b); // [1, 5, 10]
words.toSorted((a, b) => a.localeCompare(b)); // human-friendly text order

Tips

• forEach returns nothing and cannot be stopped early. Use for...of when you need break or await inside the loop.
• Passing an async function to map gives you an array of promises; wrap it in await Promise.all(...).
• Avoid arr.map(parseInt): map passes the index as the second argument, which parseInt treats as the radix. Write arr.map(Number) or arr.map((s) => parseInt(s, 10)).