Suggest an edit

Improve this article

Refine the answer for “The splice() method”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

**`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.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts708 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.