4 Ways to Remove a Specific Item From a JavaScript Array
Arrays are one of the common data structures you’ll interact with in JavaScript. When removing an item from an array, there are different methods at your disposal. It all depends on where the element you want to remove is, and how you want to identify it.
See what the various ways of removing a JavaScript array element are, whether it’s at the start, end, or somewhere in between.
1. Remove the First Element From an Array
To remove the first element in an array, use JavaScript’s built-inshift()method. It works out of the box by removing the item and then shifting the indexes of all the remaining items.
After removing the item, the shift method returns it. That means you can assign the removed element to another variable and use it later if you’d like.
Here’s how:
2. Remove the Last Element From an Array
JavaScript has a built-inpop()method for removing the last item in an array. Like theshift()method,pop()returns the removed item from the array.
Shift and pop are two of the most commonJavaScript array methods, but they can only get you so far. Aside from these two, there are several methods that give you more precision over the elements you remove.
3. Using the Delete Operator
Alternatively, you’re able to use JavaScript’sdeleteoperator to delete a given array element at a specific index. However, unlike other methods we’ve looked at before, there’s a catch.
Thedeleteoperator only removes the value, leaving an array with an empty gap at its index. However, the length of the original array stays the same, even if you delete the last element.
4. Remove an Array Element by Value
You can also delete a specific array item by value. There’s no built-in method to do this, but you can combine two existing methods to do this:indexOf()andsplice().
These two will enable you to remove a specific element from an array without having an index. First, start by finding the index of the element of interest usingindexOf():
The indexOf method returns the index of the first occurrence of the value you supply, even if the value is present more than once. If it finds no matching element at all, indexOf returns-1.
Now that you have the index of the target element, you can use thesplice()method to delete the item at that index. All you have to do is pass in the index of the target element as the first argument, followed by the number of items you want to remove.
To remove just a single item, pass a value of1as the second argument:
Thesplice()method returns an array of the removed elements and will modify the original array of elements, just likeshift()andpop().
If some of these methods are new to you, check out ourfull JavaScript cheatsheet. It contains all the array methods available to you, not just for removing, but for other operations like adding, looping, reversing, and filtering items.
Work With JavaScript Arrays Like a Pro
Knowing how to work with arrays in JavaScript is essential for all web developers because of how frequently you’ll come across them.
The key concepts to master are all the built-in methods at your disposal that can help you do almost anything when working with arrays.
If you’re looking to up your skills in creating JavaScript Sets, check out these methods.
The fix was buried in one tiny toggle.
Revolutionize your driving experience with these game-changing CarPlay additions.
Lose your laptop without this feature, and you’ll wish you had turned it on.
Don’t let someone else take over your phone number.
So much time invested, and for what?
