Suggest an edit

Improve this article

Refine the answer for “delete vs splice()”. 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)

**`delete` and `splice()` can both take an element out of an array, but they do it differently: `delete` removes only a property and leaves an empty slot, while `splice()` removes the element, shifts the rest and shrinks `length`.** That is exactly why `splice()` is the standard tool for arrays, and `delete` belongs to plain objects.

## Theory

### TL;DR

- `delete arr[i]` removes a **property**, not an element: indexes are not shifted and `length` does not change.
- After `delete` the array keeps an **empty slot**, which makes it sparse.
- `splice(start, deleteCount)` removes elements **for real**: the rest shifts and `length` is recalculated.
- `splice()` returns an **array of the removed elements**, `delete` only returns `true` or `false`.
- Iteration methods (`map`, `forEach`, `filter`) skip empty slots, which produces unpredictable behaviour.
- The rule: `splice()` for arrays, `delete` for objects.

### Quick example

```javascript
const a = [1, 2, 3];
const b = [1, 2, 3];

delete a[1];
b.splice(1, 1);

console.log(a);        // [1, <1 empty item>, 3]
console.log(b);        // [1, 3]
console.log(a.length); // 3
console.log(b.length); // 2
```

The same intention, "drop the second element", produces two completely different arrays.

### delete: removes the value, but not the array element

```javascript
const arr = [10, 20, 30];
delete arr[1];

console.log(arr);        // [10, <1 empty item>, 30]
console.log(arr.length); // 3
```

What happened:

- `delete` **removes a property** from an object, and an array is an object with numeric keys too.
- The position stays **empty (an empty slot)**.
- The indexes are **not shifted**, and the length (`length`) **does not change**.

The downsides of this approach:

- The array becomes **ragged**, that is, full of holes.
- Methods such as `.map()`, `.forEach()` and `.filter()` **skip the empty elements**.
- This often leads to unpredictable behaviour, because `arr[1]` still returns `undefined` while `1 in arr` returns `false`.

### splice(): properly removes the element and shifts the rest

```javascript
const arr = [10, 20, 30];
arr.splice(1, 1); // remove 1 element starting at index 1

console.log(arr);        // [10, 30]
console.log(arr.length); // 2
```

What happened:

- `splice(start, deleteCount)` **really removes elements**.
- All remaining elements are **shifted**, and the indexes are recalculated.
- `length` shrinks automatically.

An extra bonus: the method returns what it removed, and it can insert new values at the same time.

```javascript
const arr = [10, 20, 30];

const removed = arr.splice(1, 1, 'a', 'b');

console.log(removed); // [20]
console.log(arr);     // [10, 'a', 'b', 30]
```

### Comparison table

| Criterion | `delete` | `splice()` |
| --- | --- | --- |
| Removes the value | Yes | Yes |
| Removes the element itself | No | Yes |
| Changes the array length | No | Yes |
| Shifts the indexes | No | Yes |
| Leaves a hole | Yes | No |
| Returns the removed elements | No, only `true` or `false` | Yes, an array of removed elements |
| Mutates the original array | Yes | Yes |
| Recommended for arrays | No | Yes |

### When to use which

- **An array, and you need to remove an element:** `splice(i, 1)`.
- **An array you must not mutate:** `arr.filter((_, i) => i !== index)`, or `arr.slice()` plus concatenation; both return a new dense array.
- **The first or last element:** `shift()` and `pop()` are shorter than `splice()` and also update `length` correctly.
- **A plain object, and you need to drop a key:** `delete obj.key`, which is exactly the case the operator was designed for.

```javascript
const user = { name: 'Maria', age: 25 };
delete user.age;

console.log(user); // { name: 'Maria' }
```

> **Conclusion:** `delete` merely wipes a cell and leaves a hole, while `splice()` removes the element for real and rebuilds the array. So for arrays always reach for `splice()`, and use `delete` only for plain objects.

### Common mistakes

- **Deleting an array element with `delete` and expecting the array to get shorter.** `length` never changes.
- **Checking for a hole with `arr[i] === undefined`.** That cannot tell an empty slot from a real `undefined` value; use `i in arr` or `Object.hasOwn(arr, i)`.
- **Forgetting the second argument of `splice()`.** The call `arr.splice(1)` removes everything from index `1` to the end, not a single element.
- **Confusing `splice()` with `slice()`.** `slice()` does not mutate the array and removes nothing, it only returns a copy of a section.
- **Removing elements in a left to right loop with `splice()`.** Every removal shifts the indexes, so walk the array backwards or use `filter()`.
- **Expecting `delete` to return the removed value.** It only returns `true` or `false`, so save the value beforehand.

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.