JavaScript Array Methods Reference

All built-in Array methods — mutating vs. pure, signatures, and copy-ready examples

What is JavaScript Array Methods Reference?

JavaScript Array Methods Reference documents all built-in Array prototype methods with syntax, description, and working code examples. Covers mutation methods (push, pop, splice, sort, reverse, fill), accessor methods (slice, indexOf, find, filter, includes), iteration methods (forEach, map, reduce, some, every, flatMap), and ES2023+ additions (findLast, findLastIndex, toSorted, toReversed, toSpliced, with). Filter by category, search by name, and copy examples directly.

JavaScript arrays are zero-indexed, heterogeneous (can hold any mix of types), and dynamically sized. Key distinctions: mutation methods modify the original array (push, pop, splice, sort, reverse). Non-mutating methods return a new value without modifying the original (map, filter, slice, concat). ES2023 introduced non-mutating versions of mutation methods: toSorted(), toReversed(), toSpliced(), with() — use these in React state and other immutable contexts.

The reduce() method is the most powerful but most misunderstood array method — it can implement any other array method. The callback receives (accumulator, currentValue, index, array) and the return value becomes the next accumulator. Common reduce patterns: sum of values, groupBy (array to object), counting occurrences, and flat-mapping. flatMap() is equivalent to .flat(1) after .map() but more efficient.

How to Use

  1. Browse by category: Mutation, Accessor, Iteration, or ES2023+.
  2. Search by method name (e.g., 'reduce', 'findLast') to jump directly.
  3. Click any method to expand its full signature, parameters, and return value.
  4. Copy the code example and paste it into your editor or browser console.
  5. Use 'Compare methods' to see the difference between similar methods (map vs forEach, find vs filter).

Examples

Filter and map chain

Result: [1,2,3,4,5].filter(n => n%2===0).map(n => n*n) → [4, 16]

Group by property

Result: arr.reduce((g, {type}) => ({...g, [type]: [...(g[type]||[]), item]}), {})

Immutable sort (ES2023)

Result: const sorted = original.toSorted((a,b) => a-b) → original unchanged

Frequently Asked Questions

What is the difference between map() and forEach()?

map() creates and returns a new array with the transformed values — each callback return value becomes an element of the new array. Always use when you need the result. forEach() iterates and runs a callback but returns undefined — used for side effects only (DOM manipulation, logging, pushing to an external array). Using map() for side effects (ignoring the return value) is a code smell. Using forEach() when you need to transform data requires an external variable. The for...of loop is often cleaner than forEach() for simple iteration.

How does Array.reduce() work?

reduce(callback, initialValue) calls callback(accumulator, currentValue, index, array) for each element. The return value becomes the next accumulator. If initialValue is provided, it's the accumulator on the first call. If not, the first element is the accumulator and iteration starts at index 1. Example: [1,2,3,4].reduce((sum, n) => sum + n, 0) → 10. Common patterns: sum (acc + n), product (acc * n), max (Math.max(acc, n)), flatten (acc.concat(n)), groupBy ({...acc, [n.key]: [...acc[n.key]||[], n]}). Provide initialValue to avoid errors on empty arrays.

What is the difference between find() and filter()?

find() returns the first element that satisfies the predicate, or undefined if none is found. Stops iterating after the first match. Use when you expect at most one match (looking up by ID). filter() returns a new array of ALL elements that satisfy the predicate — empty array if none found. Use when you expect multiple matches. findIndex() is the same as find() but returns the index (-1 if not found). findLast() / findLastIndex() (ES2023) search from the end. Example: users.find(u => u.id === 42) (one user by ID) vs users.filter(u => u.role === 'admin') (all admins).

How do I remove duplicates from an array?

Using Set (most common, preserves order): const unique = [...new Set(arr)]. For primitive values (strings, numbers), this is efficient and readable. For objects by property: arr.filter((item, index, self) => index === self.findIndex(t => t.id === item.id)) — keeps first occurrence. Or use reduce: arr.reduce((seen, item) => seen.some(s => s.id===item.id) ? seen : [...seen, item], []). For complex deduplication or performance at scale, consider using a Map: const map = new Map(arr.map(item => [item.id, item])); [...map.values()].

What are the new ES2023 array methods?

ES2023 (2023) added non-mutating versions of mutation methods: toSorted(compareFn) — like sort() but returns a new array, original unchanged. toReversed() — like reverse() but returns a new array. toSpliced(start, deleteCount, ...items) — like splice() but returns a new array. with(index, value) — returns a new array with one element replaced (immutable alternative to arr[i] = value). findLast(fn) and findLastIndex(fn) — search from the end. Array.fromAsync(asyncIterable) — creates an array from an async iterable. These are essential for React state (never mutate state directly) and functional programming patterns.

Related Tools