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"