Javascript - How can I change one list without modifying the other

Question

I have the following code:

const heroes = [
  { name: 'Wolverine',      family: 'Marvel',    isEvil: false },
  { name: 'Deadpool',       family: 'Marvel',    isEvil: false },
  { name: 'Magneto',        family: 'Marvel',    isEvil: true  },
  { name: 'Charles Xavier', family: 'Marvel',    isEvil: false },
  { name: 'Batman',         family: 'DC Comics', isEvil: false },
  { name: 'Harley Quinn',   family: 'DC Comics', isEvil: true  },
  { name: 'Legolas',        family: 'Tolkien',   isEvil: false },
  { name: 'Gandalf',        family: 'Tolkien',   isEvil: false },
  { name: 'Saruman',        family: 'Tolkien',   isEvil: true  }
]

var newHeroes = heroes.slice(0);

newHeroes[0] = { name: 'Test', family: '2', isEvil: false };
newHeroes[1].name = 'Test 2';

console.log(newHeroes);
console.log(heroes);

As soon as I'm slicing the first array, I expected the second to be a non-memory copy of the heroes const. So, whenever I change the newHeroes array, I thought that the first one wouldn't change.

When I change the entire content (like newHeroes[0] = Object), it works perfectly. This changes the second array only.

But when I try to change the property directly (newHeroes[1].name = 'Test 2'), it changes in both arrays.

Does anybody could explain me why?

Thank you! :-)

`slice()` creates a shallow copy, but each index still points to the same objects. — Patrick Roberts, Feb 19 '18 at 21:57
@Ele `heroes !== newHeroes` but `heroes[index] === newHeroes[index]` after the initial shallow copy. — Patrick Roberts, Feb 19 '18 at 21:58
@PatrickRoberts here the OP has two arrays with references to the same object. Your statement confuses even more. — Ele, Feb 19 '18 at 21:59
var fullconedata = JSON.parse(JSON.stringify(data)); // is working, but slowly — Lapapa, Feb 19 '18 at 21:59
@Ele since you are so confused, `1` is an index. I am saying that `newHeroes[1].name = 'Test 2'` _also_ modifies `heroes[1].name` because "each index" of `newHeroes` is a reference to the respective object referenced by each index of `heroes`. There is nothing wrong with my statement. — Patrick Roberts, Feb 19 '18 at 22:04

score 1 · Accepted Answer · answered Feb 19 '18 at 22:00

You need to create a deep copy of your array since your array is composed of objects which in turn hold their own references. Slice will just create a shallow copy. You can do something like this:

const heroes = [
  { name: 'Wolverine',      family: 'Marvel',    isEvil: false },
  { name: 'Deadpool',       family: 'Marvel',    isEvil: false },
  { name: 'Magneto',        family: 'Marvel',    isEvil: true  },
  { name: 'Charles Xavier', family: 'Marvel',    isEvil: false },
  { name: 'Batman',         family: 'DC Comics', isEvil: false },
  { name: 'Harley Quinn',   family: 'DC Comics', isEvil: true  },
  { name: 'Legolas',        family: 'Tolkien',   isEvil: false },
  { name: 'Gandalf',        family: 'Tolkien',   isEvil: false },
  { name: 'Saruman',        family: 'Tolkien',   isEvil: true  }
]

var newHeroes = heroes.reduce((newArr, hero) => {
  newArr.push({...hero}); // creating a shallow copy of this object
  return newArr;
}, [])

newHeroes[0] = { name: 'Test', family: '2', isEvil: false };
newHeroes[1].name = 'Test 2';

console.log(newHeroes);
console.log(heroes);

This will only solve the problem with array of shallow objects. If any object has a nested object, this method will fail. A recursive solution is required in order to make a deep copy. — Boris Lobanov, Feb 19 '18 at 22:04
Yea that's correct (note I put a comment that said that this is a shallow copy of the object). I was just answering his use case. There are a million stack-overflow answers for creating deep copies. This is sufficient for this use case though. — Steven Scaffidi, Feb 19 '18 at 22:06

Javascript - How can I change one list without modifying the other

1 Answers1