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.

JavaScript Array Methods

Email me this result

Get this tool's output sent to your inbox, plus one useful tool a week. No spam, 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.

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.