How to Remove a Specific Item From an Array in JavaScript
Remove a Specific Item From an Array in JavaScript
remove | approach | description | occurrence |
---|---|---|---|
the first item | shift() | Removes the first item of an array. | — |
the last item | pop() | Removes the last item of an array. | — |
an item by index | splice() | Removes an item by index and the method takes the index as an argument. | — |
an item by value | 1. indexOf() + splice() 2. findIndex() + splice() | 1. indexOf takes the value as an argument and returns the element’s index. + splice deletes the item. 2. findIndex takes a function as an argument and returns the index of the value + splice. | first |
an item by value | 1. lastIndexOf() + splice() 2. findLastIndex() + splice() | 1. lastIndexOf takes the value as an argument and returns the index of the last occurrence of the value + splice removes the element. 2. findLastIndex takes a function as an argument and returns the index of the last occurrence of the value + splice. | last |
all items by value | filter() | Takes a function as an argument and creates a shallow copy of a portion of a given array. Each item in the newly created array passes the test implemented in the function. | — |
There are plenty of options you can choose from according to what item you need to delete. Below you can see the full description with examples of each approach described in the previous table plus some bonus methods that you can use.
Remove the First Item From an Array
Use the shift() method to remove the first element of an array in JavaScript. It returns the deleted element and changes the array length.
const arr = [23, -12, 4, 7, 34];
const removedItem = arr.shift();
console.log('Removed element: ', removedItem); // -> 23
console.log('array: ', arr.join(', ')); // -> -12, 4, 7, 34
Output:
Removed element: 23
array: -12, 4, 7, 34
Remove the Last Item From an Array
Use the pop() method to remove the last element of an array in JavaScript. It returns the deleted element and changes the array length.
const arr = [23, -12, 4, 7, 34];
const removedItem = arr.pop();
console.log('Removed element: ', removedItem); // -> 34
console.log('array: ', arr.join(', ')); // -> 23, -12, 4, 7
Output:
Removed element: 34
array: 23, -12, 4, 7
Remove an Item From an Array by Index
Use the splice(index, count) method to remove an element of an array by index. Its first two parameters determine respectively the index (from where to start the deleting process) and the count of the elements which should be removed (in our case, the count will be always 1 because we need to remove only one item). The method changes the array and returns a new array with the removed elements.
const arr = [23, -12, 4, 7, 34];
const index = 2;
const removedItemArr = arr.splice(index, 1); // returns a new array
console.log('Removed item: ', removedItemArr[0]); // prints the first element
console.log('array: ', arr.join(', ')); // modifies the origin
Output:
Removed item: 4
array: 23, -12, 7, 34
Remove a Specific Item from an Array by Value
Remove a Specific Item Using indexOf() and splice() | First Occurrence
Use indexOf(value) and splice() methods to remove a specific item by value at the first found index. indexOf() returns the first index at which a given element can be found in the array. When it is found, we’ll use it in the splice() method to remove the item.
const arr = [23, -12, 4, 7, 34];
const index = arr.indexOf(-12); // finds the index of -12
arr.splice(index, 1); // deletes the element at that index
console.log('Array: ', arr.join(', '));
Output:
Array: 23, 4, 7, 34
Remove a Specific Item Using for loop, break, and splice() | First Occurrence
We’ll implement the same behavior as the previous example but instead of indexOf, we’ll use a for loop to iterate through the array. To find the first occurrence of the given value, we’ll break the loop.
const arr = [23, -12, 4, 7, 34];
const value = -12;
for (let i = 0; i < arr.length; i++) {
if (arr[i] === value) {
arr.splice(i, 1); // -> this line will be executed only once because of the break keyword
break; // -> we stop next iterations
}
}
console.log('Array: ', arr.join(', '));
Output:
Array: 23, 4, 7, 34
Remove a Specific Item Using findIndex() and splice() | First Occurrence
Here instead of directly passing the value to the findIndex() method, we need to pass a callback function that provides a condition (the current item === value) and if the element satisfies it, the method will return the index of that element.
const arr = [23, -12, 4, 7, 34];
const value = -12;
const index = arr.findIndex(x => x === value);
const removedItemArr = arr.splice(index, 1);
console.log('Removed item: ', removedItemArr[0]);
console.log('array: ', arr.join(', '));
Output:
Removed item: -12
array: 23, 4, 7, 34
Remove a Specific Item Using lastIndexOf() and splice() | Last Occurrence
Use lastIndexOf(value) and splice() methods to remove a specific item by value at the last found index. indexOf() returns the last index at which a given element can be found in the array. When it is found, we’ll use it in the splice() method to remove the item.
const arr = [23, -12, 4, 7, -12, 34]; // we have two elements -12
const index = arr.lastIndexOf(-12); // gets the last index ---> the last occurance of the value
arr.splice(index, 1);
console.log('Array: ', arr.join(', '));
Output:
Array: 23, -12, 4, 7, 34
Remove a Specific Item Using findLastIndex() and splice() | Last Occurrence
Here the only difference from the previous example is the parameter we pass to findLastIndex() – a callback function.
const arr = [23, -12, 4, 7, -12, 34];
const value = -12;
const index = arr.findLastIndex(x => x === value);
const removedItemArr = arr.splice(index, 1);
console.log('Removed item: ', removedItemArr[0]);
console.log('array: ', arr.join(', '));
Output:
Removed item: -12
VM42:8 array: 23, -12, 4, 7, 34
Remove a Specific Item Using for loop, break, and splice() | Last Occurrence
const arr = [23, -12, 4, 7, -12, 34];
const value = -12;
for (let i = arr.length -1 ; i >= 0; i--) { // iterates from end to start
if (arr[i] === value) {
arr.splice(i, 1); // -> this line will be executed only once because of the break keyword
break; // -> we stop next iterations
}
}
console.log('Array: ', arr.join(', '));
Output:
Array: 23, -12, 4, 7, 34
Conclusion
As you can see, the first example is the simplest way to find the smallest number in an array in JavaScript. Furthermore, we use the ES6 spread operator that reduces our code.