How can you remove a specific item from an array?

Quick summary

This tutorial will cover the .splice() and .indexOf() array methods and their application in removing a specific item from an array in JavaScript.

It's the year 3025. Humanity has finally got out of the solar system and is now exploring new frontiers. Unfortunately, JavaScript still has not got a .remove() method.

Let's start with a simple array. The contents or data types inside of it don't matter.

const numbers = [1, 5, 2, 5, 3, 5]

Now, suppose we need to remove the number 2. Let's see how to do that:

Example 1 - Remove one occurrence

const removeItem = (arr, val) => {
    const index = arr.indexOf(val)
    if (index > -1) {
        arr.splice(index, 1)
    }
    return arr
}

removeItem(numbers, 2)

console.log(numbers)
// [1, 5, 5, 3, 5]

So, as you can see, we have declared a new function called removeItem().

This function takes two parameters:

• The array that we want to modify
• The value we have to remove

First, we want to see if that value exists in the array. We do that with the .indexOf() array method.

The .indexOf() method applied to any array will return the index of a given value if it exists in the array. If it doesn't, it will return -1.

After that, we create a condition that checks that the index value does exists.

If it exists, we apply the .splice() method to remove it from the array, and once everything is done, we return the resultant array.

.splice()

.splice() is a powerful method that allows us to change the contents of an array by removing and adding elements to it.

Remember. It does so by mutating the original array.

In this case, we passed two parameters:

• The start index from where we will start making changes
• The delete count

That means that in our use of the .splice() method, we are just telling it to remove the element on the given index.

What if we want to remove all the matching items?

Example 2 - Remove all occurrences V1

Let's see how to do that:

const removeAllItems = (arr, val) => {
    let i = 0
    while (i < arr.length) {
        if (arr[i] === val) {
            arr.splice(i, 1)
        } else {
            ++i
        }
    }
    return arr
}

removeAllItems(numbers, 5)

console.log(numbers)
// [1, 3] notice the missing 2. Remember that .splice() mutates the array and we already removed the number 2.

So, here we are applying .splice() in the same way. The only difference is that we are iterating over the array to work over all the elements and see if they are occurrences of the item we want to delete.

Now, notice that we are not using a for loop. The only reason for that is that we don't want to increment our index if we remove it from the array. That would make our function skip some elements, and we don't want that.

Let me show you another way of removing all the occurrences of an item in an array.

Example 3 - Remove all occurrences V2

const numbers2 = [1, 2, 3, 2, 4]

const removeAllItems2 = (arr, val) => {
    return arr.filter(item => item !== val)
}

const newNumbers = removeAllItems2(numbers2, 2)

console.log(numbers2)
// [1, 2, 3, 2, 4]. No mutation

console.log(newNumbers)
// [1, 3, 4]

This is my personal favorite. We are using the .filter() method to return a new array.

The filter method iterates over all the elements in an array and, in this case, if the element is not equal to the value we want to remove, it will add it to a new array, and after it finishes, it will return the new array.

This is an excellent option if you don't want to mutate the original array.

Wrapping up

So there you go. We just saw three methods to remove a specific item for an array, either to remove one occurrence or all of them. I hope this helps you on your development journey. Thanks for reading!

This article was first published on devcore.io. go check it out!