How to remove an element from an array

tl;dr:

const myArray = ['a', 'b', 'c', 'd'];

myArray.splice(3, 1); // ['d']

console.log(myArray); // ['a', 'b', 'c']

myArray.splice(3, 1) removes the element at index 3. See docs.

Explanation:

Let’s say we have a simple array of strings, like this one:

var a = ['foo', 'bar', 'baz'];

We just want to remove that 'bar' element. How can we do this?

For the principle of least surprise, you could expect Array to have a remove function:

a.remove('bar');
>>> ['foo', 'baz']

The bad news? JavaScript does not have such a function.

The good news? We can create it!

But, first of all, let’s see how this is done in the standard way:

a.splice(1, 1);
>>> ['bar']
a
>>> ['foo', 'baz']

What does this splice function do? Simple: it just removes the element at index 1. The first parameter is, indeed, the index, and the second is the number of elements to remove, starting from that index. This is all you need to know about splice. If you’re curious to see what other cool things splice can do, see the MDN documentation.

But what if I don’t know the index?

Oh well, you can get it. Just use indexOf, this way:

a.indexOf('bar');
>>> 1

Please note that Internet Explorer 8 and below versions don’t support it (you can use a polyfill, though).

Extending the Array object

This is the function I finally came up with.

// Removes an element from an array.
// String value: the value to search and remove.
// return: an array with the removed element; false otherwise.
Array.prototype.remove = function(value) {
var idx = this.indexOf(value);
if (idx != -1) {
    return this.splice(idx, 1); // The second parameter is the number of elements to remove.
}
return false;
}

I know some folks out there don’t feel comfortable with extending Array, because they say Bad Things™ could happen. However, I think that a remove function is just a lot more easy to use and remember than splice, and honestly I don’t see any drawbacks with this approach; especially if we protect the global Array object, somehow. What do you think?

Full example (from the browser’s console, as usual):

var myArray = ['foo', 'bar', 'baz'];
>>> undefined
myArray.length
>>> 3
myArray.remove('bar');
>>> ["bar"]
myArray
>>> ["foo", "baz"]
myArray.remove('baz');
>>> ["baz"]
myArray
>>> ["foo"]
myArray.length
>>> 1
myArray.remove('qux');
>>> false

Awesome! But… why can’t I just use the delete keyword?

Oh, so you’ve heard of that magical JavaScript keyword too, haven’t you? You can do cool things with it, like:

var a = ['foo', 'bar'];
delete a[1];

And it will Just Work™. By the way it has a flaw: it doesn’t simply remove that element from the array, but it actually replaces it with undefined. Example:

var a = ['foo', 'bar', 'baz'];
>>> undefined
delete a[1];
>>> true
a
>>> ["foo", undefined, "baz"]

Leaving place for undesirable things, like:

a.length
>>> 3   // it should be 2!

In conclusion, if you don’t care about the drawbacks, you can use the delete keyword; otherwise go with the solution explained above.