How to Remove Elements from Arrays in JavaScript (9 Ways)

Removing elements from arrays in JavaScript

Removing elements from arrays in JavaScript can be done using various methods, depending on whether you want to modify the original array or create a new one without certain elements. Here are nine common ways to remove elements from arrays in JavaScript:

1. Using splice method

The splice(start, deleteCount, item1ToAdd, item2ToAdd, ...) method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.

Example: Remove elements at specific index:

1 const colors = ['blue', 'red', 'yellow', 'green'];
2 
3 // Remove one element starting at index 1
4 colors.splice(1, 1);
5 
6 // Output: ['blue', 'yellow', 'green']
7 console.log(colors);

Example: Remove elements and replace with new elements:

1 const colors = ['blue', 'red', 'yellow', 'green'];
2 
3 // Remove 1 elements starting at index 1 and replace with 'purple' and 'orange'
4 colors.splice(1, 1, 'purple', 'orange');
5 
6 // Output: ['blue', 'purple', 'orange', 'yellow', 'green']
7 console.log(colors);

2. Using pop method

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

Example: Remove the last element:

1 const colors = ['blue', 'red', 'yellow', 'green'];
2 
3 // Remove 1 elements starting at index 1 and replace with 'purple' and 'orange'
4 const removed = colors.pop();
5 
6 // Output: 'green'
7 console.log(removed);
8 // Output: ['blue', 'red', 'yellow']
9 console.log(colors);

3. Using shift method

The shift() method removes the first element from an array and returns that removed element. This method changes the length of the array.

Example: Remove the first element:

1 const colors = ['blue', 'red', 'yellow', 'green'];
2 
3 // Remove 1 elements starting at index 1 and replace with 'purple' and 'orange'
4 const removed = colors.shift();
5 
6 // Output: 'blue'
7 console.log(removed);
8 // Output: ['red', 'yellow', 'green']
9 console.log(colors);

4. Using filter method

The filter(callback(element[, index, array]), thisArg) method creates a new array with all elements that pass the test implemented by the provided function. It does not modify the original array; instead, it returns a new array containing only the elements that satisfy the condition.

Example: Remove elements based on condition:

1 const colors = ['blue', 'red', 'yellow', 'green'];
2 
3 // Remove 1 elements starting at index 1 and replace with 'purple' and 'orange'
4 const removed = colors.filter((color) => color !== 'red');
5 
6 // Output: ['blue', 'yellow', 'green'] NEW ARRAY!
7 console.log(removed);
8 // Output: ['blue', 'red', 'yellow', 'green'] Old array
9 console.log(colors);

5. Using slice method

The slice(start, end) method returns a shallow copy of a portion of an array into a new array object selected from begin to end (end not included). This method does not modify the original array.

Example: Create a new array without the second element:

1 const colors = ['blue', 'red', 'yellow', 'green'];
2 
3 // Create a new array without the element at index 1
4 const newColors = colors.slice(0, 1).concat(colors.slice(2));
5 
6 // Output: ['blue', 'yellow', 'green']
7 console.log(newColors);

6. Using map method

The map(function callback(currentValue, index, array)) function transforms each element of an array based on the provided callback function. If you want to remove elements, you can conditionally return undefined or an empty array ([]) for those elements you wish to exclude.

Example: Remove the red color(s) from an array

1 const colors = ['blue', 'red', 'yellow', 'green'];
2 
3 // Remove the red color(s)
4 const newColors = colors
5   .map((color) => {
6     if (color === 'red') {
7       return undefined;
8     } else {
9       return color;
10     }
11   })
12   .filter((color) => color !== undefined);
13 
14 // Output: ['blue', 'yellow', 'green']
15 console.log(newColors);

In this example:

map is used to iterate over each element (num) in the numbers array.

If color is red (color === 'red'), it is returned to keep it in the resulting array.

If color is red, undefined is returned, effectively removing it from the array.

filter is then used to remove all undefined values from the resulting array.

7. Using flatMap method

The flatMap() method first maps each element using a mapping function, then flattens the result into a new array. Similar to map(), you can conditionally return empty arrays ([]) for elements you want to remove.

Example: Remove elements containing 'yellow'

1 const colors = ['blue', 'red', 'yellow', 'green'];
2 
3 // Remove the yellow color(s)
4 const newColors = colors.flatMap((color) => {
5   if (color === 'yellow') {
6     return [];
7   } else {
8     return [color];
9   }
10 });
11 
12 // Output: ['blue', 'red', 'green']
13 console.log(newColors);

8. Using delete operator

In JavaScript, the delete operator is used to remove a property from an object or an element from an array. However, its behavior differs slightly depending on what you are trying to delete.

Example: Remove element with delete operator:

1 const colors = ['blue', 'red', 'yellow', 'green'];
2 
3 // Remove the second element
4 delete colors[1];
5 
6 // Output: ['blue', 'yellow', 'green']
7 console.log(colors);

9. Using spread operator

The spread operator (...) is a convenient way to copy or combine arrays and objects, but it doesn’t directly delete elements from an array. However, you can use the spread operator in combination with other methods to effectively remove elements from an array and create a new array without those elements.

You can use the spread operator along with slice() or filter() to create a new array without a specific element.

1 const colors = ['blue', 'red', 'yellow', 'green'];
2 const indexToRemove = 2;
3 
4 // The spread operator ... combines these two slices into a new array.
5 const newColors = [
6   //  Extracts elements before the index to remove.
7   ...colors.slice(0, indexToRemove),
8   // Extracts elements after the index to remove.
9   ...colors.slice(indexToRemove + 1),
10 ];
11 
12 // Output: ['blue', 'red', 'green']
13 console.log(newColors);

Using spread operator allows you to handle array element removal in a functional and immutable way, maintaining clean and readable code.

Conclusion:

Each method has its own use case and benefits, depending on whether you need to modify the original array or create a new one, and whether you need to remove elements based on their value, index, or a condition.