Binding listeners inside of a for loop : variable scope miscomprehension

Question

I've a variable scope problem and I don't understand why this occurs and how to get rid of it :

    var items = ['foo', 'bar'];
    for (var index in items) {
        var item = items[index];
        var selector = '.'+item+'-class';
        $(selector).bind('click', function() {
            console.log("class: "+$(this).attr('class'));
            console.log("selector: "+selector);
            console.log("item: "+item);
        });
    }

Considers that this code execute itself over the following HTML :

<div class="foo-class">Foo</div>
<div class="bar-class">Bar</div>

Clicking on "Foo" echoes the right class (i.e. "foo-class") in the first line but the selector and the item name following are related to bar. I think that the problem is that the second iteration of the loop reset the variables used in the first one.

I thought that the declaration inside of the loop should clearly declare their scope at this level. Am I wrong ? Why ? How can I fix it ?

I'm not seeking a workaround, I want something clean and a better comprehension of javascript variable scope mecanism.

Here the jsfiddle.

Thanks !

Elie · Accepted Answer · 2012-04-21 20:00:03Z

4

Here's your fiddle example updated.

var items = ['foo', 'bar'];
for (var index in items) {
    (function() {
        var item = items[index]; 
        var selector = '.' + item + '-class';
        $(selector).bind('click', function() {
            console.log("class: " + $(this).attr('class'));
            console.log("selector: " + selector);
            console.log("item: " + item);
        });
    })();
}

Creating an anonymous function will define a new scope for each of your defined variables

TIP: Try to create a separate function to do the bind, just to keep your code cleaner.

edited Apr 21, 2012 at 20:00

answered Apr 12, 2012 at 20:58

Elie

7,4538 gold badges33 silver badges35 bronze badges

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

Comments

Bergi · Accepted Answer · 2012-04-12 20:56:58Z

1

It's always the same with these for-loops (google it). JavaScript does not have block scope but function scope, so when an item is clicked the one variable selector has the value it had after the last loop run (same for the variable item).

To solve the problem, you need another closure in you loop which stores the variables in its own scope. That means you need to execute a function for each loop run.

answered Apr 12, 2012 at 20:56

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

1 Comment

AsTeR Over a year ago

Thanks for the clear explanation. I didn't know this function level variable scope +1

JJJ · Accepted Answer · 2012-04-12 21:03:41Z

1

The issue is not strictly about variable scope. The anonymous function runs at the time the click event is triggered, not when you are defining it in the loop. Consider the following which is functionally identical to your example:

var items = ['foo', 'bar'];

for (var index in items) {
    var item = items[index];
    var selector = '.'+item+'-class';
    $(selector).bind( 'click', test );
}

function test() {
    console.log("selector: "+selector);
}

This (hopefully) demonstrates what's happening: the global variable selector in the function is, at the time the function is being called, the same in both cases ("bar").

answered Apr 12, 2012 at 21:03

JJJ

33.2k20 gold badges95 silver badges103 bronze badges

3 Comments

AsTeR Over a year ago

Thanks but I doubt that selector will be set when test will called.

JJJ Over a year ago

Why not? It's a global variable.

AsTeR Over a year ago

Sorry, I thought this for was a function ... don't know why. You're correct.

The Alpha · Accepted Answer · 2012-04-12 21:07:57Z

0

var items = ['foo', 'bar'];
for (var index in items) {
    (function(i){  
    var item = items[i];
    var selector = '.'+item+'-class';
    $(selector).bind('click', function() {
            console.log("class: "+$(this).attr('class'));
            console.log("selector: "+selector);
            console.log("item: "+item);
        });
    })(index);
}

Fiddle here.

answered Apr 12, 2012 at 21:07

The Alpha

147k30 gold badges294 silver badges313 bronze badges

Comments

Michael · Accepted Answer · 2012-04-12 21:09:34Z

0

Vars "selector" and "item" are references to a location where you store values, and the values of those two at the moment you click one of the htl elements is the one frome the last loop.

answered Apr 12, 2012 at 21:09

Michael

4,89611 gold badges48 silver badges69 bronze badges

Collectives™ on Stack Overflow

Binding listeners inside of a for loop : variable scope miscomprehension

5 Answers 5

Comments

1 Comment

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related