Removing elements from arrays in JavaScript
Removing elements from arrays in JavaScript can be done in multiple ways depending on whether you want to mutate the original array or return a new one. Here are nine practical and modern methods, with improved explanations and updated examples.
1. Using splice() — Remove by Index (Mutable)
splice() changes the original array by removing or replacing elements.
Remove one element
js
const colors = ['blue', 'red', 'yellow', 'green'];
colors.splice(1, 1);
console.log(colors); // ['blue', 'yellow', 'green']Remove and replace
js
const colors = ['blue', 'red', 'yellow', 'green'];
colors.splice(1, 1, 'purple', 'orange');
console.log(colors); // ['blue', 'purple', 'orange', 'yellow', 'green']2. Using pop() — Remove Last Item (Mutable)
js
const colors = ['blue', 'red', 'yellow', 'green'];
const removed = colors.pop();
console.log(removed); // 'green'
console.log(colors); // ['blue', 'red', 'yellow']3. Using shift() — Remove First Item (Mutable)
js
const colors = ['blue', 'red', 'yellow', 'green'];
const removed = colors.shift();
console.log(removed); // 'blue'
console.log(colors); // ['red', 'yellow', 'green']4. Using filter() — Remove by Condition (Immutable)
js
const colors = ['blue', 'red', 'yellow', 'green'];
const newColors = colors.filter(c => c !== 'red');
console.log(newColors); // ['blue', 'yellow', 'green']5. Using slice() + concat() — Remove by Index (Immutable)
js
const colors = ['blue', 'red', 'yellow', 'green'];
const newColors = [...colors.slice(0, 1), ...colors.slice(2)];
console.log(newColors); // ['blue', 'yellow', 'green']6. Using map() + filter() — Conditional Removal (Immutable)
js
const colors = ['blue', 'red', 'yellow', 'green'];
const newColors = colors
.map(color => (color === 'red' ? undefined : color))
.filter(Boolean);
console.log(newColors); // ['blue', 'yellow', 'green']7. Using flatMap() — Remove by Returning Empty Arrays (Immutable)
js
const colors = ['blue', 'red', 'yellow', 'green'];
const newColors = colors.flatMap(color =>
color === 'yellow' ? [] : [color]
);
console.log(newColors); // ['blue', 'red', 'green']8. Using delete — Remove Element but Keep Index (Not Recommended)
delete leaves a hole in the array.
js
const colors = ['blue', 'red', 'yellow', 'green'];
delete colors[1];
console.log(colors); // ['blue', <1 empty item>, 'yellow', 'green']Avoid using delete unless you specifically need sparse arrays.
9. Using Spread Operator (Immutable)
A modern and clean approach.
js
const colors = ['blue', 'red', 'yellow', 'green'];
const indexToRemove = 2;
const newColors = [
...colors.slice(0, indexToRemove),
...colors.slice(indexToRemove + 1)
];
console.log(newColors); // ['blue', 'red', 'green']Conclusion
Here’s when to use which method:
| Goal | Suggested Method |
|---|---|
| Mutate the array | splice, pop, shift |
| Keep original array | filter, slice, spread operator |
| Remove by condition | filter, flatMap |
| Remove by index | splice (mutable) or slice+spread (immutable) |
This guide helps you choose the right tool depending on your use case, whether you prefer functional programming or need to modify arrays directly.