CuteMachine

How To Remove Items From An Array In JavaScript

There are many ways to remove items from a JavaScript array. In this article, we will look at the most popular solutions.

Some of the examples mutate the array, and other solutions return a new array. Please be aware that when a new array is returned, it is most often only a shallow copy of the original collection. Working with shallow copies might be a problem when your array's elements are objects.

You can run all examples in this article with the excellent RunJS REPL.1

Remove The First Array Element

const a = ['foo', 'baz', 'bar']
a.shift()   // 'foo'
a           // ['baz', 'bar']

This solution mutates the array a.

You also can use JavaScript Destructuring and the rest element to remove the first element of an array. This solution returns a new array and leaves the source collection untouched.

const a = [1, 2, 3]
const [, ...b] = a
a    // [ 1, 2, 3 ]
b    // [ 2, 3 ]

Remove The Last Array Element

const a = [ 'foo', 'baz', 'bar' ]
a.pop()   // 'bar'
a         // [ 'foo', 'baz' ]

This code mutates the array a.

Remove An Array Element At A Specific Index

The two functions slice() and splice() are often used to remove elements by index.

splice() mutates the array. Mutating an array is often considered bad practice.

const a = [ 'foo', 'baz', 'bar', 'qux' ]
a.splice(2, 1)   // [ 'bar' ]
a                // [ 'foo', 'baz', 'qux' ]

Therefore you often see recommendations to use slice(), which returns a new array and leaves the original collection untouched.

const a = [ 'foo', 'baz', 'bar', 'qux' ]
const i = 3    // Index of element to remove
const b = a.slice(0, i - 1).concat(a.slice(i, 4))

a    // [ 'foo', 'baz', 'bar', 'qux' ]
b    // [ 'foo', 'baz', 'qux' ]

But there is also a risk when using slice(). When it returns a new array, the copied elements within that array are shallow copies. Although you have a copy of the original collection, its items may reference the same object. Here is an example that illustrates the danger.

const a = [ { name: 'foo'}, { name: 'baz'}, { name: 'bar'}, { name: 'qux'} ]
const i = 3    // Index of element to remove
const b = a.slice(0, i - 1).concat(a.slice(i, 4))

a    // [ { name: 'foo' }, { name: 'baz' }, { name: 'bar' }, { name: 'qux' } ]
b    // [ { name: 'foo' }, { name: 'baz' }, { name: 'qux' } ]
a[0] // { name: 'foo' }
b[0] // { name: 'foo' }
a[0].name = 'Wobble'
a[0] // { name: 'Wobble' }
b[0] // { name: 'Wobble' }   Oops!

Remove All Occurrences Of A Single Value From An Array

To remove all occurrences of an element from an array in JavaScript, I like to use the filter() method.

const elementToRemove = 'Track'
const a = [ 'Tick', 'Trick', 'Track', 'Tick', 'Trick', 'Track' ]
const b = a.filter((element) => element !== elementToRemove) 
a    // [ 'Tick', 'Trick', 'Track', 'Tick', 'Trick', 'Track' ]
b    // [ 'Tick', 'Trick', 'Tick', 'Trick' ]

This solution creates a new array with shallow copies of elements from the original collection a.

Remove All Occurrences Of Multiple Values From An Array

If you need to remove multiple values from an array, you can also use the filter() method combined with the includes() method.

const elementsToRemove = ['Tick', 'Mickey']
const a = [ 'Tick', 'Trick', 'Tick', 'Daisy', 'Mickey', 'Goofy' ]
const b = a.filter((element) => !elementsToRemove.includes(element)) 
a    // [ 'Tick', 'Trick', 'Tick', 'Daisy', 'Mickey', 'Goofy' ]
b    // [ 'Trick', 'Daisy', 'Goofy' ]

Again, a new array is returned with shallow copies of the array's elements (which makes no difference in the above example, because we do not use any objects in the source array).

Remove Duplicates From An Array

I have written an article about How To Remove Duplicates From An Array With Set.

How to Remove Elements From An Array With Lodash.

Lodash is my favorite JavaScript utility library. With Lodash, it is straightforward to write concise and readable code.

import without from 'lodash/without'

const a = [ 'Tick', 'Trick', 'Tick', 'Daisy', 'Mickey', 'Goofy' ]
without(a, 'Tick')    // [ 'Trick', 'Daisy', 'Mickey', 'Goofy' ]

This solution returns a new array. If you are looking for a solution that mutates the array, you can use pull() from Lodash.

import pull from 'lodash/pull'

const a = [ 'Tick', 'Trick', 'Tick', 'Daisy', 'Mickey', 'Goofy' ]
pull(a, 'Tick')    // [ 'Trick', 'Daisy', 'Mickey', 'Goofy' ]

  1. Run Eval Print Loop

Posted on CuteMachine.

Jo's Profile ImageWritten by Jo who lives and works in Frankfurt building digital doodah. Stalk him on Twitter.

TOS • Privacy • Disclaimer