JavaScript Array Splice Issue

This is an issue that cropped up for me today: I was splicing a name out of an array and was getting the wrong result back. The issue was a simple one with a quick fix that took me several hours to track down what was going on.

Now that I've seen the answer, it's obvious ... at the time I was seeing the issue, it was frustrating to say the least.

Finding a good way to query the issue (couldn't come up with good search terms) led me to creating this article.

I wrote the following code ...

triggerDelete: async (name) => {
  let stored = ['one', 'two', 'three', 'four', 'five'];
  stored = stored.splice(stored.indexOf(name), 1);
  return stored;
}

I've simplified it some. The issue was simple, when I passed in 'two' the array returned was ...

triggerDelete('two');

/*
 * returns ['two'], not ['one', 'three', 'four', 'five']
 */

I expected ['one', 'three', 'four', 'five'] to be the array returned.

... after two hours of searching and finally asking for a second pair of eyes, the solution was ...

triggerDelete: async (name) => {
  let stored = ['one', 'two', 'three', 'four', 'five'];
  stored.splice(stored.indexOf(name), 1);
  return stored;
}

Quite simply, the issue was that I was not changing the array, I was assigning the result of the splice back into the stored variable; hence, ['two'] ...

Hopefully this article will save someone else some of the pain I felt down the road!

Comments

[EmNudge]

Array in-place mutation gets really annoying at times for this very reason.
Many array methods are a toss up between returning a new array and mutating the old one.

Here is a quick list of array methods that mutate in place. All other array methods do not.

• Array.prototype.pop()
• Array.prototype.push()
• Array.prototype.shift()
• Array.prototype.unshift()
• Array.prototype.reverse()
• Array.prototype.sort()
• Array.prototype.splice()

When dealing with removing an item from the array, I generally like to do an immutable version for the reason described above in the post. So instead of

const arr = ['one', 'two', 'three', 'four', 'five'];
arr.splice(arr.indexOf(name), 1);

I would use

const arr = ['one', 'two', 'three', 'four', 'five'];
const newArr = arr.filter(item => item !== name);

[bob.ts]

Excellent information ... now to retrain an old brain to remember the .filter ... Thanks!

[Alex K.]

When I get issues like this, the first thing I do is go to MDN and check what's the return value of the mehtod Im using is (or if there's any at all) :)

[bob.ts]

Yeah ... I should be thinking that route. I struggled with finding a good set of search terms to describe my issue. This method usually works extremely well for me.

I'll definitely keep your idea in mind for the next time I get bogged down like this!

Thanks!

[Stephen Chiang]

You could use slice instead too.

[bob.ts]

Absolutely ... this was just the issue I had at the time.