Shouldn't using spread syntax not reference the original array?

Question

I have an Object array in my state called names, i'm trying to make a copy of this array to another Object array in state called shuffledNames, but when i shuffle the shuffledNames using the code below, the original names changes the ids to match the new shuffled ids. See images below for an example. I've tryed using .concat(), .slice(). I do not know what to try anymore.

handleSort = () => {
  let tempName = [...this.state.names];

  let shuffledNames = tempName;

  for (let i = shuffledNames.length; i-- > 1; ) {
    let j = Math.floor(Math.random() * i);
    let temp = shuffledNames[i];
    shuffledNames[i] = shuffledNames[j];
    shuffledNames[j] = temp;
  }

  shuffledNames.forEach((shuffledName, index) => {
    shuffledName.id = index;
  });

  this.setState({ shuffledNames: shuffledNames });
};

This is my state before shuffling

This is my state after shuffling

No images of code, or object descriptors please. Enter the text and format it. — trincot, Dec 04 '21 at 11:57
@trincot in the pictures that's not really my code, but it's chrome's react debugging — Gabriel Terceiro, Dec 04 '21 at 12:05
I know. But Chrome's console is not an image. It presents text you can copy. Even better is to output the JSON representation and copy that text and format it. — trincot, Dec 04 '21 at 12:07

score 1 · Answer 1 · answered Dec 04 '21 at 11:55

The spread operator is a shallow clone, so it's a new array but the same values which are object references, not new objects. You need to find or code your own clone or deep copy function. Last one I used was randa's clone function but that was because someone else on my team had already imported that library.

Shouldn't using spread syntax not reference the original array?

1 Answers1