02 October 2023

How to Remove an Element from an Array in JavaScript

web

In this tutorial, we delve into the various methods to remove elements from arrays in JavaScript. We’ll explore techniques such as the splice() method for precise removals, the pop() method for eliminating the last element, the shift() method for removing the first element, and the filter() method for conditional removals.

1. The Splice() Method

The splice() method is a versatile tool in JavaScript, not just for removing elements, but also for adding new ones or replacing existing ones.

Splice() Syntax

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

start: The index at which to begin changing the array.
deleteCount (Optional): The number of elements to remove from the array. If omitted, all elements from the start position to the end of the array will be removed.
item1, item2, … (Optional): Elements to add to the array, starting from the start index.

Removing Elements

The primary use of splice() is to remove elements from an array.

let fruits = ["apple", "banana", "cherry", "date", "fig"];
fruits.splice(2, 2);
console.log(fruits); // Outputs: ["apple", "banana", "fig"]

2. The Pop() Method

The pop() method is straightforward. It removes the last element from an array and returns that element. This method changes the length of the array.

let animals = ["cat", "dog", "fish", "bird"];
let removedAnimal = animals.pop();
console.log(animals);       // Outputs: ["cat", "dog", "fish"]
console.log(removedAnimal); // Outputs: "bird"

If the array is empty, the method returns undefined.

let emptyArray = [];
let result = emptyArray.pop();
console.log(result); // Outputs: undefined

3. The Shift() Method

While pop() focuses on the end of an array, shift() does its magic at the beginning. It removes the first element from an array and returns that removed element.

let books = ["fiction", "non-fiction", "biography", "fantasy"];
let removedBook = books.shift();
console.log(books);       // Outputs: ["non-fiction", "biography", "fantasy"]
console.log(removedBook); // Outputs: "fiction"

Similar to the pop() method, the shift() method also returns undefined in case of an empty array.

let emptyBasket = [];
let result = emptyBasket.shift();
console.log(result); // Outputs: undefined

4. The Filter() Method

filter() is a powerful method that creates a new array with all elements that pass the test implemented by the provided function. It doesn’t modify the original array but returns a new one.

let numbers = [10, 20, 30, 40, 50];
let filteredNumbers = numbers.filter(num => num !== 30);
console.log(filteredNumbers); // Outputs: [10, 20, 40, 50]

Conclusion

Always be cautious when manipulating arrays, especially when working with their indices directly. An incorrect index or delete count can lead to unintended results.
Remember that methods like pop() and shift() not only remove elements but also return the removed element. This can be useful if you want to use or store the removed item.
The filter() method is especially useful when you need to remove multiple elements based on a condition.

02 October 2023