Question

I’m refactoring some javascript to use jQuery and one of the events looks something like this

document.onkeyup = function keyUp(e) {

if (e.keyCode == 70) { // 'f'
    //Do something
}
else if (e.keyCode == 78) { // 'n'
    //Do something else
} ...

Unfortunately the things done in the cases aren’t as similar or as simple as those in this question. Is there a better way to write this instead of a massive hard-coded if/else or switch/case statement?

Answer 1

I don’t know if it’s really better but you could list all of the possible values as keys of an object in some other dedicated file that you include. For example:

var keyHandlers = {
    "70": function () { /* Do something */ },
    "78": function () { /* Do something else */ }
};

Then, in your keyup event handler, you can simply refer to the appropriate property of this object:

document.onkeyup = function keyUp(e) {
    keyHandlers[e.keyCode]();
};

One notable disadvantage of this method over a switch statement would be that it’ll look much messier if you want multiple keys to perform the same function. With a switch, you could just let those cases fall through. Here, you’ll have to perform some other assignments after the inital keyHandlers declaration.

---

A couple of other points… you should use addEventListener rather than the on... properties, and is there a reason you’ve named the function you are assigning to onkeyup currently? The only reason to name it would be if you needed to refer to it from within itself.