Delete property in referenced JS object

Let's say I want to delete a property in a JS object

const source =
nestA:
nestB:
nestC: 'deleteMe'



const clone =
clone.nestA = ...source.nestA
delete clone.nestA.nestB
console.log(source)

execute above script

expect: source remain untouched

actual: source will become

source

source

However, if I just do delete clone.nestA, source will remain untouched as expected

delete clone.nestA

source

Question: How come delete clone.nestA.nestB affect source. But delete clone.nestA doesn't?

delete clone.nestA.nestB

source

delete clone.nestA

...source.nestA

source.nestA

source

nestA:

2 Answers
2

How come delete clone.nestA.nestB affects source, but delete clone.nestA doesn't?

delete clone.nestA.nestB

source

delete clone.nestA

source and clone are distinct objects. A third object is referenced from both the source.nestA property and the clone.nestA property. (Another object is on the nestB property of that).

source

clone

source.nestA

clone.nestA

nestB

When you delete a property on source, like the source.nestA property, you only affect the source object.

source

source.nestA

source

When you delete a property on the third object, like source.nestA.nestB or clone.nestA.nestB (which is the same property on the same object), you only affect that third object. It's just that both source and clone now reference that object which misses a property.

source.nestA.nestB

clone.nestA.nestB

source

clone

You can use assign method of objects to create deep copy in that way your source can be untouchable.

let deepCopy = Object.assign(,source);
// do anything with deepCopy.


Update -
It will not create a deep copy of nested object. You can use below method to create a deep copy for nested object.

let deepCopy = JSON.parse(JSON.stringify(source));

Or

function cloneObject(obj)
var clone = ;
for(var i in obj)
if(obj[i] != null && typeof(obj[i])=="object")
clone[i] = cloneObject(obj[i]);
else
clone[i] = obj[i];

return clone;



Check

const source = nestA: nestB: nestC: 'deleteMe' ; const clone = Object.assign(, source); delete clone.nestA.nestB; console.log(source);

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.