Javascript spread notation and deep copy of array of object explanation

Question

Consider the following code,

let a =[{b:{c:100}}]
let c = [...a]
c[0].b = {l:200}
console.log( a )

Output is:

Array [Object { b: Object { l: 200 } }]

Given c[0] is a new object and c[0].b is a reference. Changing the reference of b should not change the original object. Is there any explanation for this?

Does this answer your question? [What is the most efficient way to deep clone an object in JavaScript?](https://stackoverflow.com/questions/122102/what-is-the-most-efficient-way-to-deep-clone-an-object-in-javascript) — Anurag Srivastava, Apr 16 '20 at 10:08
If you have lodash in your App then you can also use `_cloneDeep` method which will work fine in your case. — Milind Agrawal, Apr 16 '20 at 10:11
@Anurag it answers how to do deep cloning in Javascript. I am asking for an explanation of javascript spread notation and object copying. — muhammad800804, Apr 16 '20 at 10:35
It answers how to achieve what you are expecting, for explanations there are various resources on the internet — Anurag Srivastava, Apr 16 '20 at 10:55
@anurag in your opinion this question is unnecessary. In my opinion, this question is necessary. — muhammad800804, Apr 16 '20 at 11:15

score 0 · Answer 1 · answered Apr 16 '20 at 10:09

The spread operator method only performs a deep copy of the array itself, and not the objects inside it. The objects in c are only by reference, and they point to the objects in a in reality.

The most reliable way remains using JSON.stringify and then JSON.parse. The catch is that there will be some data loss if you have special types in the array.

function clone(arr) {
  return JSON.parse(JSON.stringify(arr));
}

let a =[{b:{c:100}}]
let c = clone(a);
c[0].b = {l:200}
console.log( a )

score 0 · Answer 2 · answered Apr 16 '20 at 10:12

even if you use the spread operator the changes are done on the same reference. So in your json sample there is no date objects, so you can use this approach. if there is date object this approach won't work.

let c = JSON.parse(JSON.stringify(a));
c[0].b = {l:200}
console.log( a )

Javascript spread notation and deep copy of array of object explanation

2 Answers2