Remove A Specific Element From An Array In Javascript
Tags: tutorial, beginners, javascript
Published: 2020-06-16 17:29:57

Removing a specific element from an array in javascript is one of the most searched question on Google *(in the javascript-related search category ;) )*.

In this article, we will see the possible solutions and attempt to find the best one.

## Splice
One common solution is to use [indexOf](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf) to find the index of the element then remove it using [splice](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice).

Example *(remove 2)*:

```js
const array = [4, 2, 1, 2];
const indexToRemove = array.indexOf(2);

if (indexToRemove > -1) // if element's index is found
  array.splice(indexToRemove, 1); // remove 1 element from index indexToRemove
console.log(array); // = [4, 1, 2]
```

> 1) Note that this method is **destructive**, it mutates the original array.

> 2) It **only removes 1 occurence**, if the array contains multiple `2`, it only removes the first one.

If you want to **remove all occurrences**, you can simply iterate the array and  use splice:
```js
for (const index in array) {
  if (array[index] === 2)
    array.splice(index, 1);
}
```

## Filter
A **non-destructive** way is using [filter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) which also **remove all occurrences** of the element. It's as simple as:
```js
const array = [4, 2, 1, 2];
const newArray = array.filter(element => element !== 2);
console.log(newArray); // = [4, 1];
```

## Delete operator
If you don't want to keep an empty slot in the array instead of removing completely and change the length. You can use the [delete operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/delete) along with [indexOf](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf):
```js
const array = [4, 2, 1, 2];
const indexToRemove = array.indexOf(2);

if (indexToRemove > -1) // if element's index is found
  delete array[indexToRemove]; // delete element in indexToRemove
console.log(array); // = [4, undefined, 1, 2]
```

> 1) Note that this method is **destructive**, it mutates the original array.

> 2) It **only removes 1 occurence**, if the array contains multiple `2`, it only deletes the first one.

If you want to **remove all occurrences**, you can  apply the same example with splice.

## Push
Another **non-destructive** method is using [push](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/push). You simply create a new array with iterating the original one and push the elements that you want to keep into the new one.
```js
const array = [4, 2, 1, 2];
const newArray = [];
for (const element of array) {
  if (element !== 2)
    newArray.push(element);
}
console.log(newArray); // = [4, 1]
```

## So which one is the best?

As you can see, each one of the methods above has different properties. If those properties don't matter to you, checkout this [**performance test**](https://jsperf.com/splice-vs-filter).

Otherwise, it's up to you the pick the one that fits you and your team most.

## Which one will you use?