This tutorial explains 7 typical ways to remove element from array JavaScript. These are array methods, loops, custom functions, and the delete
keyword.
Let's start by setting up a lab environment.
Setup Lab environment
Assume we have an array of 10 names.
Array
let names = ['Lorem', 'Ipsum', 'Doe', 'Reh', 'Mih', 'Fah', 'Soh', 'Lah', 'Tido', 'Jane']
The goal is to remove the names one at a time with a different method till the entire array is empty.
Let's create the project directory and the script file then open the project with a preferred code editor.
mkdir removeElement && cd removeElement touch main.js code .
We create the project directory removeElement
on an Ubuntu terminal, script index.js
file, and open the project in Visual Studio Code.
Now we can dive into the ways to remove element from array JavaScript.
Different methods to remove elements from Array in JavaScript
Method-1: Using pop()
The most common way to remove element from array JavaScript is to use the pop()
array method.
pop()
Ā removes the last element of the array. It takes no parameter and returns the removed element.
Let's use the method to remove the last name from the names
array.
Input
let names = ['Lorem', 'Ipsum', 'Doe', 'Reh', 'Mih', 'Fah', 'Soh', 'Lah', 'Tido', 'Jane']
console.log("Before pop()", names);
names.pop() // !Jane
console.log("After pop()", names)
Output
Before pop() [
'Lorem', 'Ipsum',
'Doe', 'Reh',
'Mih', 'Fah',
'Soh', 'Lah',
'Tido', 'Jane'
]
After pop() [
'Lorem', 'Ipsum',
'Doe', 'Reh',
'Mih', 'Fah',
'Soh', 'Lah',
'Tido'
]
Before running the pop method, we had 'Jane' in the array. Afterward, it does not exist.
Method-2: Using shift()
shift()
method does the opposite of pop()
. Instead of removing an element from the end of an array, it deletes it from the start of an array.
Let's use the method to remove the first element, 'Lorem'.
Input
let names = ['Lorem', 'Ipsum', 'Doe', 'Reh', 'Mih', 'Fah', 'Soh', 'Lah', 'Tido', 'Jane']
// No. 1: pop()
names.pop() // !Jane
console.log(names)
// No. 2: shift()
names.shift() // !Lorem
console.log(names)
Output
[
'Lorem', 'Ipsum',
'Doe', 'Reh',
'Mih', 'Fah',
'Soh', 'Lah',
'Tido'
]
[
'Ipsum', 'Doe',
'Reh', 'Mih',
'Fah', 'Soh',
'Lah', 'Tido'
]
The array length is now 8. And 'Lorem' is unavailable in the names
array.
Method-3: Using splice()
The splice()
method replaces a specified number of elements starting from a particular array index. Failure to specify the corresponding replacer values means replacing the values with nothing, which equates to removing the elements from the array.
<array>.splice(<start>, <deleteCount>)
start
is the index to begin the deletion. Failure to specify the deleteCount
results in removing elements from the starting index to the end of the array. Likewise, specifying a deleteCount
of a value higher than the array's length removes all the subsequent elements.
Let's use the method to remove 'Ipsum' from the list.
names.splice(0, 1) // !Ipsum
console.log(names)
We delete one element from the array's first index (0). If you are unsure about the index of the target element, use the indexOf()
method to locate it.
const start = names.indexOf('Ipsum')
names.splice(start, 1)
Input
let names = ['Lorem', 'Ipsum', 'Doe', 'Reh', 'Mih', 'Fah', 'Soh', 'Lah', 'Tido', 'Jane']
// No. 1: pop()
names.pop() // !Jane
// No. 2: shift()
names.shift() // !Lorem
console.log(names)
// No. 3: splice
names.splice(0, 1) // !Ipsum
console.log(names)
Output
[
'Ipsum', 'Doe',
'Reh', 'Mih',
'Fah', 'Soh',
'Lah', 'Tido'
]
[
'Doe', 'Reh',
'Mih', 'Fah',
'Soh', 'Lah',
'Tido'
]
Method-4: Using loop
We can remove an element from an array using a custom function and a loop with specific conditions. Here is an example.
Input
let names = ['Lorem', 'Ipsum', 'Doe', 'Reh', 'Mih', 'Fah', 'Soh', 'Lah', 'Tido', 'Jane']
// No. 1: pop()
names.pop() // !Jane
// No. 2: shift()
names.shift() // !Lorem
// No. 3: splice
names.splice(0, 1) // !Ipsum
console.log(names)
const updatedArray = (array) => {
let updated = []
for (let element of array) {
if(element !== 'Doe')
updated.push(element)
}
return updated
}
names = updatedArray(names) // !Doe
console.log(names)
The updatedArray()
function receives the names
array. It then creates updated
array. Using a for-of loop, the function pushes the names
array's elements into the updated
array except 'Doe'.
Lastly, the function returns the new array.
Output
[
'Doe', 'Reh',
'Mih', 'Fah',
'Soh', 'Lah',
'Tido'
]
[ 'Reh', 'Mih', 'Fah', 'Soh', 'Lah', 'Tido' ]
The array length is now 6. And 'Doe' is unavailable in the updated list of names.
Method-5: Using delete
The delete
keyword removes an object element. We can also use it to delete an array's element.
The main drawback of this way to remove element from array JavaScript is that it deletes the element and the index but retains the space. That is why you could see the following value occupying the previous element's space.
<1 empty item>
Let's remove 'Reh' from the names array using the delete
keyword.
Input
let names = ['Lorem', 'Ipsum', 'Doe', 'Reh', 'Mih', 'Fah', 'Soh', 'Lah', 'Tido', 'Jane']
// No. 1: pop()
names.pop() // !Jane
// No. 2: shift()
names.shift() // !Lorem
// No. 3: splice
names.splice(0, 1) // !Ipsum
// No. 4: Custom function and for-of loop
const updatedArray = (array) => {
let updated = []
for (let element of array) {
if(element !== 'Doe')
updated.push(element)
}
return updated
}
names = updatedArray(names) // !Doe
console.log(names)
// No. 5: delete
delete names[0] // !Reh
console.log(names)
Output
[ 'Reh', 'Mih', 'Fah', 'Soh', 'Lah', 'Tido' ]
[ <1 empty item>, 'Mih', 'Fah', 'Soh', 'Lah', 'Tido' ]
Method-6: Using filter()
filter()
is a higher-order array method that returns a new array of elements that satisfy a condition.
For example, we can remove 'Mih' from the array using the following condition.
names = names.filter(name => name != 'Mih') // !Mih
The filter()
method receives a callback function that loops through the array and returns all elements except 'Mih'. We then replace the original array with the filtered array.
Besides, the filter()
method lets us easily customize it to remove multiple elements from the array. For instance, we can use it to remove 'Fah', 'Lah', and 'Tido' from the array.
let unwanted = ['Lah', 'Fah', 'Tido'] // !Fah, !Lah, !Tido
names = names.filter( name => !unwanted.includes(name) )
We store the 3 elements in a temporary array called unwanted
. Using the includes()
method, we retain all the elements unavailable in the temporary array. The negation (!
) implies the opposite of includes: excludes.
Input
let names = ['Lorem', 'Ipsum', 'Doe', 'Reh', 'Mih', 'Fah', 'Soh', 'Lah', 'Tido', 'Jane']
// No. 1: pop()
names.pop() // !Jane
// No. 2: shift()
names.shift() // !Lorem
// No. 3: splice
names.splice(0, 1) // !Ipsum
// No. 4: Custom function and for-of loop
const updatedArray = (array) => {
let updated = []
for (let element of array) {
if(element !== 'Doe')
updated.push(element)
}
return updated
}
names = updatedArray(names) // !Doe
// No. 5: delete
delete names[0] // !Reh
console.log(names)
// No. 6: filter
// remove one element
names = names.filter(name => name != 'Mih') // !Mih
console.log(names)
// remove many elements
let unwanted = ['Lah', 'Fah', 'Tido'] // !Fah, !Lah, !Tido
names = names.filter( name => !unwanted.includes(name) )
console.log(names)
Output
[ <1 empty item>, 'Mih', 'Fah', 'Soh', 'Lah', 'Tido' ]
[ 'Fah', 'Soh', 'Lah', 'Tido' ]
[ 'Soh' ]
We got rid of 'Mih' before removing the 3 elements of the unwanted
array.
Method-7: Using reset
Lastly, we can remove all array elements by resetting it to a falsy value.
Input
let names = ['Lorem', 'Ipsum', 'Doe', 'Reh', 'Mih', 'Fah', 'Soh', 'Lah', 'Tido', 'Jane']
// No. 1: pop()
names.pop() // !Jane
// No. 2: shift()
names.shift() // !Lorem
// No. 3: splice
names.splice(0, 1) // !Ipsum
// No. 4: Custom function and for-of loop
const updatedArray = (array) => {
let updated = []
for (let element of array) {
if(element !== 'Doe')
updated.push(element)
}
return updated
}
names = updatedArray(names) // !Doe
// No. 5: delete
delete names[0] // !Reh
// No. 6: filter
// remove one element
names = names.filter(name => name != 'Mih') // !Mih
// remove many elements
let unwanted = ['Lah', 'Fah', 'Tido'] // !Fah, !Lah, !Tido
names = names.filter( name => !unwanted.includes(name) )
console.log(names)
// No. 7: reset
names = []
console.log(names)
Output
[ 'Soh' ]
[]
We get an empty array.
Conclusion
The 7 typical methods to remove element from array JavaScript are
- pop() method
- shift() method
- splice() method
- Custom function and a for-of loop
- delete keyword
- filter() method
- reset the array
Further Reading
javascript - How can I remove a specific item from an array?