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, Jun 30 '18 at 16:55
Check [this answer to "Is JavaScript a pass-by-reference or pass-by-value language?"](https://stackoverflow.com/a/32793507/1960455) — t.niese, Jun 30 '18 at 17:00

T.J. Crowder · Accepted Answer · 2018-06-30T17:05:18.107

...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.

amrender singh · Answer 2 · 2018-06-30T17:36:08.043

2

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.

edited Jun 30 '18 at 17:36

answered Jun 30 '18 at 16:57

amrender singh

7,949
3
22
28

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. – Peteris Jun 30 '18 at 17:34

score 2 · Answer 3 · answered Jun 30 '18 at 17:02

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);
}

score 1 · Answer 4 · answered Jun 30 '18 at 16:58

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.

In javascript how does the below code works

4 Answers4