Need to understand Javascript object references

Question

I am looking at this piece of code from John Resig's website. What I don't understand is when the ninja object is set to an empty object, the yell method is still available to samurai.

Is it because since there is still a reference lying around to ninja, it wasn't garbage collected?

var ninja = {
  yell: function(n){
    return n > 0 ? yell(n-1) + "a" : "hiy";
  }
};


var samurai = { yell: ninja.yell };

ninja = {};

console.log(samurai.yell(2)); //hiy

http://ejohn.org/apps/learn/#14 (Original source, I modified it a little to remove the named function expression).

Answer 1

In the following code:

var ninja = {
  yell: function(n){
    return n > 0 ? yell(n-1) + "a" : "hiy";
  }
};

The value of ninja.yell is a reference to a function. The assignment:

var samurai = { yell: ninja.yell };

Assigns a value to samurai.yell that is a reference to the same function (i.e. the one referenced by ninja.yell). Then:

ninja = {};

Assigns a value to ninja that is a new, empty object. It has no effect on the value assigned to samurai.yell, which still references the function.

Variables have a value, values have a Type. There is a special Type called the Reference Type that is "…used to explain the behaviour of such operators as delete, typeof, and the assignment operators". So when an object is in an assignment expression, the value assigned is Type Reference.

Hence the variable still has a value, but it's value is a reference.

Answer 2

Break out the anonymous function which is referenced by 'yell' property of 'ninja':

function yell(n) {
  return n > 0 ? yell(n-1) + "a" : "hiy";
}

var ninja = {
  yell: yell
};

Now it's a little easier to see that the function 'yell' does not get 'deleted' when you reassign 'ninja'.

When you do:

var samurai = { yell: ninja.yell };

You assign whatever ninja.yell references (which is function yell()} to 'samurai.yell'.

Answer 3

It's important to look at the original unmodified source for this one:

 1. | var ninja = { 
 2. |   yell: function(n){ 
 3. |     return n > 0 ? ninja.yell(n-1) + "a" : "hiy"; 
 4. |   } 
 5. | }; 
 6. | assert( ninja.yell(4) == "hiyaaaa", "A single object isn't too bad, either." ); 
 7. |  
 8. | var samurai = { yell: ninja.yell }; 
 9. | var ninja = null; 
10. |  
11. | try { 
12. |   samurai.yell(4); 
13. | } catch(e){ 
14. |   assert( false, "Uh, this isn't good! Where'd ninja.yell go?" ); 
15. | }

The change you made to change ninja.yell to yell is an invalid edit to the script.

What I don't understand is when the ninja object is set to an empty object, the yell method is still available to samurai.

It's important to understand how assignment works in JavaScript. JavaScript has a lot of convenient shorthand notations that can make things harder to understand when you're new to the language.

var samurai = { yell: ninja.yell };

Is a shorthand way of saying:

var samurai;
samurai = new Object();
samurai.yell = ninja.yell;

When samurai.yell = ninja.yell is called, a reference to the ninja.yell function is added to samurai.

In JavaScript, functions are objects too. They are passed by reference. What samurai.yell = ninja.yell does not do is copy any sort of reference to ninja.

On line 9 of the example, var ninja = null does not modify the function at ninja.yell in any way. It also does not modify the object that was stored at ninja in any way. What it does is remove the reference to the object that was stored at ninja, and replace it with a value of null. This means that any other copy of the object referenced at ninja will still point to the object that was referenced at ninja.

It's easier to see with an example:

var foo,
    bar;

foo = {
    fizz: 'buzz'
};
bar = foo;
foo = null;
console.log(bar.fizz); //buzz

Is it because since there is still a reference lying around to ninja, it wasn't garbage collected?

After line 9 of the example script executes, there are no longer any references to the object that had been at ninja. There is a reference to the function that had been at ninja.yell. What this means is that the ninja object can be garbage collected, but the ninja.yell object (which happens to be a function) cannot.

Answer 4

Dry-run the execution the way that a JavaScript interpreter would:

1. Create a new, anonymous, empty object (identified as obj1).
2. Create a new, anonymous, function called func1 which does return n > 0 ? ....
3. Add a new property to this object obj1 called yell which is an alias for the function func1.
4. Assign a reference to this object to a new root property called ninja (variables can be thought of as field properties).

At this point, the "heap" looks like this:

func1 = n => return n > 0 ? yell(n-1) + "a" : "hiy"
obj1  = { yell: func1 }
ninja = obj1

5. Create a new, anonymous, empty object (identified as obj2).
6. Add a new property to this object obj2 called yell which is an alias for the function func1 - not an alias for ninja.yell - a reference to the "function value" itself is copied into obj2.yell rather than a reference-to-a-reference-to-a-function.
7. Assign obj2 to samurai.
8. Create a new, anonymous, empty object (identified as obj3).
9. Assign a reference to this object to ninja.

At this point, the "heap" looks like this:

func1   = n => return n > 0 ? yell(n-1) + "a" : "hiy"
obj1    = { yell: func1 } // this no-longer has any references and will be GC'd at some point
obj2    = { yell: func1 }
obj3    = {}
samurai = obj2
ninja   = obj3

10. Call samurai.yell which will dereference obj2 and then func1 to successfully make the call.