Why is the U variable set to NULL in this interesting Javascript code fragment?

Question

i have a javascript code fragment as

var u = {};
var x = y = z = {"cvalue":"cell", "call":function(){alert(this.cvalue);}};

(function(){u=x;/*change all cvalue in x,y, z, u*/ u.cvalue = "notcell";})();

if(u == x && x == y && y == z && z == u){
    u.call();
}

//only u goes to null
u = null;
//x,y,z stay same
alert(x.cvalue);

wondering why u = null only applies for u?

Answer 1

Variables don't actually hold an object, but simply hold a reference to one. By assigning u to null, you're dropping the reference that u had to the object.

A more basic example:

var x = { 'name': 'Bob' };
var y = x;

console.log(x);   //  Object { name="Bob"}
console.log(y);   //  Object { name="Bob"}

y.name = 'Jack';

console.log(x);   //  Object { name="Jack"}
console.log(y);   //  Object { name="Jack"}

x = null;

console.log(x);   //  null
console.log(y);   //  Object { name="Jack"}

Note how our object isn't held in x. It's held somewhere in memory, and x is referring to it. When we do y = x, we copy the reference to y, and therefore y begins to refer to the same object. Setting x to null simply drops the reference that x holds to the object, leaving the actual object unaffected. If we were to set y to null, or to anything else, the garbage collector would eventually pick up the object for destruction.

Answer 2

Daniel is right, but you have to be careful because in Javascript you are sometimes dealing with a copy, and othertimes dealing with the original. For example...

var a = new Object();
a.foo = new function(){alert("I exist")};

var b = a;

b.foo = null;//this erases the function from both a and b (technically, there is only one since a and b point to the same place in memory).

a.foo();//this now fails since there is no longer a function called foo

b = null;//this does NOT affect a in any way as per Daneiel Vassallo's explanation.

Answer 3

You are assigning the exact same object to x, y and z, not a copy of it's value, but the exact same object.

In pseudo code:

var u = OBJECT_A // u points to OBJECT_A

var x = y = z = OBJECT_B // x y and z points to OBJECT_B

(function(){
    u=x;  // Drop reference to OBJECT_A and point to OBJECT_B

    /*change all cvalue in x,y, z, u*/
    u.cvalue = "notcell";  //Changes the cvalue in OBJECT_B
                           // Remember x,y,z, and u points to OBJECT B
                           // so x.cvalue, y.cvalue, z.cvalue and u.cvalue is the same
})();

if(u == x && x == y && y == z && z == u){
   u.call();
}

//only u goes to null
u = null;  // Drop reference to OBJECT_B and point to NULL.


//x,y,z still points to OBJECT_B
alert(x.cvalue);