How to write switch statement in JavaScript

Reading Time: 2 minutes

Very often, usage of conditional statement is required when writing programming logic and this is where switch statement comes into action. One other method is if-else where you can refer to this article for more illustrations.

If-else Statement

If-else statement is really useful when you have a small number of code blocks to evaluate with an expression. It make the code really simple to read as the code block that matches with the expression will be executed and others will be skip.

Since this article is more on the topic of switch statements, we will move straight on to talk about it now.

Switch Statement

Switch statement in javascript also evaluate an expression and see if it matches with a certain code block. While it can be use interchangeably with if-else statement, switch statement can be use when there are multiple code codeblocks which improve code readability. Other than that, switch can also perform complex execution where we will go into them later.

Examples

Let’s start with a simple example where we have a switch statement. Here, we pass in a test variable and the code will compare the expression with individual cases from top to bottom and execute the code blocks once it matches.

Notice that there is a `break` code after each code block. This is to ensure that the code below will not be executed.

function testSwitch(testVar) {
  switch(testVar) {
    case 1: 
      console.log(1);
      break;
    case 5: 
      console.log(5);
      break;
    case 10:
      console.log(10);
      break;
    default:
      console.log('nothing match');
  }
}

testSwitch(10);
// Output: 10

testSwitch(5);
// Output: 5

testSwitch(1);
// Output: 1

testSwitch(3);
// Output: nothing match

Let’s look at another example below with some alterations. Here we have a few cases where only the middle 2 matches with the expression. We have removed `break` from all the code block except for the one before default code block.

Although the variable is 2, what happens in switch is that once it match with one of the cases, it will continue to execute other code blocks below it without matching with the case until it finds a `break` keyword.

let ranking = 2;

switch(true) {
  case ranking > 2:
    console.log('This condition should not match.');
  case ranking <= 10: 
    console.log('You are in the top 10!');
  case ranking <= 5:
    console.log('You are in the top 5!');
  case ranking > 2:
    console.log('You are below the top 2!');
    break;
  default:
    console.log('Your ranking is below 10.');
}

// Results:
// You are in the top 10!
// You are in the top 5!
// You are below the top 2!

From here, we can see that switch statement is not just more structured, it can also use to serve complex logic where you have some set of case that wants to execute the same set of code.

Conclusion

Switch statement can be use interchangeably with if-else statement but switch allow a structured code. It can be very flexible but do be careful with the ‘break’ keyword so that it does not spoil your logic!

For more detailed examples and explanations, you may also refer to here.