How to Remove Element from Array in JavaScript: A Practical Guide
Learn practical, proven techniques to remove elements from arrays in JavaScript. Compare mutating vs immutable methods, handle duplicates, and cover common edge cases with clear examples and best practices.
Removing elements from an array: core ideas
Understanding how to remove an element from an array in JavaScript is fundamental for data manipulation, state updates, and data normalization in real-world apps. In this section, we compare mutating and immutable approaches and show concrete examples for both patterns. By the end, you’ll know when to mutate an array in place and when to return a new array without the undesired value. The core keyword throughout these examples is how to remove element from array in javascript, which helps anchor your tests and documentation.
// Mutating approach: splice
let arr = [1, 2, 3, 4, 5];
arr.splice(2, 1); // remove the element at index 2 (value 3)
console.log(arr); // [1, 2, 4, 5]// Non-mutating approach: filter (creates a new array)
const original = [1, 2, 3, 4, 5];
const withoutThree = original.filter(x => x !== 3);
console.log(withoutThree); // [1, 2, 4, 5]- Splice mutates the original array and returns the removed elements. Use it when you need to update the same array instance.
- Filter creates a new array and leaves the original intact. This is ideal for functional programming patterns and React state updates.
- When removing by value, consider duplicates and whether you want to remove all occurrences or just a single match.
Mutating methods: splice, pop, shift
Mutating methods operate on the original array and alter its length. They are efficient for in-place updates but require careful handling when other references to the same array exist.
// Removing by index with splice
let nums = [10, 20, 30, 40];
let removed = nums.splice(1, 1); // remove 20 at index 1
console.log(nums); // [10, 30, 40]
console.log(removed); // [20]// Removing the last element with pop
let stack = [1, 2, 3];
let last = stack.pop(); // removes 3
console.log(stack); // [1, 2]
console.log(last); // 3// Removing the first element with shift
let queue = ["a", "b", "c"];
let first = queue.shift(); // removes 'a'
console.log(queue); // ["b", "c"]
console.log(first); // "a"- Use splice for range-based removals and when you need to preserve the array identity.
- Pop and shift are convenient for LIFO/FIFO patterns but can be less efficient on large arrays due to element shifting.
Immutable approaches: filter and spread
Immutable patterns avoid changing the original array, which helps maintain predictable state in complex applications. The trade-off is a new array allocation, but this often leads to simpler reasoning and fewer bugs.
// Remove by value immutably
const a = ["apple", "banana", "cherry", "banana"];
const withoutBanana = a.filter(x => x !== "banana");
console.log(withoutBanana); // ["apple", "cherry"]// Remove by index immutably using spread and slices
const b = ["a", "b", "c", "d"];
const indexToRemove = 2; // remove 'c'
const updated = [...b.slice(0, indexToRemove), ...b.slice(indexToRemove + 1)];
console.log(updated); // ["a", "b", "d"]- Spread with slices is a concise immutable technique for removing a single item by index.
- Filter excels at removing all matching values, especially with duplicates.
- Immutable patterns align well with modern frameworks and functional programming techniques.
Practical scenarios: removing by value, by index, all occurrences
In real-world code, you’ll encounter different removal scenarios. Here are common patterns with concise, reusable forms.
// Remove a single occurrence by value (first match) mutating
let list = ["x", "y", "x", "z"];
const idx = list.indexOf("x");
if (idx !== -1) list.splice(idx, 1);
console.log(list); // ["y", "x", "z"]// Remove all occurrences of a value (immutable)
const arr = [2, 3, 2, 4, 2];
const cleaned = arr.filter(n => n !== 2);
console.log(cleaned); // [3, 4]// Remove by object property from an array of objects (immutable)
const users = [{id: 1}, {id: 2}, {id: 3}];
const without2 = users.filter(u => u.id !== 2);
console.log(without2); // [{id:1},{id:3}]- For duplicates, decide whether to remove all matches or only the first.
- When dealing with objects, compare by property or identity as appropriate.
- Mutating by index is faster but can be dangerous if other code holds a reference to the original array.
Edge cases, performance, and best practices
Edge cases matter when removing elements. Empty arrays, values not found, or operations on typed arrays require careful handling. In general, aim for clear intent: mutating operations when you must reflect changes immediately, immutable patterns when you pass data through layers or UI state.
// Safe removal when element might not exist
const nums = [1, 2, 3];
const i = nums.indexOf(99);
if (i !== -1) nums.splice(i, 1);
console.log(nums); // [1, 2, 3] (unchanged)Performance-wise, removal is typically O(n) due to element shifting or filtering across the array. For very large arrays, consider keeping a set of indices to remove or using a map-like structure for fast lookups when appropriate.
// Performance note: avoid repeated mutations in tight loops
let big = Array.from({length: 100000}, (_, i) => i);
big = big.filter(n => n % 2 === 0); // creates a new array with even numbers
console.log(big.length); // 50000- Prefer immutable updates in UI code to reduce bugs.
- Use splice for precise, index-based removal when you control the array reference.
- Remember to test edge cases like missing items or empty inputs.