I'm studying JavaScript about array assignment and cloning. I've tried to use spread operator "..." to clone the array A's elements to array B. However, why the Array A's element also changes when I modify B's elements ?
For example :
A = [{id:1, value:3},{id:2, value:1}];
B = [...A];
B[0].value = 4;
console.log(A[0].value);//the output changes to 4, not 3
I found that when cloning normal array, it won't happen this issue:
A = [3, 1];
B = [...A];
B[0] = 4;
console.log(A[0]);//the output is still 3
I know that in JavaScript, one of the purpose of cloning is to avoid two variables reference to the same memory, but why element in A would also be modified in the example?
If I misunderstand any concepts, hope you can help me to figure it out, or if there are any similar issues that were asked and solved before, it would be grateful that you can share the link.
Spread Operator or Object.assign() both does shallow cloning upto one level only. For deep cloning you may need to use a popular library called loadash and there you have a deepClone() function which you can use.
Also a very common trick that we use for JSON data, like you have (no functions etc) is we do the following:
let deepClone = JSON.parse(JSON.stringify(nodesArray));
So you may try this as well :)
The reason for that behavior is that in the first example you have an array of objects, which are reference variables as well.
You are creating new instance of an array itself, but you are not creating new objects. Instead of that, you passing reference to the same objects, which were used in the first array.
Spread creates a new reference for the array. But it only does one level of cloning.
Now array A and array B point to different references.
But in case of objects (1st case), the items inside the array are still pointing to the same reference. This does not happen with primitive (2nd case). That is why doing B[0] affects the first element of array B which is a primitive and replaces it.