Switch case, if else or a lookup map — A study case

Credit by VectorStock — Select clothes based on mood

The case — Dress up according to my mood

Assume we have a method that will take in a mood and return some clothes to wear 👚

dressUp() — to help you decide what to wear without thinking

If my mood is <happy> then give me <red dress>

The straight forward way for a human brain is to use if … else:

if (mood === 'happy') // Do something
else if (mood === 'excited') // Do something
else if (mood === 'slightly optimistic') // Do something
else if (mood === 'optimistic') // Do something
else if (mood === 'gloomy') // Do something
// ...And the show continues

Switch my clothes in case I don’t feel great

A bit of definition — in case anyone doesn’t remember 😬

A sample flow diagram of switch
  • No {} is needed for defining code within case
  • default case is needed as a fallback when there is no match is found.
  • Different cases that return same value/code can be mapped together by placing case one after the other.
case 'happy':
case 'slightly happy':
//Code
break;

Map my mood and return the correct clothes

Easy peasy. Taking advantage of Object literal is always one of the cool things in JavaScript. Instead of using if..else, switch, we can define in advance a lookup table of clothes based on certain moods:

  1. The actual amount of code lines saved sometimes is not that significant. Mostly reduced here are the repetitive of else if , case...break... and nothing else.
  2. Object takes memory. While using switch, if...else does not require any additional memory. Hmm, talk about memory efficiency 🙄
  3. Sometimes it’s a must to do extra check hasOwnProperty .
  4. What if some cases need to return or use exact same set of code or value? Or reuse some other mood’s mapped value (such as the case of optimistic is an extension of lightly optimistic which means it may use the same clothes from lightly optimistic and adds a few more items.)
  5. Name convention. Not everyone is a master of naming Objects nicely (not me for example 😆)

A JsPerf test

The result surprised me, to be honest. The test was done with 10 different cases for comparing, value from 1 to 10 accordingly. And the result?

Chrome vs Firefox vs Safari

Conclusion

Most will think switch is not syntactic sugar, if...else is ok but using lookup table by Object literal is the best when it comes to a lot of cases matching.

  • Is there a possibility that any of cases will share the same mapped behavior/value with the other? If so, Object literal may not be ideal.
  • How many cases will there be (worst case scenario 🤷‍♀️)? Readability is something to kill for, as always.

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

Maya Shavin

Written by

Senior Front-End Developer @Cloudinary www.mayashavin.com

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co