JavaScript Array Splice Issue

#javascript #array #splice #webdev

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!

Top comments (6)

EmNudge • Aug 15 '19

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 • Aug 15 '19

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

Alex K. • Aug 16 '19

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 • Aug 16 '19

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!