This page looks best with JavaScript enabled

Switch from if/else hell

 ·   ·  ☕ 4 min read

Imagine you are in need of a complex if/then routine.

No, not the below..

1
2
3
const smart = true;
if (smart) console.log("I am smart");
else console.log("I am not so smart");

.. but more of..

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
function sum(a, b) {
  let smartMessage;
  if (a + b <= 0)
    smartMessage = "Negative numbers are not known and cannot be computed.";
  else if (a + b < 10) smartMessage = "Less than 10? X, Really?";
  else if (a + b < 50) smartMessage = "You could have just returned L";
  else if (a + b < 100) smartMessage = "You are nearing the big C";
  else if (a + b < 500) smartMessage = "You are nearing the bigger D";
  else smartMessage = "It is all about M from here on";
  return smartMessage;
}

console.log(sum(200, 2));

The above program works, and shows its smartness through the message. But there obviously should be a better way than to write a thousand if’s and but’s.

That brings us to our topic of this post - switch. Switch provides a better structured loop for evaluating multiple conditions.

Dissecting Switch

In its simplest form, switch behaves very much like if /else:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
let smart = true;
switch (smart) {
  case true:
    console.log("I am smart");
    break;

  case false:
    console.log("or.. rather not so smart");
    break;

  default:
    console.log("undecided about going either way");
}

Everything just feels intuitive, except for the break statement. So let’s dive more into it.

The actual switch evaluates the entry condition and does nothing else. case compares the result and executes a bunch of statements based on whether the evaluation done earlier is fulfilled with what we supplied to the specific case.

So, ‘smart’ by itself is the condition. And, case statements check whether ‘smart’ is equal to true, or otherwise.

Statements following case will be executed upon meeting the case condition. If ‘smart’ is true, a specific ‘console.log’ is executed. The chain of statements will continue to be executed until a break statement is reached and the entire loop terminates immediately after.

If none of the case statements hold true, default gets executed.

Why switch?

You would have realized by now, switch is easier on the eyes. The code appears more structured and is more easy to understand than the bunch of if / else loops.

The earlier if/else loop can be rewritten as -

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function sum(a, b) {
  let smartMessage;
  const c = a + b;
  switch (true) {
    case c <= 0:
      smartMessage = "Negative numbers are not known and cannot be computed.";
      break;
    case c < 10:
      smartMessage = "Less than 10? X, Really?";
      break;
    case c < 50:
      smartMessage = "You could have just returned L";
      break;
    case c < 100:
      smartMessage = "You are nearing the big C";
      break;
    case c < 500:
      smartMessage = "You are nearing the bigger D";
      break;
    default:
      smartMessage = "It is all about M from here on";
  }
  return smartMessage;
}
console.log(sum(100, 2));

More advantages

  • You can break to your advantage

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    
    function whatDay(day) {
      let msg;
      switch (day) {
        case "Monday":
        case "Tuesday":
        case "Wednesday":
        case "Thursday":
        case "Friday":
          msg = "weekday";
          break;
        case "Saturday":
        case "Sunday":
          msg = "weekend";
          break;
        default:
          msg = "Welcome alien, which planet are you from?";
      }
      return msg;
    }
    
    console.log(whatDay("Wednesday"));
    
  • Switch only needs to calculate the condition once and not during every comparison. You can, of course, do the same in if/else by storing the calculation in a variable and using that in your calculations. switch just looks elegant doing the same thing. For e.g,

    1
    2
    3
    4
    
          switch ((date == today && contacts.count > 10) || (date == yesterday && contacts.count > 5 && totalcalls <= 5) {
             ...
             ...
          }
    

Conclusion

Keep calm and switch.

Stay in touch!
Share on

Prashanth Krishnamurthy
WRITTEN BY
Prashanth Krishnamurthy
Technologist | Creator of Things