6 Ways to Remove Elements from a JavaScript Array

In this article, we will explore six different methods for removing array elements, including splice(), filter(), indexOf(), delete, pop(), and shift().

We will discuss the syntax and behavior of each method and look at examples of how they can be used in different situations. By the end of this article, you will have a solid understanding of how to remove elements from a JavaScript array using these methods.

---

splice()

The splice() method takes two arguments: the index at which to begin removing elements, and the number of elements to remove.

For example:

let fruits = ['Apple', 'Banana', 'Orange', 'Pineapple', 'Mango'];

// remove the second and third elements (Banana and Orange)
fruits.splice(1, 2);

console.log(fruits); // ["Apple", "Pineapple", "Mango"]

In this example, we begin removing elements at index 1, and remove a total of 2 elements. As a result, the second and third elements (Banana and Orange) are removed from the array.

Keep in mind that splice() modifies the original array. This means you can use it to remove elements from an array without creating a new one. This can be useful when you want to remove elements from an array and then perform additional operations on the resulting array.

If you want to keep the original array intact, you should create a new array with the desired elements using splice(), as shown in the example below:

let fruits = ['Apple', 'Banana', 'Orange', 'Pineapple', 'Mango'];

// create a new array with only the fruits that start with 'P'
let pFruits = fruits.splice(3, 1);

console.log(fruits); // ["Apple", "Banana", "Orange", "Mango"]
console.log(pFruits); // ["Pineapple"]

In this example, we use splice() to create a new array called pFruits, which contains only the element at index 3 (Pineapple). The original fruits array is modified, but the original elements are preserved in the new pFruits array.

---

filter()

The filter() method takes a callback function that should return true for elements that should be included in the new array, and false for elements that should be removed.

For example:

let numbers = [1, 2, 3, 4, 5, 'six', 7, 8, 9];

// create a new array with only numbers
let onlyNumbers = numbers.filter(num => typeof num === 'number');

console.log(onlyNumbers); // [1, 2, 3, 4, 5, 7, 8, 9]

In this example, we use filter() to create a new array called onlyNumbers, which contains only elements that are numbers (i.e. not the string "six"). The original numbers array is not modified, and the resulting onlyNumbers array contains only the elements that meet the specified criteria.

One advantage of using filter() is that it allows you to create a new array based on specific criteria. This is useful when you want to remove elements that do not meet certain conditions, such as removing non-numeric elements from an array of numbers. It is also possible to use filter() in combination with other array methods, such as map() or reduce(), to perform complex operations on arrays.

And unlike splice() – the filter() method does not modify the original array. This means that you can use it to create a new array without affecting the original array.

---

indexOf()

This method takes one argument: the element to search for. It returns the index of the first occurrence of the specified element, or -1 if the element is not found.

For example:

let fruits = ['Apple', 'Banana', 'Orange', 'Pineapple', 'Mango'];

// find the index of the 'Orange' element
let orangeIndex = fruits.indexOf('Orange');

console.log(orangeIndex); // 2

Because indexOf() does not take any arguments other than the element to search for – you must use it in combination with another method, such as splice(), to actually remove the element from the array.

let fruits = ['Apple', 'Banana', 'Orange', 'Pineapple', 'Mango'];

// find the index of the 'Orange' element
let orangeIndex = fruits.indexOf('Orange');

// remove the element at that index
fruits.splice(orangeIndex, 1);

console.log(fruits); // ["Apple", "Banana", "Pineapple", "Mango"]

---

delete

The delete operator does not actually remove the element from the array; it simply sets the element to undefined.

As a result, the length of the array does not change, and the undefined element will still be present if the array is iterated over.

For example:

let fruits = ['Apple', 'Banana', 'Orange', 'Pineapple', 'Mango'];

// remove the second element (Banana)
delete fruits[1];

console.log(fruits); // ["Apple", undefined, "Orange", "Pineapple", "Mango"]

One upside of using the delete operator is that it is simple and straightforward. It does not take any arguments, and simply sets the element at the specified index to undefined. This makes it easy to use and understand, even for beginners.

---

pop()

This method does not take any arguments, and simply removes the last element from the array.

Worth noting that his method also returns the removed element, which can be useful for storing the removed element in a variable or performing additional operations on the removed element.

For example:

let fruits = ['Apple', 'Banana', 'Orange', 'Pineapple', 'Mango'];

// remove the last element (Mango) from the array
let lastFruit = fruits.pop();

console.log(fruits); // ["Apple", "Banana", "Orange", "Pineapple"]
console.log(lastFruit); // "Mango"

And here is an example of storing the removed element in a variable:

let fruits = ['Apple', 'Banana', 'Orange', 'Pineapple', 'Mango'];

// remove the last element (Mango) from the array
let lastFruit = fruits.pop();

// log the removed element and the remaining array
console.log(lastFruit); // "Mango"
console.log(fruits); // ["Apple", "Banana", "Orange", "Pineapple"]

// do something with the removed element
lastFruit = lastFruit.toUpperCase();
console.log(lastFruit); // "MANGO"

I’ve written a separate guide on capitalizing letters here.

In this last example, we remove the last element from an array, and then perform additional operations on the resulting array:

let fruits = ['Apple', 'Banana', 'Orange', 'Pineapple', 'Mango'];

// remove the last element (Mango) from the array
fruits.pop();

// do something with the resulting array
fruits.push('Kiwi');
console.log(fruits); // ["Apple", "Banana", "Orange", "Pineapple", "Kiwi"]

---

shift()

The shift() method is the exact opposite of pop(), so instead of removing the last element, it removes the first.

Everything else stays the same (including storing the removed elements in variables).

let fruits = ['Apple', 'Banana', 'Orange', 'Pineapple', 'Mango'];

// remove the first element (Apple) from the array
let firstFruit = fruits.shift();

console.log(fruits); // ["Banana", "Orange", "Pineapple", "Mango"]
console.log(firstFruit); // "Apple"

---