delete vs splice()

JavaScriptJunior~3 min read

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.

Short Answer

Interview ready

Premium

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