Question

I have a problem getting the value of ‘name’ displayed with the following:

   for (var name in array) {
        var hoverIn = function() {
                  alert(name);
        };

        var hoverOut = function() {
        };

        thing.hover(hoverIn, hoverOut);

   }

What I get is an alert window with the last value of name. Clearly I am doing something wrong and I suspect it’s a simple fix. Can anyone help?

Thanks.

Answer 1

It’s closure problem, name, after that iteration is the last name in array, and callback for hovers isn’t executed right away when the iteration happens, thus when the hover function is actually executed, name will always be the last in array.

You need to use IEFE (Immediately executed function expression):

   for (var name in array) {
        // pass in name to the anonymous function, and immediately
        // executes it to retain name when the particular iteration happens
        var hoverIn = (function(name) {
             return function() {
                  alert(name);
             }
        })(name); // if you notice, the pattern is (function(name) {})(name) 
                  // the first () creates an anonymous function, the (name) 
                  // executes it, effectively passing name to the anon fn

        var hoverOut = (function(name) {
            // same pattern if you need to re-use name inside here, otherwise just
            // function() { } should suffice
        })(name);

        thing.hover(hoverIn, hoverOut);

   }

To avoid duplicates of (function() { })() (which honestly is getting tiring to look at), you could also, as @pimvdb pointed out, wrap the whole body in a closure:

   for (var name in array) {
        (function(name) {
           var hoverIn = function() {
               alert(name);
           }

           var hoverOut = function() {
           }

           thing.hover(hoverIn, hoverOut);
        })(name); // closure of for loop body

   }