Delete nested property of cloned object with Object.assign() affect original object

Question

Is someone can explain me this behavior ?

const object1 = {
  a: {
    d : 1,
    e : 4
  },
  b: 2,
  c: 3
};

const object2 = Object.assign({}, object1);
console.log('object1 :', object1);
console.log('object2 :', object2);
delete object2.a;
console.log('object1 :', object1);
console.log('object2 :', object2);

If I delete a, only object2 is affected.

> "object1 :" Object { a: Object { d: 1, e: 4 }, b: 2, c: 3 }
> "object2 :" Object { a: Object { d: 1, e: 4 }, b: 2, c: 3 }
> "object1 :" Object { a: Object { d: 1, e: 4 }, b: 2, c: 3 }
> "object2 :" Object { b: 2, c: 3 }

And if I delete a nested property...

const object2 = Object.assign({}, object1);
console.log('object1 :', object1);
console.log('object2 :', object2);
delete object2.a.d;
console.log('object1 :', object1);
console.log('object2 :', object2);

Both object1 and object2 lose the property d.

> "object1 :" Object { a: Object { d: 1, e: 4 }, b: 2, c: 3 }
> "object2 :" Object { a: Object { d: 1, e: 4 }, b: 2, c: 3 }
> "object1 :" Object { a: Object { e: 4 }, b: 2, c: 3 }
> "object2 :" Object { a: Object { e: 4 }, b: 2, c: 3 }

Why ?

`Object.assign` creates only a same level copy, not the nested ones. — Nina Scholz, Mar 19 '18 at 09:08
Why is this question being downvoted ? I find it useful to understand Object.assign and delete — Logar, Mar 19 '18 at 09:16

score 3 · Answer 1 · answered Mar 19 '18 at 09:19

On examples section in the documentation of assign (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign):

Warning for Deep Clone

For deep cloning, we need to use other alternatives because Object.assign() copies property values. If the source value is a reference to an object, it only copies that reference value.

There are a specific example on how to deep clone an object:

JSON.parse(JSON.stringify(obj1))

And if you want more info about, there's an old thread on SO over this issue:

What is the most efficient way to deep clone an object in JavaScript?

Logar · Accepted Answer · 2018-03-19T09:24:08.810

When you are doing :

const object2 = Object.assign({}, object1);

You are assigning the properties of object1 to a new object, that will be stored in object2. In your case there is only one property of object1, that is a. But this is the same a that you put in object2 and that is in object1

Then, this line :

delete object2.a;

Just deletes the reference of the property a from object2. The property itself is not changed and will still exist if there are some other attached references to it.

In your second case, when you do :

delete object2.a.d;

you actually delete the reference of the property d from the object referenced by object2.a, which, remember, is the same as the object referenced by object1.a, so it indeed appears changed in both object1 and object2

In your second case you mutate the object a ? it means? – nisar Mar 19 '18 at 09:20 — nisar, Mar 19 '18 at 09:20

score 0 · Answer 3 · answered Mar 19 '18 at 09:34

0

Hi reffered from

You can use OBJECT COPY AS following

const object1 = {
  a: {
    d : 1,
    e : 4
  },
  b: 2,
  c: 3
};

const objecct2 = JSON.parse(JSON.stringify(object1));

answered Mar 19 '18 at 09:34

nisar

1,055
2
11
26

How is this different from @Marc answer ? – Logar Mar 19 '18 at 09:38
after I posted only I got page refreshed, So I have spend some time, So I do not want to delete. – nisar Mar 19 '18 at 10:07

Delete nested property of cloned object with Object.assign() affect original object

3 Answers3