{"id":827,"date":"2014-10-31T18:26:51","date_gmt":"2014-10-31T18:26:51","guid":{"rendered":"http:\/\/www.nikola-breznjak.com\/blog\/?p=827"},"modified":"2015-08-17T06:12:41","modified_gmt":"2015-08-17T06:12:41","slug":"converting-a-javascript-switch-statement-into-a-function-lookup","status":"publish","type":"post","link":"https:\/\/nikola-breznjak.com\/blog\/javascript\/converting-a-javascript-switch-statement-into-a-function-lookup\/","title":{"rendered":"Converting a JavaScript switch statement into a function lookup"},"content":{"rendered":"

I just read a great post on WebTools Weekly<\/a> newsletter about how to convert a JavaScript switch statement into a function lookup. Here’s the full content from there, so be sure to check it out if you like it (it’s one newsletter a week, and no – I’m not affiliated with them in any way).<\/p>\n

Because of the problems inherent in using JavaScript’s\u00a0<\/span>switch<\/span>\u00a0statement, many developers and reference guides will recommend avoiding\u00a0<\/span>switch<\/span>\u00a0constructs and instead using something called a<\/span>method lookup<\/em>\u00a0(also referred to as a\u00a0<\/span>lookup table<\/em>\u00a0or even\u00a0<\/span>dispatch table).\u00a0<\/em>Let’s convert a\u00a0<\/span>switch<\/span>statement to a method lookup, so we can see how this is done. Here’s our\u00a0<\/span>switch<\/span>:<\/span><\/p>\n

function doSomething(condition) {\r\n  switch (condition) {\r\n    case 'one':\r\n      return 'one';\r\n    break;\r\n\r\n    case 'two':\r\n      return 'two';\r\n    break;\r\n\r\n    case 'three':\r\n      return 'three';\r\n    break;\r\n\r\n    default:\r\n      return 'default';\r\n    break;\r\n  }\r\n}<\/pre>\n
(<\/span>JS Bin example<\/a>)<\/span><\/p>\n
All of this is inside a\u00a0<\/span>doSomething()<\/span>\u00a0function, with a condition passed in. The possible values are ‘cased’, to define the return value. This is cleaner than a messy\u00a0<\/span>if-else<\/span>\u00a0construct, but can we clean it up even more?\u00a0<\/span>Here’s basically the same thing in the form of a method lookup:<\/span><\/p>\n
function doSomething (condition) {\r\n  var stuff = {\r\n    'one': function () {\r\n      return 'one';\r\n    },\r\n\r\n    'two': function () {\r\n      return 'two';\r\n    },\r\n\r\n    'three': function () {\r\n      return 'three';\r\n    }\r\n  };\r\n\r\n  if (typeof stuff[condition] !== 'function') {\r\n    return 'default';\r\n  }\r\n\r\n\r\n  return stuff[condition]();\r\n}<\/pre>\n
(<\/span>JS Bin example<\/a>)<\/span><\/p>\n
In the demo, you can see four logs in the console, one for each valid condition and then another one to demonstrate the default condition when the argument doesn’t match one of the methods.<\/span>

You can see why people like this technique. It’s clean, elegant, and seems a little more sophisticated without being more complex. I’ve only scratched the surface on this, so here are a few good resources to read up more on this subject:<\/span><\/p>\n