The splice() method

JavaScriptJunior~2 min read

splice() can remove, add and replace elements right inside the original array. It mutates the array in place and returns an array of the elements that were removed.

Theory

TL;DR

splice() does three operations at once: removal, insertion and replacement.
It works in place: the original array is changed.
It returns an array of the removed elements (empty if nothing was removed).
deleteCount = 0 turns the call into a pure insertion.
It accepts negative indexes: -2 means "the second element from the end".
It throws no error if deleteCount is larger than what is left in the array.

Quick example

javascript

const arr = [1, 2, 3, 4, 5];

// remove 2 elements from index 1 and insert new ones
const removed = arr.splice(1, 2, 'a', 'b', 'c');

console.log(arr);     // [1, 'a', 'b', 'c', 4, 5]
console.log(removed); // [2, 3]

Syntax

javascript

array.splice(start, deleteCount, item1, item2, ...);

Parameter	What it does
`start`	The index at which the changes begin
`deleteCount`	How many elements to remove
`item1, item2, ...`	The elements to insert in place of the removed ones (optional)

1. Removing elements

javascript

const arr = ['a', 'b', 'c', 'd'];
const removed = arr.splice(1, 2);

console.log(arr);     // ['a', 'd']
console.log(removed); // ['b', 'c']

From position 1 remove 2 elements.
It returns an array of the removed elements.
The original array is changed.

2. Adding elements

javascript

const arr = ['a', 'd'];
arr.splice(1, 0, 'b', 'c');

console.log(arr); // ['a', 'b', 'c', 'd']

deleteCount = 0 means we remove nothing.
We add 'b' and 'c' at position 1.
Everything that came after is shifted to the right.

3. Replacing elements

javascript

const arr = ['a', 'b', 'c'];
arr.splice(1, 1, 'x', 'y');

console.log(arr); // ['a', 'x', 'y', 'c']

Starting at index 1, remove 1 element ('b')
and insert 'x', 'y' instead of it.
You can think of this as removal and insertion at the same time.

The number of inserted elements does not have to match the number of removed ones, so the array's length can either grow or shrink.

4. Using negative indexes

javascript

const arr = [1, 2, 3, 4];
arr.splice(-2, 1); // remove one element, counting from the end

console.log(arr); // [1, 2, 4]

-2 means "the second element from the end".

5. If you remove more than there is

javascript

const arr = [1, 2];
arr.splice(1, 10);
console.log(arr); // [1]

The method raises no error, it simply removes everything there is starting at position 1. And if deleteCount is left out entirely, everything from start to the end of the array is removed.

In brief

What it does	Example	Result
Removes	`arr.splice(1, 2)`	Removes 2 elements from index 1
Adds	`arr.splice(2, 0, 'x')`	Inserts `'x'` at position 2
Replaces	`arr.splice(1, 1, 'x')`	Swaps 1 element for `'x'`
Returns	an array of removed elements	the array of removed values
Mutates the original array	yes	Yes

Bottom line: splice() is the all-purpose "Swiss army knife" for arrays: it removes, adds and replaces elements right inside the original array and returns the array of removed values.

Common mistakes

Confusing splice() with slice(). slice() does not mutate the array and returns a copy of a range, splice() mutates and returns what was removed.
Expecting the changed array back. What comes back is the array of removed elements; the changed array is the very variable the method was called on.
Forgetting the second argument. arr.splice(2) removes the entire tail from index 2, not "nothing".
Calling splice() while iterating over the same array. The indexes shift mid-loop and the loop skips elements; iterate backwards or build a new array with filter().
Mutating React or Redux state with splice(). The array reference does not change, so no re-render happens; use toSpliced(), filter() or a spread instead.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.