Remove element from array (splice)

Question

Basic question on .splice() method, and how best to remove an element from an array.

I want to remove an item from an array with .splice() but when I do, I want to have the original array minus the removed element returned. .splice() returns the removed element instead.

var arr = [1, 2, 3, 4, 5, 6, 7]
var newArr = arr.splice(3, 1)
console.log(newArr) // [4]
// whereas I want [1, 2, 3, 5, 6, 7]

What's the best, and most eloquent way to do this?

• gelliott181: If you log arr, you'll find the elements have been removed from it. They've been returned and assigned to newArr by the splice function.

Answer 1

.splice mutates the array in place and returns the removed elements. So unless you actually need a function that returns the array itself, just access arr:

var arr = [1, 2, 3, 4, 5, 6, 7]
arr.splice(3, 1)
console.log(arr) // [1, 2, 3, 5, 6, 7]

---

You can create a wrapper function that performs the splice and returns the array:

function remove(arr, index) {
 arr.splice(index, 1)
 return arr;
}
var newArr = remove(arr, 3);
// Note: `newArr` is not a new array, it has the same value as `arr`

---

If you want to create a new array, without mutating the original array, you could use .filter:

var newArr = arr.filter(function(element, index) {
 return index !== 3;
}); // [1, 2, 3, 5, 6, 7]
arr; // [1, 2, 3, 4, 5, 6, 7]

• Rayon: arr is updated array right ? Why not just use it ?
• Felix Kling: @Rayon: Ask the OP ;) But yeah, maybe they didn't know about that, let me clarify that.
• Rayon: I thought that is the first thing to suggest.. If he is asking, he does/may not know how it is...
• Felix Kling: @Rayon: Well, they say they want that a function that returns the array. There could be use cases where something like this makes sense.
• Rayon: – Yeah! Very much possible... :)

Answer 2

Using the spread operator, you can do:

var arr = [1,2,3,4,5,6],
 indexToRemove = 3,
 newArr = [
 ...arr.slice(0,indexToRemove),
 ...arr.slice(indexToRemove+1)
 ]

Or if you want to use ES5, it can look something like:

var arr = [1,2,3,4,5,6],
 indexToRemove = 3,
 newArr = [].concat(arr.slice(0,indexToRemove)).concat(arr.slice(indexToRemove+1))

• Felix Kling: Lets call it spread element, not spread operator. It's not an operator, even if MDN says so.
• Paulos3000: Have seen this method before. It's a bit verbose for this situation but I agree that could be useful in other, perhaps more complex scenarios.
• Felix Kling: What you are suggesting can be done by just using .filter, which amounts to less code and doesn't generate unnecessary intermediate arrays: newArr = arr.filter((_, i) => i !== indexToRemove)