How do Javascript Reassigning and Reference works in case of Object ? In depth explanation required?

user_5968673 0
Viewed 53

It seems to be a very common thing but a bit confusing. I am stuck at 2 scenarios and trying to understand what is happening over here.

Scenario 1

let obj2 = {b:{c:{d:4}}}
let obj1 = {a:obj2['b']}

obj2['b'] =9

console.log(obj1)// --- > { a: { c: { d: 4 } } }
console.log(obj2)// --- > { b: 9 }

When I changed the value of obj2['b'] I was expecting obj1 will also change as obj1['a'] was also referencing the same memory location but it didn't.

Scenario 2

let obj2 = {b:{c:{d:4}}}
let obj1 = {a:obj2['b']}

obj2['b']['c'] =9

console.log(obj1)// --- > { a: { c: 9 } }
console.log(obj2)// --- > { b: { c: 9 } }

When I changed the value of obj2['b']['c'] value of obj1['a']['c'] also changes because it was referencing to the same memory location. That I understood, it is expected behavior.

I want an explanation of Scenario 1, why it didn't change the value of obj1 ?

javascript-objects object reference javascript
2 Answers

I think some diagrams might be useful here to help show what's going on. In your first code block, after your first two lines of code execute, you have a situation which looks like this:

reference diagram both objects sharing the same reference

Notice that both keys b and a from both objects 1 & 2 store references to the same object in memory. Once line three executes, you get the following situation:

reference diagram once value 9 has been set

As you can see, the b key for obj2 now holds the value 9, and no longer holds a reference to the object. However, obj1 still holds a reference to the object. As a result, when you log obj1, you'll still see the c and d properties of the nested objects.

For scenario two, however, your situation is a little different. After the first two lines of code execute, you get the same diagram as shown in the first image of this answer. However, once line 3 executes, your diagram changes to be:

reference diagram once value 9 has been set

In this situation the keys a and b for objects 1 and 2 still store references to the same object in memory (unlike in the previous scenario). This time, the object they both point to in memory is updated so that the value at the c key is no longer a reference to an object in memory, but rather the value 9. As a result, when you log both obj1 and obj2, you see the same nested object.

The above diagrams were generated by pythontutor under the ES6 visualizer.

user_56489540

In Scenario 1 you created an object (obj2) that has a property b that was assigned a reference to a new object, then you created a new object (obj1) and it has a property a that is a reference to the same object that in the b property in obj2. once you changed the b property in obj2 the object that was in there is referenced only in obj1's a property. basically, objects are in the heap memory and you store their addresses in the properties so once you change the property to a different thing you are not deleting it you just stop referencing the object and if nothing else is referencing it the GC will delete it eventually.

user_142885590
Related