Which array methods mutate the original array?

The mutating methods are push, pop, shift, unshift, splice, sort, reverse, fill, and copyWithin. They change the array in place and usually return a length or the array itself rather than a fresh copy. Everything else returns a new array or a value.

Difference between slice and splice?

slice(start, end) returns a shallow copy of a portion and does not change the original. splice(start, deleteCount, ...items) removes and/or inserts elements in place, mutating the array, and returns the removed elements. The names are similar but the behaviours are opposite on mutation.

What do toSorted, toReversed, and with do?

These ES2023 methods are immutable counterparts to sort, reverse, and index assignment. toSorted and toReversed return a new sorted or reversed array without touching the original, and with(index, value) returns a copy with one element replaced. They make functional code safer.

Difference between map and forEach?

map runs a function over every element and returns a new array of the results, so it is for transforming data. forEach also runs a function over every element but returns undefined; it is for side effects. Use map when you need the output array, forEach when you only act on each item.

reduce folds an array into a single value by applying a reducer function that takes an accumulator and the current element. You supply an initial accumulator; without one the first element is used and an empty array throws. It can build sums, objects, or any aggregate.

What is the JavaScript Array Methods?

Searchable JavaScript Array method reference. Each entry lists the call signature, return type, whether the method mutates the array in place or returns a new one, and the ECMAScript version that introduced it. It runs free in your browser on Gera Tools, with nothing uploaded.

JavaScript Array Methods

Name: JavaScript Array Methods
Creator: Gera Tools
License: https://creativecommons.org/licenses/by/4.0/

Get one useful tool a week

Like this tool? Enter your email and we'll send you one genuinely useful Gera tool a week — plus a link to come back to this one. No spam, one-click unsubscribe any time.

The Array prototype has many methods, and the difference between one that mutates in place and one that returns a fresh array is a frequent source of bugs. This reference lists each method with its signature, return type, mutability, and the ECMAScript version that added it.

How it works

Each method is classified by what it does to the array:

Mutating — push, pop, shift, unshift, splice, sort, reverse, fill, copyWithin change the array in place.
Non-mutating — map, filter, slice, concat, flat, and the rest return a new array or a single value, leaving the original untouched.
Immutable copies (ES2023) — toSorted, toReversed, toSpliced, and with are drop-in immutable versions of the mutating methods.

The reference tags each entry so you can see at a glance whether calling it is safe inside a pure function or a React render.

The classic confusion pairs

Several pairs of methods do similar things but differ critically on mutation or return value:

slice vs splice — slice(start, end) is non-mutating and returns a shallow copy of a portion of the array. splice(start, deleteCount, ...items) mutates the array in place, removing and optionally inserting elements, and returns the removed items. The similar names but opposite mutation behaviour cause bugs constantly.

sort vs toSorted — sort() mutates the original array and returns the same reference. toSorted() (ES2023) returns a new sorted copy. If you write const sorted = arr.sort(), you have also mutated arr — sorted and arr are the same array.

map vs forEach — Both iterate over every element, but map returns a new array of the results while forEach returns undefined. Use map when you need the transformed values; forEach when you only want side effects.

find vs filter — find returns the first matching element (or undefined); filter returns an array of all matching elements (possibly empty). Use find for a single lookup, filter for a collection.

ES2023 immutable copy methods

The toSorted, toReversed, toSpliced, and with methods were added in ES2023 specifically to provide immutable alternatives to sort, reverse, splice, and index assignment. They are drop-in replacements in functional code and React state handlers:

// Mutable — mutates the original
const arr = [3, 1, 2];
arr.sort();        // arr is now [1, 2, 3]

// Immutable (ES2023) — original unchanged
const sorted = arr.toSorted();  // new array [1, 2, 3]
// arr is still [3, 1, 2]

Tips

Inside React state updates and any functional pipeline, avoid the mutating methods on data you do not own — sort a copy with [...arr].sort() or use toSorted(). Remember reduce needs an initial value to be safe on possibly empty arrays, and that map/filter/forEach skip holes in sparse arrays. indexOf uses strict equality so it cannot find NaN; use includes, which does, when NaN matters. flat and flatMap both handle nested arrays but flatMap is a single pass that maps then flattens by one level, which is more efficient than map followed by flat(1).