JavaScript Array Methods Cheat Sheet With Runnable Examples

JavaScript array methods are the built-in functions attached to every array for transforming, searching, sorting and reshaping its contents. The ones you'll reach for most days are map, filter, reduce, find, some, every, sort, slice, splice, flat and includes. Most take a callback that receives the current element, its index and the array itself, and they return either a new array or a single value.

The distinction that matters most is copying versus mutating. map, filter, slice, concat, flat, toSorted and toReversed return a new array and leave the original alone. push, pop, shift, unshift, splice, sort, reverse and fill change the array in place. The quick-reference table comes first, then runnable examples for each group, then the mistakes that bite people.

JavaScript array methods cheat sheet#

Use this table to pick a method. "Mutates" means the original array changes. Everything marked "No" hands you a new value and leaves the input alone.

Every method that returns a new array makes a shallow copy. Objects inside the array are shared by reference between the old and new arrays, so editing copy[0].name also changes original[0].name. The Array reference on MDN spells this out and also documents how each method treats empty slots in sparse arrays.

map, filter and reduce examples#

These three cover most data-shaping work. map produces exactly one output element per input element. filter keeps the elements whose callback returns a truthy value. reduce walks the array and folds it into a single result, which can be a number, a string, an object or another array.

The callback for map, filter and the other iterative methods is called as callbackFn(element, index, array). reduce is the odd one out. Its callback is (accumulator, currentValue, index, array), and the second argument to reduce itself is the starting accumulator.

const orders = [
  { id: 1, customer: "ana", status: "paid", items: [{ price: 12.5, qty: 2 }, { price: 3, qty: 1 }] },
  { id: 2, customer: "ben", status: "refunded", items: [{ price: 40, qty: 1 }] },
  { id: 3, customer: "ana", status: "paid", items: [{ price: 7.25, qty: 4 }] },
];

// map: one output per input, same length as the input
const totals = orders.map((o) => ({
  id: o.id,
  total: o.items.reduce((sum, item) => sum + item.price * item.qty, 0),
}));
console.log("totals:", totals);

// filter: keep the elements whose callback returns true
const paidIds = orders.filter((o) => o.status === "paid").map((o) => o.id);
console.log("paid ids:", paidIds);

// chain: keep paid orders, pull out their line items, sum them
const revenue = orders
  .filter((o) => o.status === "paid")
  .flatMap((o) => o.items)
  .reduce((sum, item) => sum + item.price * item.qty, 0);
console.log("paid revenue:", revenue);

// reduce into an object: group order ids by customer
const byCustomer = orders.reduce((acc, o) => {
  (acc[o.customer] ??= []).push(o.id);
  return acc;
}, {});
console.log("by customer:", byCustomer);

A few things to notice. The chain of filter, then flatMap, then reduce reads top to bottom like a sentence. The grouping example seeds reduce with an empty object and returns the accumulator from every iteration. Forgetting that return is the single most common reduce bug. These same patterns are what you'll apply to JSON you've just pulled from a server, so if that's your starting point, the Fetch API examples show how to get the data into an array first.

reduce doesn't accept a thisArg, unlike the other iterative methods. If you leave out the initial value, it takes the first element as the starting accumulator and begins at the second element. That works for summing numbers and is wrong for almost everything else, so pass the initial value every time.

find, some, every and the other search methods#

The search methods answer three different questions: which element, where is it, and is there one at all.

const users = [
  { name: "Mara", age: 34, admin: false },
  { name: "Theo", age: 17, admin: false },
  { name: "Ivy", age: 29, admin: true },
];

console.log("first admin:", users.find((u) => u.admin));
console.log("nobody over 90:", users.find((u) => u.age > 90));
console.log("index of Theo:", users.findIndex((u) => u.name === "Theo"));
console.log("last non-admin:", users.findLast((u) => !u.admin)?.name);

console.log("any minors?", users.some((u) => u.age < 18));
console.log("all adults?", users.every((u) => u.age >= 18));
console.log("every on []:", [].every((u) => u.age >= 18));
console.log("some on []:", [].some((u) => u.age >= 18));

const names = users.map((u) => u.name);
console.log(names.includes("Ivy"), names.indexOf("Ivy"), names.indexOf("Zed"));

// some() stops at the first hit; count how often the callback actually ran
let calls = 0;
users.some((u) => {
  calls++;
  return u.age < 18;
});
console.log("callback calls:", calls, "of", users.length);

find returns the element itself and findIndex returns its position. When nothing matches you get undefined or -1, not an error, so guard before you dereference. findLast and findLastIndex do the same thing scanning from the end. some and every return booleans. All six stop as soon as the answer is known, which is why the call counter at the end comes out lower than the array length. For plain values such as strings and numbers, includes and indexOf skip the callback entirely.

Two edge cases to memorize: every returns true on an empty array and some returns false, because no element can fail or pass a test that never runs.

sort and the non-mutating alternatives#

sort is the method most likely to surprise you. It sorts in place and returns the same array, and with no comparator it compares elements as strings, so 100 lands before 25.

const nums = [10, 9, 1, 25, 100];

console.log("default sort:", [...nums].sort());
console.log("numeric:", [...nums].sort((a, b) => a - b));
console.log("descending copy:", nums.toSorted((a, b) => b - a));
console.log("original untouched:", nums);

