9

I have been watching the video on redux from Dan Abramov avoiding-array-mutations and I have worked out how to use slice to remove an element from an array by id, returning the new array without mutation.

var arrayOld = ['apple', 'orange', 'fig']
var index = arrayOld.indexOf('orange')
var arrayNew = arrayOld.slice(0,index).concat(arrayOld.slice(index + 1))
// ['apple', 'fig']

I was wondering how I would do the same using es6 spread syntax?

Also I am wondering why there is not a simpler way: e.g. a helper function in es6 to do this, something that works as simply as the concat method, where you could just pass in the id of the element to remove and it returns the new array, so basically splice but without the mutation.

2
  • [...arr] is the same as arr.slice(), you could "slice and splice" for no side effects removal
    – Paul S.
    Commented Jun 14, 2016 at 7:21
  • in the video he show you this way of doing it with array spread [...arrayOld.slice(0,index), ...arrayOld.slice(index+1)] Commented Mar 8, 2017 at 4:00

4 Answers 4

18

As @thefourtheye already mentioned it is better to use .filter for your example.

However, if you want to remove an element by index using spread operator you can do the following:


let arrayOld = ['apple', 'orange', 'fig']
let index = 1;
let arrayNew = [...arrayOld.slice(0, index), ...arrayOld.slice(index + 1)];
console.log(arrayOld);
console.log(arrayNew);
13

Why don't you filter it?

console.log(['apple', 'orange', 'fig'].filter(item => item !== 'orange'));
// [ 'apple', 'fig' ]

This returns a new array, with only the elements which satisfy the predicate function.


Note: This cannot be used as is to remove just one element, or only an element at a particular index. If that is the case, you can simply do it like this

var index = arrayOld.indexOf('orange')
console.log(arrayOld.filter((item, idx) => idx !== index));

The second parameter passed to the predicate function is the actual index of the element in the array.

2
  • Storing filtered indices would probably be cleaner than filtering with an index in mind let indices = []; arr.filter((e, i) => {if (e === foo) {indices.push(i); return false;}return true;});
    – Paul S.
    Commented Jun 14, 2016 at 7:26
  • Should be noted here that filter will scan the entire array, which unperformant with a large array, and isn't necessary if you actually have the index (for example, if you saved it off while building the array). In this case, answer provided by Oleksil is much better, as it runs in O(n). Commented Dec 16, 2019 at 21:19
1

Well i had given some thought on this subject before since in functional JS some of the array methods are not well thought. So sometims they have to be tweaked a little bit... There are two issues

  1. You shouldn't mutate what is not yours.
  2. You should return something appropriate.

So for instance when deleting an item, depending on your use case you might want to pass the deleted item or the resulted array as an argument to a function while not mutating the original array. So in this particular case you have two options such as the one like you have mentioned

myFunction(myArr.slice(0,i).concat(a.slice(i+1))) // pass resulting array as argument

or another way to have the deleted item as result.

myFunction(a.slice().splice(i,1)[0]) // pass deleted item as an argument
1

Destructuring might be what you are looking for

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

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.