There are several ways available to remove an item from an array.
You can remove an item from an array in JavaScript using the array.splice(arr.indexOf("removableValue"), 1) method.
Basic Example
const birds = ["dove", "parrot","peacock", "finch", "owl", "cuckoos"];
birds.splice(birds.indexOf("parrot"),1);
console.log(birds);
Output
["dove", "peacock", "finch", "owl", "cuckoos"]In this tutorial, you’ll learn about the different methods to remove an item from an array in JavaScript.
Remove an Item from an Array Using Array Splice()
The Array.splice() method is used to remove/add/replace elements in a specific place of an array.
While using the splice() method, the original array will be modified.
Use this method when you want to delete an item in a specific position of an array.
Code
const birds = ["dove", "parrot","peacock", "finch", "owl", "cuckoos"];
birds.splice(birds.indexOf("parrot"),1);
console.log(birds);Output
start position is an index of parrot, and the deletecount value is set as 1, so one value from the start position parrot is deleted.
["dove", "peacock", "finch", "owl", "cuckoos"]Code
Let’s see another example of deleting multiple values from an array by specifying the desired count in place of deletecount.
const birds = ["dove", "parrot", "peacock", "finch", "owl", "cuckoos"];
birds.splice(2,2);
console.log(birds);Output
Start position is set to 2 and `deletecount` is set to 2, so 2 items(“”finch”, “owl””) starting index position 2 is removed from the array.
["dove", "parrot", "owl", "cuckoos"]If you specify any negative value to the start position, the start index will be set to 0.
birds.splice(-2,2)The above code is similar to the following code.
birds.splice(0,2)Remove an Item from an Array Using Array filter()
The Array.filter() method will create a new array based on the values that satisfy the applied condition.
- The values that do not satisfy the applied condition will be ignored.
- The
array.filter()does not mutate the existing array but instead returns a new array.
Use this method when you want to remove an item from an array based on a specific condition(s).
The array.filter() can also be used along with the arrow function and the inline callback functions.
Code
The following code demonstrates how to use the array.filter() with the callback function.
const ageArr = [30, 60, null, 10, 12, "fourteen", 15, 25,33]
let majorAges = ageArr.filter(isMajor);
console.log(majorAges);
//function to check age majority
function isMajor(age) {
if (age > 18 && !Number.isNaN(age) )
return true;
else
return false;
}Output
In the example, the filter condition is to pick items with numeric values and values greater than 18 are applied to the array.
So a new array is returned with items matching the condition, and other unmatched items of the array are ignored in the new array.
[30, 60, 25, 33]Code
The following code demonstrates how to use the array.filter() with the arrow function.
const birds = ["dove", "parrot", "peacock", "finch", "owl", "cuckoos"];
const filteredBirds = birds.filter(bird => bird.length > 4);
console.log(filteredBirds);
Output
["parrot", "peacock", "finch", "cuckoos"]Remove an Item from an Array Using Array Pop()
The Array.pop() removes the last item of an array and returns it.
- The
pop()method mutates the same array and changes the length of the array.
Use this method when you want to remove the last item of the array and return it.
Code
The following code demonstrates how to use the pop() method to remove the last item of the array.
const birds = ["dove", "parrot", "finch", "owl", "cuckoos"];
const bird = birds.pop();
console.log(bird); // return the last item that is removed
console.log(birds); // returns the array after removing the last itemOutput
"cuckoos"
["dove", "parrot", "finch", "owl"]Code
The following code demonstrates what happens when the array.pop() method is applied to an empty array.
const emptyBird = [];
console.log(emptyBird.pop());Output
undefined is returned when array.pop() is applied on an empty array.
undefinedRemove an Item from an Array Using Array Shift()
The Array.shift() is used to remove the first item of an array and returns the removed item.
- The
shift()method mutates the same array and changes the length of the array.
Use this method when you want to remove the first item of the array and return it.
Code
const birds = ["dove", "parrot", "finch", "owl", "cuckoos"];
const bird = birds.shift();
console.log(bird); // return the first item that is removed
console.log(birds); // returns the array after removing the first itemOutput
"dove"
[ "parrot", "finch", "owl", "cuckoos"]Code
The following code demonstrates what happens when the shift() method is applied to an empty array.
const emptyBird = [];
console.log(emptyBird.shift());Output
undefined is returned if array.shift() is applied on an empty array.
undefinedRemove an Item from an Array Using Array Slice()
The Array.slice() returns a shallow portion of an array into a new array object based on the start and end index position.
- The
array.slice()will not modify the original array.
Use this method when you want to create a new array from the items of a specific array within a defined range.
Code
const originalBirds = ["dove", "parrot", "finch", "owl", "cuckoos"];
const copyBirds = originalBirds.slice(2);
console.log(originalBirds);
console.log(copyBirds);Output
Slice with start index 2 will return all the items starting from index 2 to the end of the array.
Original Array:
["dove", "parrot", "finch", "owl", "cuckoos"]
Sliced Array:
["finch", "owl", "cuckoos"]Code
The following code demonstrates using the slice() method with a negative index.
console.log("slice sample with negative end index");
const copyBirds = originalBirds.slice(2,-1);
console.log(originalBirds);
console.log(copyBirds);Output
Here, the start index is set to 2 and the end index is set to -1.
The copy will happen from index 2, and the negative value will set offset to the end of an array. As a result, the items until the one last item from the end will be copied to the new array.
Original Array:
["dove", "parrot", "finch", "owl", "cuckoos"]
Sliced Array with Negative Index:
["finch", "owl"]Remove an Item from an Array Using Array Length
You can remove items from an array by specifying a new length to the array. The items at the index greater than the specified index will be removed. The index is 0-based.
This is the simplest approach to removing items from the array.
Use this method when you want to remove more than one last item(s) in the array.
Code
const birds = ["dove", "parrot", "finch", "owl", "cuckoos"];
birds.length = 3;
console.log(birds);Output
["dove", "parrot", "finch"]Remove an Item from an Array Using the “delete” keyword
The Delete keyword will remove an item from an array but will not reindex the array and its length. So the value in the deleted position will appear as undefined.
Use this method when you want to remove an item from the array but should not change the length of the array.
Return Value
It returns a flag, True or False, denoting whether the value is removed or not.
Code
const birds = ["dove", "parrot", "finch", "owl", "cuckoos"];
const removed = delete birds[2];
console.log(birds);
console.log(removed);Output
["dove", "parrot", undefined, "owl", "cuckoos"]
trueUsing the delete keyword should be avoided as deletion will only remove an item from an array and will not reindex the array length. delete keyword can lead to wrong results on array length.
JSfiddle
This tutorial is available in this JSFiddle.
