How to Remove an Element from an Array in JavaScript

Arrays are a fundamental data structure in JavaScript, used to store collections of elements.

However, there may come a time when you need to remove an element from an array.

This Javascript tutorial will guide you through the different methods of removing elements from arrays in JavaScript.

Using the splice() Method

The splice() method is the most commonly used method to remove elements from an array in JavaScript.

It works by removing a specified number of elements from a given index in the array.

Here’s the syntax:

array.splice(index, howMany, [element1][, element2][, ...[, elementX]])

index is the starting point of the removal, where the removal will start from this index.
howMany is the number of elements to remove.
element1, element2, etc. are the elements to add to the array.

Here’s an example:

let fruits = ["apple", "banana", "cherry", "orange"];
fruits.splice(1, 2);
console.log(fruits); // ["apple", "orange"]

In this example, we remove the elements “banana” and “cherry” from the fruits array, starting from index 1.

Using the slice() Method

The slice() method is another method for removing elements from an array in JavaScript.

Unlike the splice() method, the slice() method does not modify the original array but instead returns a new array.

Here’s the syntax:

array.slice(start, [end])

start is the starting point of the removal, where the removal will start from this index.
end is the end point of the removal. The element at this index is not included in the new array.

Here’s an example:

let fruits = ["apple", "banana", "cherry", "orange"];
let newFruits = fruits.slice(0, 1);
console.log(newFruits); // ["apple"]

In this example, we remove all elements in the fruits array except for the first element “apple”.

Using the filter() Method

The filter() method is another way to remove elements from an array in JavaScript.

It works by creating a new array that contains only elements that pass a specified test.

Here’s the syntax:

array.filter(callback(element[, index[, array]])[, thisArg])

callback is the function to run for each element in the array.
element is the current element being processed in the array.
index is the index of the current element being processed in the array.
array is the array filter was called upon.
thisArg is an object to use as this when executing the callback.

Here’s an example:

let fruits = ["apple", "banana", "cherry", "orange"];
let newFruits = fruits.filter(fruit =&gt; fruit !== "banana");
console.log(newFruits); // ["apple", "cherry", "orange"]

In this example, we remove the element “banana” from the `fruits` array by using the filter() method and a callback function that returns only elements that are not equal to “banana”.

Using the pop() Method

The pop() method is a convenient way to remove the last element from an array in JavaScript.

It works by removing the last element from the array and returning it.

Here’s the syntax:

array.pop()

Here’s an example:

let fruits = ["apple", "banana", "cherry", "orange"];
let lastFruit = fruits.pop();
console.log(fruits); // ["apple", "banana", "cherry"]
console.log(lastFruit); // "orange"

In this example, we remove the last element “orange” from the fruits array using the pop() method.

The removed element is stored in the lastFruit variable.

Using the shift() Method

The shift() method is similar to the pop() method, but it removes the first element from an array in JavaScript instead of the last.

It works by removing the first element from the array and returning it.

Here’s the syntax:

array.shift()

Here’s an example:

fruits = ["apple", "banana", "cherry", "orange"];
let firstFruit = fruits.shift();
console.log(fruits); // ["banana", "cherry", "orange"]
console.log(firstFruit); // "apple"

In this example, we remove the first element “apple” from the fruits array using the shift() method.

The removed element is stored in the firstFruit variable.