- Instant help with your JavaScript coding problems

Remove element from an array

It's a common programming task to remove one or more elements from an existing array. In Javascript, there are multiple solutions to this problem from simple to slightly more complex. Choosing the right one depends on your needs. Do you need a mutable or immutable solution, remove by value or by index, delete one or more elements? So let's see what the options are.

Remove any element using the filter method

Remove_array_element-Filter (3)

The filter() method is the most versatile solution that easily removes one or more items, eighter based on value or index. This is an immutable solution. It doesn't delete the item but creates a new array from which it filtered out unwanted elements. It is widely supported, even with Internet Explorer. See the compatibility matrix.

The method requires a callback function as a parameter that will be invoked with the following arguments:

  1. The value of the element, that is mandatory.
  2. The index of the element is optional.
  3. The original array itself is also optional.

The resulting array will contain the elements where the return value of the callback function is true.

let originalArray = [1, 2, 3, 4, 5];

let filteredArray = originalArray.filter(myFilter);

function myFilter(value) {
    return value < 3 || value > 4;
}

You can use the filter() method in a compact form using arrow functions if IE support is not important.

let originalArray = [1, 2, 3, 4, 5];

let filteredArray = originalArray.filter((value, index) => index !== 2);

 

Remove specific object

Remove_array_element-Filter object

Even if your array contains objects instead of basic datatypes the filter() method works straightforward. Just specify your callback function accordingly.

let originalArray = [
    {name: 'John', age: 23, color: 'red'}, 
    {name: 'Ann', age: 21, color: 'blue'}, 
    {name: 'Mike', age: 13, color: 'green'}
];

let filteredArray = originalArray.filter(value => value.age > 18);

 

Remove the first element

Array_shift

Probably the simplest case if you just want to remove the first element of an array. For example in case of a FIFO queue. In this case, you can use the shift() method to remove the first item. The method returns the removed element so you can process it as you want. Despite filter() , shift() mutates the original array.

let myArray = [1, 2, 3, 4, 5];

let removedElement = myArray.shift(); 

 

Remove the last element

array_pop

A very similar case when you need something like a LIFO stack. The pop() method can be used to remove the last element of an array. It works similarly to the previously mentioned shift() method.

let myArray = [1, 2, 3, 4, 5];

let removedElement = myArray.pop();
// myArray: 1,2,3,4

 

Remove a particular element on index basis

Array_splice

If you want to remove a specific element from an array from anywhere, you can use the splice() method. Splice can not only remove elements but also replace and add new items. In this article, we only focus on how to remove an element.

With splice() you can remove one or more items at once. Define the start index as the first parameter. As a second parameter, you can define the number of items to be deleted. However, the second parameter is optional. If you don't specify, then all elements to the right will be removed from the array.

// splice(2) example
let myArray = [1, 2, 3, 4, 5];
console.log("Before: " + myArray);
myArray.splice(2);
console.log("After splice(2): " + myArray);

// splice(2, 1) example
myArray = [1, 2, 3, 4, 5];
console.log("Before: " + myArray);
myArray.splice(2, 1);
console.log("After splice(2, 1): " + myArray);

// splice(2, 2) example
myArray = [1, 2, 3, 4, 5];
console.log("Before: " + myArray);
myArray.splice(2, 2);
console.log("After splice(2, 2): " + myArray);


As splice() uses array indexes, if you want to delete by value, you must first find the index for the value.

 

Using delete

Remove_array_element-Delete

Using the delete method may be obvious, but it works differently than you probably expect. It doesn't remove the element but clears the value. The array length will be the same as before and there will be an undefined value at the position you deleted.

let myArray = [1, 2, 3, 4, 5];

delete(myArray[2]);
// Result: 1,2,,4,5

 

Table of contents
Related articles
Trending articles