How To Remove a Value From an Array in JavaScript

Removing values from an array is a common task, but one that must be performed carefully.

There are multiple ways to perform this task. We’ll cover two. The first is easy and what you would try as a self-learner. Unfortunately, it comes with likely pitfalls. The second uses a method that is lesser-known but yields much more consistent results.

Using the ‘delete’ Keyword

The simplest, most direct way to remove a particular value from an array is to use the delete keyword.

Let’s say we want to remove the number three from the following array; we can use delete.let numbers = [1,2,3,4,5];
delete numbers[2];

The number two inside of square brackets isn’t the value we’re deleting, but rather, it’s the index within the array. The index is the identifier, specifying where in the array we’re referring to.

While using delete is simple, it also comes with risks and hidden complexities.

How do we know which index to delete? Most likely, you’ll be required to use additional techniques such as .indexOf() to identify the index of the value to be deleted.

What will we do about that hole? Printing out our modified array gives us a sneak preview of problems to come.let numbers = [1,2,3,4,5];
delete numbers[2];console.log(numbers); // [1,2,undefined,4,5]

That undefined value means that we have a gap in our sequence of indexes. This can be a problem if you’re performing a set of actions on each index or each value in the array.

Using splice()

Fortunately, there’s a solution and it’s native to JavaScript — no additional libraries or frameworks needed.

The splice() method takes a starting index, a number of items to remove, and a variable number of items to add. The number of items to remove and items to add are optional.

To delete the number three from our example above, we specify the specific index and delete only one value.let numbers = [1,2,3,4,5];
numbers.splice(2,1);console.log(numbers); // [1, 2, 4, 5]

We no longer have the value that existed at index two. Additionally, the array will be re-indexed, meaning the hole will be closed and indexes re-numbered to become sequential again.

So far, we’ve used a static index to delete a value…this doesn’t happen very often in the real world. Let’s use the indexOf() method to return the index of our search.let numbers = [1,2,3,4,5];
const search_value = 3;
const search_index = numbers.indexOf(search_value);if(search_index >= 0) {
  numbers.splice(search_index,1);
}console.log(numbers); // [1, 2, 4, 5]

We check to make sure the search value exists in our array first. The indexOf() method returns the index of the search value or -1 if it isn’t found. We then take that index and use the splice() method.