DEV Community

loading...
Cover image for Javascript: Remove a specific element from an array

Javascript: Remove a specific element from an array

Pradeep
Hi, it's Pradeep (He/Him/His), a self-taught Web Developer. Wannabe Software Engineer, Blogger and an Open Source Contributor. No Caffeine | Healthy and Conscious Living.
・3 min read

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)
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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 });
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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;
});
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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

Discussion (0)

Forem Open with the Forem app