Accessing mutable variable in an event closure

Question

I am trying to use the mousetrap Javascript plugin to handle some key strokes in a similar fashion, so I thought to code them up as follows:

    var keys = [ 'b', 'i', 'u'];
    for (var i=0; i < 3; ++i) {
        var iKey = keys[i];
        var iKeyUpper = iKey.toUpperCase();

        Mousetrap.bind(
            [   'command+' + iKey,
                'command+' + iKeyUpper,
                'ctrl+' + iKey,
                'ctrl+' + iKeyUpper],
            ( function( e ) {
                console.log( "you clicked: " + i );
        } ) );

    }

But, obviously, i is mutable. However, I am not sure how to write a closure where I am competing the event parameter in the response. Suggestions on how to handle this situation?

you want to use the event in the attribute handler? I did not understand well "competing" in this context sorry. — Edorka, Jun 20 '13 at 15:52
Show us what you have tried. What was the problem with the event parameter? The closure IEFE should return the handler function which accepts the `e` parameter. — Bergi, Jun 20 '13 at 16:37

Bergi · Accepted Answer · 2013-06-20T17:09:41.173

how to write a closure where I am competing the event parameter in the response

Use a closure either around the whole loop body (as @dandavis) demonstrated), or use it only around the handler:

…
    Mousetrap.bind(
        [   'command+' + iKey,
            'command+' + iKeyUpper,
            'ctrl+' + iKey,
            'ctrl+' + iKeyUpper],
        (function(_i) { // of course you can use the name `i` again
            return function( e ) {
                console.log( "you clicked: " + _i );
            };
        })(i) // and pass in the to-be-preserved values
    );

dandavis · Answer 2 · 2013-06-20T16:11:56.310

you need to wrap the i variable in a local scope so that it won't sync with the "i" in the for loop:

   var keys = [ 'b', 'i', 'u'];
    for (var i=0; i < 3; ++i) {
      (function(i){
        var iKey = keys[i];
        var iKeyUpper = iKey.toUpperCase();

        Mousetrap.bind(
            [   'command+' + iKey,
                'command+' + iKeyUpper,
                'ctrl+' + iKey,
                'ctrl+' + iKeyUpper],
            ( function( e ) {
                console.log( "you clicked: " + i );
        } ) );
      }(i));
    }

the other alternative is to use functional Array methods, which since they use functions, always have their own scope, and they provide the element value and element index to you intrinsically:

 var keys = [ 'b', 'i', 'u'];
   keys.map(function(iKey, i){
        var iKeyUpper = iKey.toUpperCase();

        Mousetrap.bind(
            [   'command+' + iKey,
                'command+' + iKeyUpper,
                'ctrl+' + iKey,
                'ctrl+' + iKeyUpper],
            function( e ) {
                console.log( "you clicked: " + i );
        }); // end bind()    

   }); // end map()

the 2nd example will work out of the box in IE9+, but you can make it work anywhere with a simple drop-in Array method compat pack, usually included in IE shims...

Accessing mutable variable in an event closure

2 Answers2

Linked