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(
            [   'mand+' + iKey,
                'mand+' + 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 peting the event parameter in the response. Suggestions on how to handle this situation?

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(
            [   'mand+' + iKey,
                'mand+' + 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 peting the event parameter in the response. Suggestions on how to handle this situation?

• javascript
• closures
• dom-events
• mousetrap

• you want to use the event in the attribute handler? I did not understand well "peting" in this context sorry. – Edorka Commented Jun 20, 2013 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 Commented Jun 20, 2013 at 16:37

2 Answers 2

how to write a closure where I am peting 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(
        [   'mand+' + iKey,
            'mand+' + 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
    );

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(
            [   'mand+' + iKey,
                'mand+' + 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(
            [   'mand+' + iKey,
                'mand+' + 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 pat pack, usually included in IE shims...