Introduction

In JavaScript, delete and splice do very different things to arrays, even though both can make an element “go away.” The important distinction is that delete removes the property at an index and leaves a hole, while splice removes the element and shifts the array so it stays dense.

What delete Does to an Array

Arrays in JavaScript are objects, so delete works on an array index the same way it works on an object property:

1const fruits = ["apple", "banana", "mango", "orange"];
2delete fruits[2];
3
4console.log(fruits);
5console.log(fruits.length);
6console.log(2 in fruits);

The results are surprising if you expected a real removal:

• the array length stays the same
• index 2 becomes empty
• later elements do not shift left

That means delete creates a sparse array.

What splice Does

splice is the usual tool when you want to remove an element from an array structure:

1const fruits = ["apple", "banana", "mango", "orange"];
2fruits.splice(2, 1);
3
4console.log(fruits);
5console.log(fruits.length);

After splice, the array becomes:

[ 'apple', 'banana', 'orange' ]

The length is reduced and later elements are reindexed. That is what most people want when they say “delete an element from an array.”

A Side-by-Side Example

Here is the difference more clearly:

1const a = [10, 20, 30, 40];
2const b = [10, 20, 30, 40];
3
4delete a[1];
5b.splice(1, 1);
6
7console.log(a);        // [10, empty, 30, 40]
8console.log(a.length); // 4
9
10console.log(b);        // [10, 30, 40]
11console.log(b.length); // 3

That is why delete is rarely the correct answer for array element removal.

When delete Is Appropriate

delete is useful for object properties:

const user = { name: "Ana", role: "admin" };
delete user.role;
console.log(user);

It can also be used intentionally on arrays if you specifically want to preserve indexes and create holes, but that is uncommon in application code and easy to misuse.

Better Alternatives for Common Cases

If you want to remove by value rather than by index, filter often reads better:

1const fruits = ["apple", "banana", "mango", "banana"];
2const withoutBananas = fruits.filter(fruit => fruit !== "banana");
3
4console.log(withoutBananas);

If you want a non-mutating version of splice, newer JavaScript also offers toSpliced:

1const numbers = [1, 2, 3, 4];
2const updated = numbers.toSpliced(1, 1);
3
4console.log(numbers); // original remains unchanged
5console.log(updated);

This is useful in codebases that prefer immutable updates, such as React state logic.

Iteration Behavior Can Be Tricky

Sparse arrays behave differently in many array methods. For example, some iteration helpers skip missing entries. That can make bugs hard to spot when delete accidentally introduced a hole.

1const values = [1, 2, 3];
2delete values[1];
3
4values.forEach(v => console.log(v));

This does not behave the same way as an array that explicitly contains undefined at index 1.

That difference is one more reason splice is usually safer.

Mutability Matters

splice changes the original array. That is fine in many scripts, but in state-management code you may want an immutable pattern instead.

For example, to remove an item by index without mutating the original array:

1const items = ["a", "b", "c", "d"];
2const indexToRemove = 1;
3
4const result = [
5  ...items.slice(0, indexToRemove),
6  ...items.slice(indexToRemove + 1)
7];
8
9console.log(result);

So the real choice is often not only delete versus splice, but also whether mutation is acceptable at all.

Common Pitfalls

The biggest mistake is using delete and expecting the array to shrink. It does not.

Another pitfall is creating sparse arrays accidentally, then being confused when iteration, serialization, or UI rendering behaves oddly.

Developers also sometimes reach for splice in immutable code paths, which can cause bugs in frameworks that rely on new array references.

Finally, splice removes by index, not by value. If the target is a value, you still need to find the right index or use a different method such as filter.

Summary

• 'delete removes an array property and leaves a hole.'
• 'splice removes elements and reindexes the array.'
• Use splice when you want to remove array items structurally.
• Use delete mainly for object properties, not typical array element removal.
• Consider filter, slice, or toSpliced when you need non-mutating array updates.