In this blog post, we are going to take a look at some of the widely used, battle tested methods to remove a specific element from an array in Javascript.
01. The splice() method
The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place. From MDN Docs.
Syntax
Array.splice(begin_removal_at_this_index, number_of_elements_to_remove)
Return Value
An array containing the deleted elements.
Usage
1. Remove by Index
var testArr = [1, 2, 3, 4, 5];
const output = testArr.splice(2, 1);
console.log(output); // Outputs [3]
console.log(testArr); // Outputs [1, 2, 4, 5]
2. Remove by Value
var testArr = [1, 2, 3, 4, 5];
const val = 3; // Value to remove
for (let i = 0; i < testArr.length; i++) {
if (testArr[i] === val) {
const removedElements = testArr.splice(i, 1);
console.log(removedElements); // Outputs [3]
i--; // Since the indexes of elements following this index get updated after removal
}
}
console.log(testArr); // Outputs [1, 2, 4, 5]
02. The filter() method
The filter() method creates a new array with all elements that pass the test implemented by the provided function. It does not mutate the existing array in place. From MDN Docs.
Syntax
Array.filter(callback(value, index, array) { // Boolean expression });
Return Value
A new array with the elements that pass the test. If no elements pass the test, an empty array will be returned.
Usage
var testArr = [1, 2, 3, 4, 5];
const filterVal = 3; // Value to remove
const filteredElements = testArr.filter(val => (val != filterVal));
console.log(testArr); // Outputs [1, 2, 3, 4, 5]
console.log(filteredElements); // Outputs [1, 2, 4, 5]
03. Using Lodash ._remove() method
Lodash is a popular Javascript utility library. You need to install and import it to use this solution.
The _.remove() method removes all elements from array that predicate returns truthy for by manipulating the original array in place. From Lodash Docs.
Syntax
_.remove(array, function(n) {
return // A boolean expression;
});
Return Value
It returns an array of the removed elements.
Usage
var testArr = [1, 2, 3, 4, 5];
const filterVal = 3; // Value to remove
const filteredElements = _.remove(testArr, function(elem) {
return elem === filterVal;
});
console.log(filteredElements); // Outputs [3]
console.log(testArr); // Outputs [1, 2, 4, 5]
04. Adding a native remove() method to Array.prototype using the splice() method
To better understand this approach. There should be some familiarity with Javascript Object Prototypes. However, you may simply proceed with the solution.
Usage
Array.prototype.remove = function (index) {
this.splice(index, 1);
};
var testArr = [1, 2, 3, 4, 5];
testArr.remove(2); // This will remove 3
console.log(testArr); // Outputs [1, 2, 4, 5]
It is advised to name the custom methods being added to the object prototypes cautiously, since some external libraries may try to manipulate the object prototype their own way and may conflict with the names of methods added by the user.
Cover Photo By Brett Jordan on Unsplash
Top comments (0)