JavaScript: Four Ways to Remove a Value From an Array

An array is an ordered data type that stores multiple values. What this means is that each item in the array has a numeric identifier—an index—that is used to reference its place in line.

Arrays begin with an index of 0 that increments by 1 for each value. To reference a value in the array, use the appropriate index within square brackets [].let numbers = [10,20,30,40];// print a value with an explicit index
console.log(numbers[0]); # 10
console.log(numbers[1]); # 20
console.log(numbers[2]); # 30
console.log(numbers[3]); # 40// alternatively, use a for loop
for(let i=0; i<numbers.length; i++) {
  console.log(numbers[i]);
}

Now, what if we want to remove a value in our array? Here are four techniques to remove a value from the array. Each technique has a time and a place, which will be described below.

Note: All four techniques can be done natively without importing any additional libraries.

Use the Delete Keyword

If you want to go simple, the easiest method for clearing a value in an array is to use the delete keyword. Simply use the variable name along with the index you wish to clear.let numbers = [1,2,3,4];delete numbers[1];
console.log(numbers); // [1, undefined, 3, 4]

Be careful, though. While this method seems easy enough, it often produces a headache because now your array has a hole left behind.

The important takeaway from the delete technique is that when deleting a value from an array, the secondary question—do I need to reindex my array?—must be answered.

Use the .pop() Method

Need to remove the largest index value from an array? Want to reindex the array so there’s not an undefined index at the end? Then the .pop() method is just what the doctor ordered.let numbers = [1,2,3,4];numbers.pop();
console.log(numbers); // [1,2,3]

Use the .splice() Method

Maybe you want to remove a certain value from the array rather than a specific index. If that’s the case, and you’re OK with reindexing the array, the .splice() method is a good candidate.

Splicing an array will create a new array that removes a number of value(s) and default everything to the right, starting at a specific index.let numbers = [1,2,3,4];numbers.splice(2);
console.log(numbers); // [1,2]

If you only want to delete that one value, use the second (optional) parameter in the splice() method.let numbers = [1,2,3,4];numbers.splice(2,1);
console.log(numbers); // [1,2,4]

Notice we didn’t print the result of the splice immediately. That’s because the values removed will be returned by the method.let numbers = [1,2,3,4];console.log(numbers.splice(2,1)); // [3]

This is great and all, but in real-world examples, you probably can’t hardcode an index value. So let’s use the .indexOf() method to find the index of a value based on a condition.// delete the value 3 from the array
let numbers = [1,2,3,4];
i = numbers.indexOf(3);if(i >= 0) {
  numbers.splice(i,1);
}console.log(numbers); // [1,2,4]

The if condition in the code example is needed to verify that we found the value in the array. The indexOf() method will return -1 when the value is not found. Thus, if i is greater than or equal to 0, then it was found in the array.

Use the .filter() Method

While .splice() is handy for finding and removing a single value, sometimes you want to remove all occurrences of a value (or condition) from an array. In these scenarios, the .filter() method is your friend.

The method takes a function as an argument and will keep values that evaluate to true in the filter function. In order to filter out a specific value, we have to check for the negative case.let numbers = [1,2,3,4];numbers = numbers.filter((n) => {return n != 3});
console.log(numbers); // [1,2,4]

Notice we have to reassign numbers to themselves. This is because unlike the splice() method, filter() will return the new array rather than perform the action on the original data.

Conclusion

These are not the only four methods for deleting a value from an array, but this gives you a great lay of the land to choose your own preferred method or to create your own technique.