Dynamic function inside loop: i var is not visible

Question

Take a look at the following code

//btns is an array passed as a parameter to a function
for(var i = 0, b; b = btns[i]; i++) {
    b.handler = function () {
        var a = btns[i].some_field; //undefined
        //the same for "b.some_field;"
    };
}

Why btns[i] is undefined?

PS. the code adds click handler on extjs buttons if that matters.

Because you are missing `var btns = [];` somewhere before that code. — Nabil Kadimi, Aug 12 '13 at 07:38
@Nabil: That would result in a reference error instead. The problem is not with `btns` but with how closures work in JS. — Felix Kling, Aug 12 '13 at 07:40
Even though there might be simpler solutions to the problem, you should have a look at [Javascript closure inside loops - simple practical example](http://stackoverflow.com/q/750486/218196) to understand *what* the problem is. — Felix Kling, Aug 12 '13 at 07:42

Ja͢ck · Accepted Answer · 2013-08-12T07:58:15.037

This happens because by the time the inner function is called (which is after the loop is done) the value of i would be btns.length and therefore the value of btns[i] would be undefined.

You need to close over the value of i like this:

b.handler = function(i) {
    return function() {
        var a = btns[i].some_field;
    }
}(i);

It's important to note that although the variables have the same name, they're different variables; i.e. the inner variable shadows the outer, thereby "fixing" the value.

score 0 · Answer 2 · answered Aug 12 '13 at 07:38

0

for(var i = 0, b; b = btns[i]; i++) {
  b.handler = function () {
    var a = this.btns[i].some_field; 
    //the same for "b.some_field;"
  };
}

give "this." in side the function we have to use "this" to point

answered Aug 12 '13 at 07:38

backtrack

7,996
5
52
99

Do you mean `this.some_field`? Because `b` *is* `btns[i]`. I don't think that each element in the array has a reference back to the array. Anyways, whether this works depends on *how* `b.handler` is called, which we don't know about. – Felix Kling Aug 12 '13 at 07:39

Dynamic function inside loop: i var is not visible

2 Answers2