const people = [
  { name: "Zoë", joined: 2021 },
  { name: "adam", joined: 2019 },
  { name: "Bea", joined: 2019 },
];

// sort by year, then by name; localeCompare handles case and accents
const sorted = people.toSorted(
  (a, b) => a.joined - b.joined || a.name.localeCompare(b.name),
);
console.log(sorted.map((p) => `${p.joined} ${p.name}`));

// sort() mutates and returns the very same array object
const inPlace = [3, 1, 2];
const result = inPlace.sort((a, b) => a - b);
console.log("same object?", result === inPlace, inPlace);

Return a negative number from the comparator to put a first, a positive number to put b first, and 0 to leave them as they are. a - b ascends, b - a descends, and localeCompare sorts strings sensibly across case and accents. The || trick chains tie-breakers: when two years are equal the subtraction gives 0, which is falsy, so the name comparison decides.

The comparator may be called more than once for the same index, so keep it pure and cheap. If you need the original order later, sort a copy with toSorted, [...arr].sort(...) or arr.slice().sort(...). The sort documentation on MDN covers the comparator contract in detail.

The MDN Array page lists a non-mutating stand-in for every mutating method:

slice, splice, flat and the reshaping methods#

slice and splice are easy to mix up. slice(start, end) copies a range and never touches the original. splice(start, deleteCount, ...items) removes and inserts in place and returns whatever it removed.

const list = ["a", "b", "c", "d"];

list.slice(1, 3);        // copy of index 1 up to, not including, index 3
list.slice(-2);          // copy of the last two elements
list.splice(1, 2);       // removes "b" and "c" from list and returns them
list.splice(1, 0, "x");  // inserts "x" at index 1, removes nothing
list.toSpliced(0, 1);    // like splice(0, 1), but returns a copy and leaves list alone
list.with(0, "z");       // copy of list with index 0 replaced

[1, [2, [3, [4]]]].flat();                 // flattens one level
[1, [2, [3, [4]]]].flat(Infinity);         // flattens completely
["a b", "c"].flatMap((s) => s.split(" ")); // map, then flatten one level
[1, 2].concat([3], [4, 5]);                // new array joining all three
["x", "y"].join(", ");                     // the string "x, y"

flatMap is the one to remember when each input can produce zero, one or many outputs. Returning an empty array from the callback drops that element, which gives you filter and map in a single pass.

Common mistakes with array methods#

• Forgetting to return from the callback. map((x) => { x * 2 }) with braces returns undefined for every element. Drop the braces or add return.
• Using map for side effects. If you throw the result away, use forEach or a for...of loop. map allocates a new array for nothing.
• Trying to break out of forEach. It can't stop early. Reach for some, every or find when you need to stop, or write a plain loop.
• Calling reduce without an initial value. On an empty array it throws a TypeError. On a non-empty array the first element becomes the accumulator, which silently breaks object-building reducers.
• Expecting sort to sort numbers. Without a comparator it compares strings. It also mutates, so use toSorted when the original order still matters.
• Assuming copies are deep. slice, map, filter, spread and the rest copy one level. Nested objects are shared with the original.
• Mutating the array inside the callback. The length is read once when iteration starts, so pushing inside forEach doesn't extend the loop, and splicing shifts later elements so some get skipped or visited twice. Build a new array instead.
• Treating find like filter. find returns one element or undefined. filter always returns an array, possibly empty, so if (filtered) is always true.
• Passing thisArg to an arrow function. Arrow functions don't have their own this, so the argument is ignored. Use a regular function or just close over the variable.
• Relying on sparse-array behavior. Older iterative methods such as forEach, map, filter, some and every skip empty slots. find, findIndex, includes, keys and the toSorted family treat them as undefined. Avoid creating holes at all.

Practice questions that show up in interviews#

These come up constantly, and each one is a short exercise in choosing the right method.

1. Count word frequencies with one reduce. Seed with {} and write acc[word] = (acc[word] ?? 0) + 1.
2. Remove duplicates. [...new Set(arr)] is the one-liner. The array-methods version is arr.filter((x, i) => arr.indexOf(x) === i). Be ready to explain why the second is quadratic.
3. Flatten a nested array without flat. A recursive reduce that calls concat on arrays and pushes everything else.
4. Sort objects by two keys. A comparator that chains with ||, as in the sorting example above.
5. Reimplement map with reduce. Push the callback's result onto an accumulator array. It proves you understand both methods.
6. Filter a palette down to accessible pairs. Given color tokens, filter on a contrast function and sort by ratio. The math behind that function is in the color contrast checker walkthrough.

If you want more than exercises, the reduce reference on MDN has worked examples for grouping, flattening and running promises in sequence.

Quick reference checklist#

• Need a new array of the same length? map.
• Need a subset? filter. Need one item? find. Need a yes or no? some, every or includes.
• Need one value out of many? reduce, and always pass the initial value.
• Sorting? Pass a comparator. Prefer toSorted unless you want the original changed.
• Copying a range? slice. Editing in place? splice. Edited copy? toSpliced or with.
• Nested arrays? flat or flatMap.
• Callback signature is (element, index, array). For reduce it's (accumulator, current, index, array).
• All copies are shallow. Never mutate the array from inside a callback.

Quick answers