3

If I have one object, and shallow copy of it. For example:

var person = {
  name: "Foo",
  age: 10,
  child: {
    name: "Matrix"
  }
}

var copiedPerson = {...person}
console.log(person, copiedPerson);

If I change person.name = "NewName";, copedPerson will stay intact.

If I change person.age = 8;, copiedPerson will stay intact.

But if I change person.child.name = "Neo";, copiedPerson.name will also through reference to point also to same name "Neo".

Everything about that is clear to me.

But I do not understand, why when I delete person.child;, nothing happens to copiedPerson.child;

In my logic cause both of them changes when I change one of them, now I also expected when one of them is deleted that other one should also be deleted. (Cause they references to same location in memory)

Can someone explain me why this didn't happen and which part I misunderstood?

Predrag Davidovic
  • 1,411
  • 1
  • 17
  • 20
  • Have a look at [Deleting Objects in JavaScript](https://stackoverflow.com/q/742623/1048572) – Bergi Apr 06 '21 at 20:13
  • Try to assign `person.child` to `null` and see if `copiedPerson.child` is also updated to `null` or not. I think that will help you understand this better. – Lakshya Thakur Apr 06 '21 at 20:20

3 Answers3

1

There is a little gap in the mental model you're having about the references right now. So essentially, you understand that if you change the nested object person.child.name the value in the copiedPerson.child.name would change too.

But at the end of the day, the child property is only containing the reference of the nested object for both person and the copiedPerson objects.

So, when you delete it from the original person object, you're deleting the reference of this nested object from the person's child property but this nested object still remains in the memory

Hence, the reference contained in the copiedPerson.child still remains untouched and can access this object saved in the memory

d_bhatnagar
  • 1,419
  • 1
  • 12
  • 20
  • 1
    If I understood correctly, I have `person.child.name` which reference into memory location for example `1001`, and also have `copiedPerson.child.name` which also reference into memory location `1001`. And in memory location `1001` I have value `Matrix`. And when I `delete person.child.name` I only delete one reference to that memory location, but another one (copiedPerson.child.name) reference to location `1001` still stay intact. – Predrag Davidovic Apr 06 '21 at 20:32
0

delete does not destroy the object that is referenced by a variable or property.

delete removes a property from an object - in your case the person object - just like an assignment adds it.

Bergi
  • 630,263
  • 148
  • 957
  • 1,375
  • can you read my comment on d_bhatnagar answer to check if my process of thinking now correct, I didn't read your article yet, but I will do it in few minutes. – Predrag Davidovic Apr 06 '21 at 20:34
  • @PredragDavidovic That comment is about `delete person.child.name`, not about `delete person.child` as in your question. Deleting the `.name` property from the object that is referenced from both `person.child` and `copiedPerson.child` is the same as `person.child.name = "Neo";` about modifying that child object, not modifying either of the persons. – Bergi Apr 06 '21 at 20:41
  • You have right, I understood it in wrong way. As you said whan I do `delete person.child.name` it also deleted it from `copied.person.name`. I got it all wrong :( – Predrag Davidovic Apr 06 '21 at 20:47
-1

it is cause the different variables specify on the same object. You should clone obj by cloneObj function

function cloneObj(obj) {
  var res = {};
  for (var i in obj) {
    if (typeof obj[i] == "object") {
      res[i] = cloneObj(obj[i]);
    } else {
      res[i] = obj[i];
    }
  }
  
  return res;
}

var person = {
  name: "Foo",
  age: 10,
  child: {
    name: "Matrix"
  }
}

var copiedPerson = cloneObj(person);

copiedPerson.child.name = "Neo";

console.log(person);
console.log(copiedPerson);
Fakt309
  • 821
  • 5
  • 14