JavaScript Array Methods Cheat Sheet

You need to find the last matching element in an array. You write .filter().pop() — which works but creates an entire intermediate array just to get one element. Then you remember findLast() exists (ES2023), but you’re not sure about toSorted() vs sort() — does toSorted return a new array or mutate in place? With 40+ array methods and new ones added yearly, keeping track of which methods mutate and which return copies is a constant source of bugs.

Why This Cheat Sheet (Not the Array Methods Reference)

PureDevTools has two array method tools. This one is a visual cheat sheet — every method shows its signature, parameters, return value, and a mutating/non-mutating badge at a glance. The Array Methods Reference is an interactive searchable guide with longer descriptions. Use this cheat sheet for quick lookups; use the reference for detailed examples.

JavaScript Array Methods — Complete Reference

JavaScript arrays expose over 40 built-in methods split into three categories: mutating (modify the original), non-mutating (return a new value), and static (called on Array itself). This cheat sheet covers all of them — including the ES2023 additions (findLast, findLastIndex, toSorted, toReversed, toSpliced, with) and the ES2024 Array.fromAsync.

The Three Categories

Mutating Methods (9)

Mutating methods change the original array in place. The array the variable points to is the same object before and after the call.

When to use mutating methods: When you own the array and don’t need the original — building a queue, stack, or local buffer imperatively.

When to avoid: Inside React state updates, Redux reducers, or any immutable data pattern. setState(arr) after mutating arr may not trigger a re-render because the reference is the same object.

Non-Mutating Methods (27)

Non-mutating methods return a new value — a new array, a primitive, or an iterator — without touching the original array. They are safe in functional and reactive patterns.

The ES2023 additions give every previously mutating operation a non-mutating counterpart:

Static Methods (4)

Static methods are called on the Array constructor, not on an array instance:

// Static — called on Array
Array.from('hello');     // → ['h', 'e', 'l', 'l', 'o']
Array.isArray([1, 2]);   // → true
Array.of(7);             // → [7]

// Async version (ES2024)
await Array.fromAsync(asyncIterable);

Cheat Sheet: Method Quick Reference

Search and Iteration

// Does any element match?        → boolean
arr.some(n => n > 0)

// Do all elements match?         → boolean
arr.every(n => n > 0)

// Find first match               → T | undefined
arr.find(n => n > 10)

// Find first match index         → number
arr.findIndex(n => n > 10)

// Find last match (ES2023)       → T | undefined
arr.findLast(n => n > 10)

// Find last match index (ES2023) → number
arr.findLastIndex(n => n > 10)

// Does value exist?              → boolean
arr.includes(42)

// First index of value           → number
arr.indexOf(42)

// Last index of value            → number
arr.lastIndexOf(42)

Transform and Aggregate

// Map each element to a new value
const doubled = arr.map(n => n * 2)

// Keep elements that match
const evens = arr.filter(n => n % 2 === 0)

// Aggregate to a single value
const sum = arr.reduce((acc, n) => acc + n, 0)

// Map and flatten one level
const words = sentences.flatMap(s => s.split(' '))

// Flatten nested arrays
const flat = nested.flat(2)

Sorting and Ordering (Mutating vs Non-Mutating)

// Mutating — modifies original
arr.sort((a, b) => a - b)
arr.reverse()

// Non-mutating ES2023 — safe for state
const sorted = arr.toSorted((a, b) => a - b)
const reversed = arr.toReversed()

Slice, Splice, and Replace

// Extract portion (non-mutating)
arr.slice(1, 3)

// Modify in place (mutating)
arr.splice(1, 2, 'x', 'y')

// Immutable splice alternative (ES2023)
const newArr = arr.toSpliced(1, 2, 'x', 'y')

// Replace single element by index (ES2023)
const updated = arr.with(2, 99)

// Get element with negative index support
arr.at(-1)   // last element

Iterators

for (const [i, v] of arr.entries())  { /* index + value */ }
for (const i of arr.keys())          { /* index only */ }
for (const v of arr.values())        { /* value only */ }

// Generate a range
[...Array(5).keys()]  // → [0, 1, 2, 3, 4]

Convert and Join

arr.join(' - ')           // string with separator
arr.toString()            // 'a,b,c' (same as join(','))
arr.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })

Common Mistakes and Pitfalls

1. Mutating sort() returns the same object

// BAD — sort mutates and returns the same array
const original = [3, 1, 2];
const sorted = original.sort();
sorted === original; // true! same reference

