9 Ways to Remove Elements from Arrays in JavaScript
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.