JavaScript arrays come with a rich set of built-in methods that cover nearly every data-manipulation need. Instead of reaching for a utility library, master these native methods and your code stays lean and readable. This cheat sheet covers every essential array method with a one-sentence description and a practical example.
Transformation Methods
map
Returns a new array where each element is the result of calling the callback.
const prices = [10, 20, 30];
const withTax = prices.map(p => p * 1.08);
// [10.8, 21.6, 32.4]
filter
Returns a new array containing only elements where the callback returns true.
const scores = [45, 72, 88, 33, 95];
const passing = scores.filter(s => s >= 60);
// [72, 88, 95]
reduce
Reduces the array to a single value by accumulating results through the callback.
const cart = [{ price: 12 }, { price: 8 }, { price: 25 }];
const total = cart.reduce((sum, item) => sum + item.price, 0);
// 45
Always supply the initial value (second argument to reduce) to avoid surprising behavior on empty arrays.
flat
Flattens nested arrays by the specified depth (default: 1).
const nested = [1, [2, 3], [4, [5, 6]]];
nested.flat(); // [1, 2, 3, 4, [5, 6]]
nested.flat(2); // [1, 2, 3, 4, 5, 6]
nested.flat(Infinity); // fully flatten any depth
flatMap
Maps each element and then flattens the result one level — more efficient than map followed by flat(1).
const sentences = ["hello world", "foo bar"];
const words = sentences.flatMap(s => s.split(" "));
// ["hello", "world", "foo", "bar"]
Search and Testing Methods
find
Returns the first element where the callback returns true, or undefined if none match.
const users = [{ id: 1, name: "Alice" }, { id: 2, name: "Bob" }];
const user = users.find(u => u.id === 2);
// { id: 2, name: "Bob" }
findIndex
Returns the index of the first matching element, or -1 if none match.
const items = ["apple", "banana", "cherry"];
const idx = items.findIndex(item => item.startsWith("b"));
// 1
some
Returns true if at least one element satisfies the callback (short-circuits on first match).
const numbers = [1, 3, 5, 4, 7];
const hasEven = numbers.some(n => n % 2 === 0);
// true
every
Returns true if all elements satisfy the callback (short-circuits on first failure).
const ages = [21, 25, 30];
const allAdults = ages.every(age => age >= 18);
// true
includes
Returns true if the array contains the specified value (uses strict equality, ===).
const roles = ["admin", "editor", "viewer"];
roles.includes("editor"); // true
roles.includes("owner"); // false
indexOf
Returns the index of the first occurrence of a value, or -1 if not found.
const fruits = ["apple", "banana", "apple"];
fruits.indexOf("apple"); // 0
fruits.lastIndexOf("apple"); // 2 — searches from the end
Iteration Methods
forEach
Executes a callback for each element. Returns undefined — not chainable like map.
const logs = ["start", "process", "end"];
logs.forEach((entry, index) => {
console.log(`${index}: ${entry}`);
});
// 0: start
// 1: process
// 2: end
Use map when you need the result; use forEach when you only need the side effect.
Slicing and Splicing
slice
Returns a shallow copy of a portion of the array from start to end (exclusive) — does not mutate the original.
const arr = [0, 1, 2, 3, 4];
arr.slice(1, 3); // [1, 2]
arr.slice(-2); // [3, 4] — last two elements
arr.slice(); // full shallow copy
splice
Adds, removes, or replaces elements in place — mutates the original array.
const arr = ["a", "b", "c", "d"];
arr.splice(1, 2); // removes 2 items at index 1 → arr is ["a", "d"]
arr.splice(1, 0, "x", "y"); // insert at index 1 without removing
arr.splice(2, 1, "z"); // replace 1 item at index 2 with "z"
Ordering Methods
sort
Sorts the array in place and returns the array. Default sort is lexicographic (string-based) — always provide a compare function for numbers.
const nums = [10, 2, 30, 4];
nums.sort(); // [10, 2, 30, 4] — WRONG for numbers!
nums.sort((a, b) => a - b); // [2, 4, 10, 30] — ascending
nums.sort((a, b) => b - a); // [30, 10, 4, 2] — descending
const words = ["banana", "apple", "cherry"];
words.sort(); // ["apple", "banana", "cherry"] — fine for strings
reverse
Reverses the array in place.
const arr = [1, 2, 3];
arr.reverse(); // [3, 2, 1] — arr is now mutated
// To avoid mutation:
const reversed = [...arr].reverse();
Combining Methods
concat
Returns a new array that is the result of merging two or more arrays — does not mutate.
const a = [1, 2];
const b = [3, 4];
const c = a.concat(b, [5, 6]); // [1, 2, 3, 4, 5, 6]
// Equivalent spread syntax:
const c2 = [...a, ...b, 5, 6];
join
Converts the array to a string, with elements separated by the given delimiter.
const parts = ["2026", "03", "20"];
parts.join("-"); // "2026-03-20"
parts.join(", "); // "2026, 03, 20"
parts.join(""); // "20260320"
Chaining in Practice
The real power of array methods is chaining them together:
const orders = [
{ product: "Widget", qty: 3, price: 9.99, shipped: true },
{ product: "Gadget", qty: 1, price: 49.99, shipped: false },
{ product: "Doohickey", qty: 5, price: 4.99, shipped: true },
];
// Total revenue from shipped orders only
const shippedRevenue = orders
.filter(o => o.shipped)
.reduce((sum, o) => sum + o.qty * o.price, 0);
// (3 * 9.99) + (5 * 4.99) = 54.92
// Product names in uppercase, sorted alphabetically
const names = orders
.map(o => o.product.toUpperCase())
.sort();
// ["DOOHICKEY", "GADGET", "WIDGET"]
Mutation Quick Reference
Knowing which methods mutate the original array prevents nasty bugs:
| Mutates original | Does NOT mutate |
|---|---|
sort, reverse
|
map, filter, reduce
|
splice |
slice, concat, flat, flatMap
|
push, pop, shift, unshift
|
find, findIndex, some, every
|
When working with React state or other immutable patterns, always prefer the non-mutating methods or spread a copy first: [...arr].sort(...).
These methods cover the overwhelming majority of array work in real codebases. Bookmark this page and refer back until the patterns are automatic.
Level Up Your Dev Workflow
Found this useful? Explore DevPlaybook — cheat sheets, tool comparisons, and hands-on guides for modern developers.
🛒 Get the DevToolkit Starter Kit on Gumroad — 40+ browser-based dev tools, source code + deployment guide included.
Top comments (0)