Shallow copy, Deep copy

Question

 const Inner = function(Text) { this._Text = Text; this.Alert = () => { alert(this._Text["Message"]); } }; const Outer = function() { this.Text = { Message: "Hi" }; this.Inner = new Inner(this.Text); this.Alert = this.Inner.Alert; }; const OuterObject = new Outer(); OuterObject.Alert(); OuterObject.Text["Message"] = "Hello"; OuterObject.Alert();

Output: Hi->Hello

 const Inner = function(Text) { this._Text = Text; this.Alert = () => { alert(this._Text["Message"]); } }; const Outer = function() { this.Text = { Message: "Hi" }; this.Inner = new Inner(this.Text); this.Alert = this.Inner.Alert; }; const OuterObject = new Outer(); OuterObject.Alert(); OuterObject.Text = { Message: "Hello" }; OuterObject.Alert();

Output: Hi->Hi

I was experimenting with shallow copy and deep copy in Javascript.Then I ran the above codes. I don't understand why the former was a shallow copy and the latter a deep copy. Please help me.

Answer 1

After you call new Outer(); in your first code block, you end up with both this.Text inside of Outer and this._Text within Inner pointing to the same object in memory, that being the object you created in Outer :

{
  Message: "Hi"
}

This is due to the fact that when you pass this.Text to Inner you end up passing the reference of the above object. As a result, this._Text references the same object to this.Text refers to. This means that when you modify the Text object, the change is reflected also when you log this._Text , because both Text and _Text are referring to the same object.

A similar thing occurs with your second code block - before you perform OuterObject.Text = {Message: "Hello"};both this._Text and this.Text refer to the same object in memory (as they did in the first example), however, when you reassign OuterObject.Text = {Message: "Hello"}; , you are creating a new object in memory ( {Message: "Hello"}; ), and assigning a reference to that new object to the .Text property, the object that ._Text refers to ( {Message: "Hi"} ) still remains, as all you have done is update .Text to point to a new object, and haven't changed the this._Text reference or object.

---

To explain in diagrams, in both code blocks, you initially have the following:

In your first code block, when you do OuterObject.Text["Message"] = "Hello"; , you're updating the one object in memory that both this.Text and this._Text point to, meaning that when you view this._Text.Message you see "Hello" and the same with this.Text.Message :

In your second code block, the first diagram/situation still occurs but the second doesn't, instead, when you perform OuterObject.Text = {Message: "Hello"}; you get the following structure:

Above, this.Text points to a new object created in memory, whereas this._Text still points to the old object, as the pointer for this._Text isn't changed. So logging this._Text still shows "Hi"