DEV Community

Cover image for How to remove a specific item from an array
Johnny Simpson
Johnny Simpson

Posted on • Originally published at fjolt.com

How to remove a specific item from an array

One of the most frequent tasks we have to perform in Javascript is to remove a particular item from an array. However, it's not straight forward. There is no removeArrayItem method in Javascript, so we have to use alternative methods. Let's look at how to remove a particular array item in Javascript.

How to remove a specific array item in Javascript

Option 1: Using filter()

The easiest way with modern Javascript to remove a specific array item is using filter. Let's look at a simple example:

let myArr = [ "🍎", "🍏", "🍐", "🍍" ];

// Creates a new array without "🍍" - so [ "🍎", "🍏", "🍐" ]
let removedArr = myArr.filter((x) => x !== "🍍");
console.log(removedArr);
Enter fullscreen mode Exit fullscreen mode

This works great when we have an array where every element is unique. Unfortunately, it starts to break down if you only want to remove one item, and there are duplicates. Let's look at another example:

let myArr = [ "🍎", "🍏", "🍏", "🍍" ];

// Creates a new array without "🍏" - so [ "🍎",  "🍍" ]
let removedArr = myArr.filter((x) => x !== "🍏");
console.log(removedArr);
Enter fullscreen mode Exit fullscreen mode

Since we had two green apples, and the new array filters out all green apples, we actually remove two items when using this method. If we only want to remove one element, we have to use an alternative strategy.

Option 2: Use indexOf() and splice()

This method requires a few more lines, but it is slightly different in a few ways from the previous example:

  • First of all, it alters the original array - so we aren't making a copy here. The original array will be mutated
  • Secondly, it uses two functions - first we get the indexOf the array item to be removed, and then we splice the array to remove that single item.

Here is an example:

let myArr = [ "🍎", "🍏", "🍏", "🍍" ];
let getLocation = myArr.indexOf("🍏");
myArr.splice(getLocation, 1);
// myArr now becomes [ "🍎", "🍏",  "🍍" ];
console.log(myArr);
Enter fullscreen mode Exit fullscreen mode

This example may be preferable in some situations, but ultimately you'll need to decide what works best in your own code.

Conclusion

Although there is no straightforward way to remove an item from an array in Javascript, we do have two tools that give us enough flexibility to cover pretty much any use case regarding array item removal. If you want to learn more quick array tips, check out my array tips guide here.

Discussion (5)

Collapse
jcubic profile image
Jakub T. Jankiewicz

IndexOf and splice will not work with objects. For this you can use Array::findIndex

let arr = [{x: 10}, {x: 20}, {x: 30}]
let index = arr.findIndex(item => item.x == 20);
arr.splice(index, 1);
Enter fullscreen mode Exit fullscreen mode
Collapse
smpnjn profile image
Johnny Simpson Author

true good point.

Collapse
jonrandy profile image
Jon Randy • Edited on

Or just use filter to only remove the first match:

let myArr = [ "🍎", "🍏", "🍏", "🍍" ];
let removedArr = myArr.filter((r=>x=>r||!(r=x==="🍏"))())
console.log(removedArr);  // [ "🍎", "🍏", "🍍" ]
Enter fullscreen mode Exit fullscreen mode
Collapse
jcubic profile image
Jakub T. Jankiewicz • Edited on

Interesting usage of closure to create blank variable name, but it's confusing as hell. I hope you don't write code like this, otherwise after a year you will spend few moments to figure out what the help is this.

It also doesn't make much sense to use filter for this case if it will iterate over every element even if it just nop. The reason why indexOf is used because it's faster if you want to remove first instance. If array have million items it your code will execute million times even if item is first on the list.

Collapse
jonrandy profile image
Jon Randy • Edited on

I agree it doesn't make sense to use filter for this, I was just pointing out it was perfectly possible despite what the OP said.

Also, I love writing code like this - code that challenges and exercises the grey matter. It's like code poetry. Sometimes not the best plan in production though 😋