Question

I’m using shortcut.js to handle keyboard input and I’m wondering if there is a more efficient way to achieve my goal (currently most of the same code is copied and pasted).

For example, i have:

  shortcut.add("0",function() {
    points = -1;
    sec = 0;
  }); 

  shortcut.add("1",function() {
    points = 1;
    sec = 0;
  }); 

  shortcut.add("2",function() {
    points = 2;
    sec = 0;
  }); 

  shortcut.add("3",function() {
    points = 3;
    sec = 0;
  }); 

Ideally, I can generalize the function so that whatever key is entered is actually assigned to the points variable, except in the case where the user enters 0. In that case, the points variable is set to -1.

Any ideas on how to make this happen? Thank you!

Answer 1

A loop with a closure should do the trick:

for (var i = 0; i <= 9; ++i) {
    (function(i) {  // Capture current value of 'i' in this scope.
        shortcut.add(i.toString(), function() {
            points = i || -1;  // 'i' if 'i' is not 0, else -1.
            sec = 0;
        });
    })(i);
}

Update following comment: So why do we need a closure here? And what does the final (i); mean?

Basically, we need a closure because the anonymous functions passed to shortcut.add() will not be called right away, but some time in the future, after the loop has terminated. The functions capture i by reference, not by value, which means they will see the value of i that is current at the time they run, not at the time they’re defined.

So, if we call shortcut.add() directly from the loop body, all the anonymous functions we pass will end up seeing the value of i that is current after the loop has terminated, which will always be the same (10).

Creating a new variable in each iteration looks like it could work, but doesn’t:

for (var i = 0; i <= 9; ++i) {
    var _i = i;  // Create new variable containing current value of 'i'.
    shortcut.add(i.toString(), function() {
        points = _i || -1;  // Won't work, '_i' is always 9.
        sec = 0;
    });
}

Since for loop bodies do not have their own scope in Javascript, _i ends up in function scope, the same as i, and will be captured the same way (its final value will be 9 instead of 10 because ++i does not apply to it).

So, what we really need here is a new scope in each iteration. To achieve this, we can define a function inside the loop, and call it immediately, passing it the current value of i:

var newScope = function(i) {
    // Here, the value of 'i' will be the one current when 'newScope' is called
    // and will not change, even if 'i' is captured by other functions.
};
newScope(i);  // Call function with current value of 'i'.

Finally, we can do that without introducing the newScope name, by directly applying the call operator () to the function definition:

(function(i) {
    // Here, the value of 'i' will be the one current when this function is
    // called and will not change, even if 'i' is captured by other functions.
})(i);  // Call function with current value of 'i'.

I hope this appropriately answers your questions, feel free to leave further comments if it does not. For more information about closures, see Closures on MDN.