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

Question

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 ?

OK, do you understand why a = {foo: 1}; b = a; a = {bar: 2} doesn't change b while a = {foo: 1}; b = a; a.foo = 2 does? Because you've created the exact same scenario but made it more confusing using objects. — VLAZ
– VLAZ, Commented Oct 2, 2020 at 15:02
In the first example, references are not being shared. Values are being shared. So when you change what value obj2.b references after obj2.a is set to reference the previous value, the change to what obj2.b references is independent of the other object. — Taplar
– Taplar, Commented Oct 2, 2020 at 15:07
@VLAZ Can you explain this a bit, a = {foo: 1}; b = a; a = {bar: 2}. By this logic of your why does in Scenario 2 obj2['b']['c'] changed the value of obj1 ? — Siddhartha Narang
– Siddhartha Narang, Commented Oct 2, 2020 at 15:40
@SiddharthaNarang the code you quoted corresponds to scenario 1, not to scenario 2. — VLAZ
– VLAZ, Commented Oct 2, 2020 at 16:24
@VLAZ I know that example is for Scenario 1. Can you explain that bit more. — Siddhartha Narang
– Siddhartha Narang, Commented Oct 2, 2020 at 18:04

Nick Parsons · Accepted Answer · 2020-10-02 16:12:51Z

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:

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.

Saar Davidson · Accepted Answer · 2020-10-02 15:14:19Z

0

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.

answered Oct 2, 2020 at 15:14

Saar Davidson

1,3921 gold badge10 silver badges17 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related