Why is the result different to what I expect?

user_14037283 0
Viewed 89

Initial understanding:
I read somewhere that when referential data-types (objects) are assigned to a variableA, the variable contains the address of the memory of the object. And when variableA is assigned to variableB, variableB also gets a copy of this address in memory. I.e. it refers to the same object. I liked this definition.

a = {color: "red"};

b = a;

//a = {color: "red"};

console.log(a);
console.log(b); 
console.log(a === b);

Looking at the snippet above confirms this idea. It looks like a copy of the address of the memory of the object that a references is stored in a. When a is assigned to b, b gets this 'address' and references the same object.

However, this falls apart when a is reinitialised (a = {color: "red"};):

a = {color: "red"};

b = a;

a = {color: "red"};

console.log(a);
console.log(b); 
console.log(a === b);

I expected a === b to still return true. To me this contradicts my 'initial understanding' because surely if b got given the same address in memory that a is a 'label' to, b would 'update' and be a label of the same thing that a is a label of.

How do I revise my understanding of what's going on?

javascript
3 Answers

First you create an object {color: "red"} and you set a reference from a on it.
Than you let b=a, by this the reference from a is copied to b, so both reference on the same object.
Third you create a completly new object {color: "red"} and set a reference for aon it. So now a has a new reference on it, but b still has the old one..
If you now compare a===b there will be looked if the references are identical and they are not so it's false.

user_53245110

From this documentation about object equality, you can see this:

Object.is() determines whether two values are the same value. Two values are the same if one of the following holds:

  • both undefined
  • both null
  • both true or both false
  • both strings of the same length with the same characters in the same order
  • both the same object (means both object have same reference)
  • both numbers and
    • both +0
    • both -0
    • both NaN
    • or both non-zero and both not NaN and both have the same value

[...] This is also not the same as being equal according to the === operator. The === operator (and the == operator as well) treats the number values -0 and +0 as equal and treats Number.NaN as not equal to NaN

In the case you posted, the highlighted condition fails, as the new assignment creates a new [complex] object: though the values between the instances are the same, their identities are not.

The goal of this quote is to illustrate object comparison in JS by different means, as it's clear in the questions that that's the key point asked by the user.

user_22993620

When you write b = a, you declare that you can call a object either a or b. In other words, you give a second name to a, that is b.

If you assign a to a new object (by opening key brackets {}), a is no longer the same object as b, they have different beginnings and identities.

If you want to compare objects by their content, you can do the next:

var a = { color: 'red' };
var b = { color: 'red' };
console.log( JSON.stringify(a) );
console.log( JSON.stringify(b) );

Object.prototype.equals_obj = function(second) {
  return JSON.stringify(this) == JSON.stringify(second);
}

console.log( a.equals_obj(b) );

user_78961070
Related