Remove items from an array in Javascript

Many of the simplest things are the ones that give us the most headaches, despite having many years of experience in the world of web development, I still have to Google the most basic things practically every day. That's why I've decided to simply create my own version of these tips, so I have a reference on my site when I inevitably have to look them up again, this time. Remove items from an array in Javascript.

#Remove an item using .splice()

The .splice() method is probably the easiest way to manipulate arrays, it allows us to add, replace, or remove a certain element based on its index, example:

1const array = ['foo', 'bar', 'baz'];
2// Starting at position 1, remove the next element
3const removedElement = array.splice(1, 1);
4// [ 'foo', 'baz' ]
5console.log(array);
6// [ 'bar' ]
7console.log(removedElement);
8

The advantage of this method is: It doesn't remove the element from the array, it moves it. Basically the method returns any value that has been removed from the array, in this case we store it in a new constant, for future use.

Another point to note, is that we can remove several elements using this same method, we just need to increase the quantity in the second argument.

1const array = ['foo', 'bar', 'baz'];
2// Starting at position 1, remove the next two elements
3const removedElement = array.splice(1, 2);
4// [ 'foo' ]
5console.log(array);
6// [ 'bar', 'baz' ]
7console.log(removedElement);
8

#Remove the last item using .pop()

The .pop() method is something like the opposite of .push(), while .push() Adds a new element to the end of an array, .pop() removes the last element from an array, example:

1const array = ['foo', 'bar', 'baz'];
2// Remove the last element from the array
3const removedElement = array.pop();
4// [ 'foo', 'bar' ]
5console.log(array);
6// 'baz'
7console.log(removedElement);
8

Like .splice(), .pop() will return the “removed” element so we can use it in the future. However, note that this time we receive a string, and not an array.

#Remove the first item using .shift()

The .shift() method is the opposite of .unshift(), and these in turn are opposite to .pop() and .push(), while the latter work at the end of the array, the former do their magic at the beginning of the array.

.shift() will remove the first element in our array, example:

1const array = ['foo', 'bar', 'baz'];
2// Remove the first element from the array
3const removedElement = array.shift();
4// [ 'bar', 'baz' ]
5console.log(array);
6// 'foo'
7console.log(removedElement);
8

Once again, note that the value we receive is a string

#Remove an item based on its value

So far we have seen how to remove elements based on their index, but what happens when we need to remove something based on its value?

The procedure is similar, but in this case we need to first find the index of the element with that value.

To find the index we can use .indexOf(), and we use it in conjunction with .splice(), example, let's remove “bar”:

1let array = ['foo', 'bar', 'baz'];
2let removedElement;
3// Remove the first instance of 'bar'
4if (array.indexOf('bar') > -1) {
5  removedElement = array.splice(array.indexOf('bar'), 1);
6}
7// [ 'foo', 'baz' ]
8console.log(array);
9// [ 'bar' ]
10console.log(removedElement);
11// Reset for the next example
12let index;
13array = ['foo', 'bar', 'baz', 'bar'];
14// Remove all instances of 'bar'
15while ((index = array.indexOf('bar')) > -1) {
16  removedElement = array.splice(array.indexOf('bar'), 1);
17
18  // [ 'bar' ]
19  console.log(removedElement);
20}
21// [ 'foo', 'baz' ]
22console.log(array);
23

Note the comparison to make sure the index exists, if it doesn't exist, it will return -1. Usually a failed comparison would return 0, (translating to false), but since arrays start at index 0, it wouldn't help us much, right?

#Remove items using .filter()

Finally, we can use the .filter() method to create a new array with the desired values, technically this method does not remove the elements from the array, since the original array does not change. Example, let's create a new array without “bar”:

1const array = ['foo', 'bar', 'baz'];
2// Returns everything that is not "bar"
3const newArray = array.filter((element) => element !== 'bar');
4// [ 'foo', 'baz' ]
5console.log(newArray);
6// [ 'foo', 'bar', 'baz' ]
7console.log(array);
8

#Conclusion

So we can see that, like many things in life (and in Javascript), despite not being as simple as it should be, there are many ways to achieve our goal, so I hope these ways of removing elements from an array in Javascript are useful to you.