// GOOD — copy first, or use toSorted (ES2023)
const sorted2 = [...original].sort();
const sorted3 = original.toSorted(); // ES2023

2. Array(n) vs Array.of(n)

Array(3);       // [empty × 3] — sparse array with 3 slots
Array.of(3);    // [3] — single element array

// fill() initializes sparse arrays
new Array(5).fill(0); // → [0, 0, 0, 0, 0]

3. indexOf does not find NaN

[1, NaN, 3].indexOf(NaN);   // -1 — doesn't work
[1, NaN, 3].includes(NaN);  // true — use this instead

4. Default sort() is lexicographic, not numeric

[10, 1, 21].sort();           // → [1, 10, 21] — wrong for numbers!
[10, 1, 21].sort((a, b) => a - b); // → [1, 10, 21] — correct

5. find vs filter — know which you need

// find: first match or undefined
users.find(u => u.id === 2)

// filter: ALL matches as array (empty if none)
users.filter(u => u.active)

// For existence checks only, use some (short-circuits)
users.some(u => u.admin)

6. Mutating state arrays in React

// BAD — mutates state reference, React won't re-render
const newItems = [...items];
newItems.push(item);    // ← mutation of copy, this is fine
setItems(newItems);

// Also BAD — mutates original items
items.push(item);
setItems(items);        // same reference!

// GOOD — ES2023 non-mutating methods
setItems(items.toSorted(...));
setItems(items.with(index, newItem));
setItems([...items, newItem]);

ES2023 Methods — When to Use

The four ES2023 additions (toSorted, toReversed, toSpliced, with) are available in:

• Chrome 110+, Firefox 115+, Safari 16+, Node.js 20+

Use them when:

• Working with React/Vue state that must not be mutated
• Using functional programming patterns
• Writing Redux reducers
• Working with TypeScript readonly arrays

function updateItem<T>(arr: readonly T[], index: number, value: T): T[] {
  return arr.with(index, value); // safe, no cast needed
}

Array.fromAsync — ES2024

Array.fromAsync converts async iterables to arrays:

// From an async generator
async function* paginate(url) {
  let page = 1;
  while (true) {
    const data = await fetch(`${url}?page=${page++}`).then(r => r.json());
    if (!data.items.length) break;
    yield* data.items;
  }
}

const allItems = await Array.fromAsync(paginate('/api/products'));

// With transform
const ids = await Array.fromAsync(paginate('/api/products'), item => item.id);

Available in: Chrome 121+, Node.js 22+.

Performance Considerations

For large arrays, avoid chaining multiple transforms (filter().map().reduce()) if a single reduce can do the same work in one pass.

Frequently Asked Questions

What is the difference between sort() and toSorted()?

sort() modifies the original array in place and returns the same array reference. toSorted() (ES2023) returns a new sorted array and leaves the original unchanged. Use toSorted() in any context where you need immutability — React state, Redux reducers, functional patterns.

Why does Array(7) create empty slots but Array.of(7) creates [7]?

Array(n) is a special case: when called with a single numeric argument, it creates a sparse array with length set to n but no actual elements. Array.of(n) treats all arguments as elements uniformly, so Array.of(7) creates [7]. This inconsistency is why Array.of was introduced in ES2015.

When should I use reduce vs map + filter?

Use map + filter when the transformations are independent and readability matters — they compose cleanly. Use reduce when you need a single-pass aggregation (sum, group-by, flatten) or when you need to produce a non-array result. For very large arrays, reduce can be faster because it avoids creating intermediate arrays.

What is the difference between find and includes?

includes(value) checks for a specific value using SameValueZero (like ===, but NaN equals NaN). find(callbackFn) uses an arbitrary predicate and returns the matching element. Use includes for primitive lookups, find when you need to match on a condition or property.

What does flatMap do that map + flat doesn’t?

They produce the same result, but flatMap does it in a single pass without creating an intermediate array. This is more memory-efficient and slightly faster for large arrays. flatMap is also more readable for common patterns like “split each string into words” or “expand each item to multiple items while optionally filtering”.

Are toSorted, toReversed, toSpliced, and with safe to use today?

Yes — as of 2024 they are baseline in Chrome 110+, Firefox 115+, Safari 16+, and Node.js 20+. For older targets, polyfill with core-js or use the equivalent [...arr].sort(), [...arr].reverse(), and spread + splice patterns.