Removing array items

To remove an item from an array there are various methods.

Imagine we have this array:

let myArray = ['fish', 'reptiles', 'owls', 'insects'];

The older methods are:

• pop() which removes the last item.
• shift() which removes the first item.
• splice() which can remove multiple items starting from a given position.

So

myArray.pop(); // removes insects
myArray.shift(); // removes fish
myArray.splice(2, 1); // removes owls

In the last, splice() example the first parameter, 2 is the position in the array and the second parameter, 1 is the number of items to remove. So starting from position 2 (with fish being at position 0) and removing 1 item we remove that third item which here is owls.

Removing based on value

Now here is where things get more complicated. There isn’t a simple method to remove an item based on it’s value, such as owls from our example:

let myArray = ['fish', 'reptiles', 'owls', 'insects'];

There are several ways to do this.

1. Using splice()

The first looks like this.

myArray.splice(myArray.indexOf('owls'), 1);

We get the position of owls and use it as the first parameter for the splice() method.

There is a risk with this method though in that if we don’t get the value exactly right things go wrong.

If say we use the value say of owl by mistake instead of owls being removed the last item is, in this case insects. So a safer way is to use an if statement to check that the value we used exists.

2. splice() with if

let index = myArray.indexOf('owls');

if (index > -1 ) {
    myArray.splice(index, 1);
}

If an item doesn’t exist in the array then indexOf() will return a value of -1. So here as long as the value of index is greater than -1 it must exist in the array. Only then do we remove it using splice().

3. A more modern way

The technique above works with older version of JS. However from ECMAScript 6 and above we can use the filter() method with an arrow function.

The filter() method creates a new array filled with elements that pass a test provided by a function.

Quote from W3 Schools

The filter() method is an iterator method. That is it loops through the array an operates on each item in the array one at a time. It works the same way as the more common forEach() method. Unlike forEach() however filter() creates a new array.

So how do we use filter() to remove one item?

const value = 'owls';
myArray = myArray.filter(item => item !== value)

So here instead of creating a new array with filter() we’re assigning it to the old array. The result of the callback function is filtered so that any item in the array which does not match the value given is kept. Or put another way the value that matches is discarded.

myArray = myArray.filter((item) => {
    return item !== value;
    })

It’s worth noting that the filter() method removes ALL items with that value unlike the splice() method above which removes only the first.

4. An even more modern way

This method makes use of the newer JS includes() method. The advantage is that you can filter out multiple items with different values..

let forDeletion = ['fish', 'owls', 'insects'];

let myArray = ['fish', 'reptiles', 'owls', 'insects', 'birds'];

myArray = myArray.filter(item => !forDeletion.includes(item))

Links

1. Much of this is based upon a StackOverflow post
2. W3 Schools on filter()