Javascript closure - binding value instead of reference

Question

The below example was taken from the book, "Javascript: The good parts". The author says that the helper function returns a function that binds to the current value of var i.

Can anyone explain what makes it to bind the VALUE instead of REFERENCE of var i, because helper function is a closure to add_the_handler function and should only see the reference of var i:

var add_the_handlers = function (nodes) {
   var helper = function (i) {
      return function (e) {
        alert(i);
      };
    };
    var i;
    for (i = 0; i < nodes.length; i += 1) {
       nodes[i].onclick = helper(i);
    }
};

The i variable in the function (e) { alert(i); }; function is referenced to the local i variable in the helper function, instead of i variable in the add_the_handlers function. — Andrey M.
– Andrey M., Commented Jul 18, 2011 at 4:40
This post/answer will be helpful (on pass by reference vs. value): stackoverflow.com/questions/6605640/… — jfriend00
– jfriend00, Commented Jul 18, 2011 at 4:59

Paul · Accepted Answer · 2011-07-18 05:03:33Z

5

If you were to say:

nodes[i].onclick = function(){ alert(i) };

The function would not have it's own copy of i because i is not declared within the scope of the function.

To help you see this better I've modified your above code:

var add_the_handlers = function (nodes) {
    var helper = function(t) {
      // t is in the scope of "helper"
      return function(e){
        // e is in the scope of this anonymous function
        // and is not used
        alert(t);
      };
    };

    // Variables declared here are in the scope of "add_the_handlers"
    var i;
    for (i = 0; i < nodes.length; i += 1) {
       nodes[i].onclick = helper(i);
    }
};

In the "real world" you'll often see code like the above shortened to look like this:

var add_the_handlers = function(nodes){
    var i;
    for(i = 0; i < nodes.length; i++)
       nodes[i].onclick = (function(i){ return function(e){ alert(i); }; })(i);
};

edited Jul 18, 2011 at 5:03

answered Jul 18, 2011 at 4:49

Paul

142k28 gold badges285 silver badges272 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Deepan Over a year ago

I believe, you should return a function like this, nodes[i].onclick = (function(i){ return function(e){alert(i);} })(i);

score 1 · Accepted Answer · 2011-07-18 04:49:38Z

1

You pass the current value of i into the function helper. Inside that function the variable i, a (confusingly named) parameter to the function, is different from any other i. The closure returned thus binds to that particular i (really the [[scope]] which contains that i, but...).

Happy coding.

edited Jul 18, 2011 at 4:49

answered Jul 18, 2011 at 4:40

user166390

Comments

bbg · Accepted Answer · 2011-07-18 04:40:03Z

0

This is a guess: i is a primitive, so it's always accessed by value, and not by reference.

answered Jul 18, 2011 at 4:40

bbg

3,1203 gold badges20 silver badges13 bronze badges

1 Comment

user166390 Over a year ago

Nope, not at all :) It's not about object mutability, but rather about variable resolving. A new variable [[scope]] in JavaScript is only created with a new function declaration.

Collectives™ on Stack Overflow

Javascript closure - binding value instead of reference

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related