In javascript how does the below code works

Question

In Javascript how does the below code works.

var a = { prop1: "a", prop2: "b", fun: function() { return this.prop1 + " " + this.prop2; } } var a2 = a; a.fn = "v"; a = {}; if (a === a2) { console.log(true); } else { console.log(false); }

The above code prints false.

But if I comment out the line a={} the value which prints on console is true.

var a = { prop1: "a", prop2: "b", fun: function() { return this.prop1 + " " + this.prop2; } } var a2 = a; a.fn = "v"; //a={}; if (a === a2) { console.log(true); } else { console.log(false); }

How the above code works, as Both variables(a and a2) points to the same object but when I initialized a with {} it gave false.

In the first example a points to the assigned {} and a2 to the object a hold before {} was assigned to it. var a2=a; does not create an alias or reference. — t.niese
– t.niese, Commented Jun 30, 2018 at 16:55
Check this answer to "Is JavaScript a pass-by-reference or pass-by-value language?" — t.niese
– t.niese, Commented Jun 30, 2018 at 17:00

T.J. Crowder · Accepted Answer · 2018-06-30 17:05:18Z

...as Both variables(a and a2) points to the same object ...

They don't anymore, as of this line:

a={};

At that point, a2 refers to the old object, and a refers to a new, different object.

a2 = a doesn't create any kind of ongoing link between the variable a2 and the variable a.

Let's throw some Unicode-art at it:

After this code runs:

var a = { prop1: "a", prop2: "b", fun: function() { return this.prop1 + " " + this.prop2; } } var a2 = a; a.fn = "v";

At this point, you have something like this in memory (with various details omitted):

 a:Ref44512−−−+ | | | +−−−−−−−−−−−−−+ +−−−>| (object) | | +−−−−−−−−−−−−−+ | | prop1: "a" | | | prop2: "b" | +−−−−−−−−−−−−+ a2:Ref44512−−+ | fun:Ref7846 |−−>| (function) | | vn: "v" | +−−−−−−−−−−−−+ +−−−−−−−−−−−−−+

Those "Ref" values are object references. (We never actually see their values, those values are just made up nonsense.) Notice that the value in a and the value in a2 is the same, however.

If you do a === a2 at this point, it will be true: Both variables refer to the same object.

But when you do this:

a={};

 +−−−−−−−−−−−−−+ a:Ref84521−−−−−−−>| (object) | +−−−−−−−−−−−−−+ +−−−−−−−−−−−−−+ a2:Ref44512−−−−−−>| (object) | +−−−−−−−−−−−−−+ | prop1: "a" | | prop2: "b" | +−−−−−−−−−−−−+ | fun:Ref7846 |−−>| (function) | | vn: "v" | +−−−−−−−−−−−−+ +−−−−−−−−−−−−−+

At this point, a === a2 is false: The variables refer different objects.

brk · Accepted Answer · 2018-06-30 17:02:00Z

In first case after this line var a2 = a; a is again initialized as an empty object, so now a & a2 are two different reference

var a = { prop1: "a", prop2: "b", fun: function() { return this.prop1 + " " + this.prop2; } } var a2 = a; a = {}; console.log(a, a2) if (a === a2) { console.log(true); } else { console.log(false); }

In second case they point to same location, so adding a new property will reflect in the other too.

var a = { prop1: "a", prop2: "b", fun: function() { return this.prop1 + " " + this.prop2; } } var a2 = a; a.fn = "v"; console.log(a, a2) //a={}; if (a === a2) { console.log(true); } else { console.log(false); }

amrender singh · Accepted Answer · 2018-06-30 17:36:08Z

In the first case :

var a2 = a; // now a2 and a have reference (or point to) the same object" a= {}; // a now points to new reference

Since both a and a2 points has different references i.e why it returns false in first.

When you comment a= {} both a and a2 points to same location or stores same reference that is why it returns true.

The comment "// now a2 has reference of a or it points to a" is a bit misleading in the exact way the original question was confused. It might be more accurate to say that "now a2 and a have reference (or point to) the same object"; a2 does not point at the variable a, if it did, the a={}; would also change what a2 is pointing to.

Sheshank S. · Accepted Answer · 2018-06-30 16:58:08Z

var a = { prop1: "a", prop2: "b", fun: function() { return this.prop1 + " " + this.prop2; } } var a2 = a; a.fn = "v"; a = {}; console.log(a); console.log(a2); if (a === a2) { console.log(true); } else { console.log(false); }

Look at your code carefully. a is not innitialized to {}. It was initialized in the first line where it says var a =. I have printed out both values for you. var a2 gets the value of var a, not the reference so when var a changes, var a2 does not change.

Collectives™ on Stack Overflow

In javascript how does the below code works

4 Answers 4

Comments

Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Linked

Related