There are several ways to remove elements from an array in JavaScript.
Remove the first element from the array in JavaScript
If you need to remove the first element, use Array.shift(). This method not only removes the element but also returns it.
let a = [0, 1, 2, 3, 4, 6, 7, 8]
const firstElement = a.shift()
console.log(firstElement) // 0
console.log(a) // [1, 2, 3, 4, 6, 7, 8]Remove the last element from the array in JavaScript
If you need to remove the last element you can use Array.pop() method. This method not only removes the element but also returns it.
const lastElement = a.pop()
console.log(lastElement) // 8
console.log(a) // [1, 2, 3, 4, 5, 6, 7]Another way to delete the last element(s) id to set the length of the array, that will remove the other elements with indexes more than length.
a.length(4)
console.log(a) // [1, 2, 3, 4]Remove element from the array by its index
If you know the index of the element you want to remove, you can use Array.splice(start, ?deleteCount) method. The first argument is the start index, the second one is how many elements you want to remove.
const mySlice = a.slice(0,1)
console.log(mySlice) // [1]
console.log(a) // [2, 3, 4]Remove element from the array by value
In case you need to find the element with specific value you can use Array.splice(start, ?deleteCount) method. First you have to find the element index. We can use simple "for loop":
let array = [0, 1, 2, 3, 4, 6, 7, 8]
for(let index = 0; index < array.length; index++){
if ( array[index] === 7) {
array.splice(index, 1)
index-- // make sure you don't forget this
}
}
console.log(array) //[0, 1, 2, 3, 4, 6, 8]Another option is to use Array.filter() method, but with this approach a new array will be created:
const array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
const filteredArray = array.filter((value, index, arr)=>{
return value > 6
});
console.log(filteredArray) [7, 8, 9]
console.log(array) // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]Other methods
Other methods will be just a fancy ways of doing the same things I described above. You also can use utility libraries, like Lodash (using _.remove) or Underscore (using .findWhere with .without)
Create a helper to remove element from the array by condition
You also can hide the implementation in your own helper:
// This function will modify existing array
function removeItemFromArray(array, condition){
for(let index = 0; index < array.length; index++){
if ( condition(index, array[index])) {
array.splice(index, 1)
index-- // make sure you don't forget this
}
}
return array // optional
}
const array = [
{name: 'John Dow'},
{name: 'Alice Dow'},
{name: 'Mr Beast'},
]
const filteredArray = removeItemFromArray(array, (index, value)=> value.name === 'Mr Beast')
console.log(filteredArray) // [{name: 'John Dow'}, {name: 'Alice Dow'}]Removing an element from an array in Javascript can be done in multiple ways, depending on your specific needs.
The splice method is useful when you want to remove a specific element by its index, the filter method is great for removing multiple elements that match a certain condition, the pop and shift methods are ideal for removing the first or last element of an array, and the unshift method can be used to remove the first element by creating a new array.
By understanding and utilizing these methods, you can manipulate your Javascript arrays with greater ease and precision.
