Why does my JS object incorrectly change when not assigning the object to a variable?

Question

Please explain this phenomenon to me.

this.testObject = { a: 1, b: { a: 3, b: { a: 78, b: null } } };

let g = this.testObject;

while (g.b) {
  g = g.b;
}

g.b = {
  a: 79,
  b: null
};

console.log(this.testObject); // { a: 1, b: { a: 3, b: { a: 78, b: { a: 79, b: null } } } }

Now I decided to stick with this.testObject and removed g:

this.testObject = { a: 1, b: { a: 3, b: { a: 78, b: null } } };

while (this.testObject.b) {
  this.testObject = this.testObject.b;
}

this.testObject.b = {
  a: 79,
  b: null
};
console.log(this.testObject); // {a": 78,b": {a": 79,b": null}

What’s going on? How is my assignment of g affecting this object this way?

In first snippet, if I did g=g.b then I am basically assigning a new value to g. However if I explicitly do this, then result isn't same?

this.testObject = {a:1, b:{a:3,b:{a:78, b:null}}};
let g = this.testObject;

while(g.b){
    g = {a:7777, b:null};
}

g.b={a:79, b:null};
this.testObject; // {a": 1,b": {a": 3,b": {a": 78,b": null}

Answer 1

I'm guessing you're expecting the two snippets to produce the same result. But the code doesn't do the same thing.

You're using g as a sort of reference in the first example. This means that every time you set g in the while loop, you're not affecting this.testObject in any way since you're just "moving" the reference. But it is still a reference, so altering anything inside the object that g is referencing, you will also set it in this.testObject, thus producing the result you get in the first example.

In the second example, you're replacing this.testObject each time in the while loop. So setting this.testObject = this.testObject.b will remove the outer object, resulting in this.testObject going from:

{ a: 1, b: { a: 3, b: { a: 78, b: null } } }

To:

{ a: 3, b: { a: 78, b: null } }

And since this.testObject.b isn't null, you're repeating this again, making this.testObject become:

{ a: 78, b: null }

Lastly, you're setting this.testObject.b to a new object, overwriting the previous null value. This results in the output you get in the second example.

Answer 2

Usually when answering these question people draw boxes and arrows between them to indicate pointers, but I'm lazy, so let's consider a simple virtual machine instead. This machine can operate on memory blocks and their numbers (aka "pointers"). There are three operations:

• allocate: allocate a memory block, initialize it with some data and return a pointer to it (denoted $number)
• write: set the value of a variable or a property to a pointer, so that the variable "points" to the corresponding memory block
• read: given a pointer, return the content of its memory block

In terms of this machine, your first snippet would translate to this:

// this.testObject = { a: 1, b: { a: 3, b: { a: 78, b: null } } };

allocate: $1 = {a: 78, b: null}
allocate: $2 = {a: 3, b: $1}
allocate: $3 = {a: 1, b: $2}

write: this.testObject = $3

// let g = this.testObject;

write: g = $3

// while (g.b) {  g = g.b; }

write: g = $3.b // first pass, g is now $2
write: g = $2.b // second pass, g is now $1

// g.b = { a: 79, b: null }

allocate: $4 = { a: 79, b: null }

write: $1.b = $4

// console.log(this.testObject);

read: $3 ==> {a: 1, b: $2}
read: $2 ==> {a: 3, b: $1}
read: $1 ==> {a: 78, b: $4}
read: $4 ==> { a: 79, b: null }

Basically, each {...} is an "allocate" operation, each assignment is a "write" and console.logs are "reads". Try to "translate" your other snippets to this machine and you'll see what's actually going on.