There is really high chance that in some point in the past you have typed above phrase in Google or Stack Overflow search field. This problem is so common that it is the most voted question under javascript tag on Stack. If it is so popular why not have a closer look at that problem?
The problem of removing element from array seems ubiquitous and therefore important.
In JavaScript there are a lot of methods in Array itself, but also in other standard objects. Among those methods there are quite a few which can help us solve specified problem. It means that there are actually multiple answers to question from title. Let us review the most popular ones.
To make solutions more comparable we will characterize each of them using three properties:
- In-place ? does this method modify original array? If not, then it returns modified array (array without deleted element)
- Removes duplicates ? does this method remove all occurrences of specified element or only the first one?
- By value/index ? does this method require providing value of the element or its index in array?
To simplify the examples we will assume that all arrays contain primitive values such as Numbers.
General cases
In this section we will evaluate the most common approaches to the problem in general case. By general I mean removing an element which doesn?t have special place in array. It is not last, first or the only one. It?s just regular Joe among array?s elements.
Removing element by value using .splice()
Splice method can be used to get rid of an element at known index. If you only know the value, first you must identify the index of the item. Then use the index as the start element and remove just one element.
Remove element using splice method
Properties of the solution:
Properties of splice method solution
Removing Array element using .filter() method
Specific element can be filtered out from array, by providing filtering function. Such function is then called for every element in array.
Remove element using filter method
Properties of the solution:
Properties of filter method solution
Removing Array element by extending Array.prototype
Prototype of Array can be extended with additional methods. Such methods will be then available to use on created arrays.Note: Extending prototypes of objects from standard library of JS (like Array) is considered by some as antipattern.
Remove element by extending Array prototype
Properties of the solution:
Properties of extending prototype solution
Removing Array element using the delete operator
Using the delete operator does not affect the length property. Nor does it affect the indexes of subsequent elements. The deleted item is not removed but becomes undefined. The delete operator is designed to remove properties from JavaScript objects, which arrays are objects.
Remove element using delete operator
Properties of the solution:
Properties of delete operator solution
Removing Array element using Object utilities (>= ES10)
ES10 introduced Object.fromEntries, which can be used to create desired Array from any Array-like object and filter unwanted elements during the process.
Remove element using Object.fromEntries
Properties of the solution:
Properties of fromEntries solution
Special cases
In this section we will evaluate three special cases in terms of where in array the specified element resides: at the beginning, at the end or both cases i.e. it is the only element in the array.
Removing element if it?s at the end of the Array..
..by changing array length:
JavaScript Array elements can be removed from the end of an array by setting the length property to a value less than the current value. Any element whose index is greater than or equal to the new length will be removed.
Remove last by changing length property
Properties of the solution:
Properties of changing length solution
..by using .pop() method:
The pop method removes the last element of the array, returns that element, and updates the length property. The pop method modifies the array on which it is invoked, This means unlike using delete the last element is removed completely and the array length reduced.
Remove last by using pop method
Properties of the solution:
Properties of pop method solution
Removing element if it?s at the beginning of the Array
The .shift() method works much like the pop method except it removes the first element of a JavaScript array instead of the last. When the element is removed the remaining elements are shifted down.
Remove first by using shift method
Properties of the solution:
Properties of shift method solution
Removing element if it?s the only element in the Array
The fastest technique is to set an array variable to an empty array.
Remove the only element by creating new array
Properties of the solution:
Properties of new array creation solution
Alternatively, technique from one of previous examples can be used by setting length to 0.
Conclusion
JavaScript is becoming more and more developer-friendly. New tools are added with each release. The consequence of that is there are a lot of ways to handle simple tasks. The problem of removing element from array seems ubiquitous and therefore important. I hope you learned something new by reading this article. I also hope that it will encourage you to study the simple things in JS, as someone wise once said:
Practice yourself, for heaven?s sake in little things, and then proceed to greater. ? Epictetus
A note from JavaScript In Plain English: We are always interested in helping to promote quality content. If you have an article that you would like to submit to JavaScript In Plain English, send us an email at [email protected] with your Medium username and we will get you added as a writer.
