How To Control Variable Hoisting?

Question

I have a problem with binding functions from an array to some elements, but i get this error after i click on any element with class "class".

Uncaught TypeError: Property '4' of object function (){alert(1)},function (){alert(2)},function (){alert(3)},function (){alert(4)} is not a function

var c = [
    function(){alert(1)},
    function(){alert(2)},
    function(){alert(3)},
    function(){alert(4)}
];

function test(b){
    for(var i = 0; i < b.length; i++){
        $('.class').eq(i).bind('click', function(){
            b[i]();
        });
    }
}

test(c);

I think that the variable i keep its last value.

any solution or explanation will be really appreciated. Thanks in advance.

Your array only has 4 indexes (0,1,2,3) since your error is the 5th index is undefined, that means your loop must be going one too far, though i don't immediatly see why. Outside fo that though, you have a scope problem with your index. your click event b[i]() will always call the last function in the array. — Kevin B, Feb 26 '13 at 20:12
@KevinB: After the loop is done, `i` will be `4`. All the functions "close" around the same `i`, so they all will say `b[4]` doesn't exist. — gen_Eric, Feb 26 '13 at 20:13
@RocketHazmat Ah, so at the end of the loop, i is incremented one more time to 4, at which point it fails the test and exits, but it's still 4, causing it to fail inside the click event. Fixing the scope issue would solve that. — Kevin B, Feb 26 '13 at 20:14

score 2 · Answer 1 · answered Feb 26 '13 at 20:12

You need a closure - in js variable scope is determined by functions. With jQuery, just use .each:

$('.class').each(function(i) {
     $(this).on('click', function(){
         alert(i+1);
     });
});

However, if you really need to have an array of distinct functions you just can bind the functions themselves directly as handlers:

var elems = $('.class');
for (var i=0;i<b.length;i++) {
    elems.eq(i).on('click', b[i]);
}

Madbreaks · Answer 2 · 2013-02-26T20:19:08.223

1

Your function array only has 4 items, so b[4] is undefined. Instead of referencing b inside your click handler, make it the click handler itself:

elems.eq(i).on('click', b[i]);

By doing this the value of i will be examined each iteration through the loop, instead of when the element is clicked (at which point its value should always be 4).

edited Feb 26 '13 at 20:19

answered Feb 26 '13 at 20:12

Madbreaks

19,094
7
58
72

But, how is `b[4]` getting called? – gen_Eric Feb 26 '13 at 20:14
@RocketHazmat I realize why `i` is set to `4`. I still think my answer points at *why* op is seeing that error. – Madbreaks Feb 26 '13 at 20:15
@RocketHazmat I added a suggestion for how to fix the issue. – Madbreaks Feb 26 '13 at 20:17

score 1 · Answer 3 · answered Feb 26 '13 at 20:20

The problem is, in your loop the functions you are setting as click handlers are all sharing the same i value. After the loop, that i value will be 4, so each function will try to call b[4], which doesn't exist.

You need to create a new scope for each of the functions, so that the i values are all different.

for(var i = 0; i < b.length; i++){
    (function(i){
        $('.class').eq(i).bind('click', function(){
            b[i]();
        });
    }(i));
}

You can also just set the function from the array as the click handler directly.

for(var i = 0; i < b.length; i++){
    $('.class').eq(i).bind('click', b[i]);
}

How To Control Variable Hoisting?

3 Answers3