DEV Community

Christian Graves
Christian Graves

Posted on

JavaScript Switch Statement

I'm going to stick with my theme of conditional statements this week and introduce the switch statement. The switch statement is basically the cousin of the if-else if statement. It provides the same functionality of the else if statement but instead of using an evaluated conditional for the initial if and subsequent else if's, it uses one evaluated expression instead with cases. I have provided the syntax of the switch statement below.


switch(expression){

    case 0:
        //some executed code
        break;

    case 1:
        //some executed code
        break;

    case 2: 
        //some executed code
        break;

    default:
        //some executed code
}

From the above syntax you can see that the switch statement takes in an expression and not a conditional. Also you can see that “cases” replace the else if statements from the conditional statement. The expression that is taken in is evaluated and the value that is generated should match one of the cases to execute the code for that case. I say the value "should" match one of the cases, but if it does not, that is why the default case is there. It acts as the else statement if no cases match. Also like the else in a conditional statement, the default case is optional and is not needed. Do note, you need the break statement at the end of each case so the program knows to move out of the switch statement. You can see a simple example below and I have included an interactive jsbin also.


const x = 3;
let month = "";

switch(x){
  case 1:
    month = "January";
    break;

  case 2:
    month = "February";
    break;

  case 3:
    month = "March";
    break;

  case 4:
    month = "April";
    break;

  case 5:
    month = "May";
    break;

  case 6:
    month = "June";
    break;

  default:
    month = "Not one of the first 6 months";

}

In the example you can see that the value of x is evaluated to be 3 as that is what the variable is set to. The switch statement will compare the value of 3 to each case number using strict comparison (===). Since x matches case 3 the variable month will be set to "March".

Another thing to note about cases in the switch statement is that they do not have to be numbers but any value. We could have set the variable x to a month name string and changed the case values to the first six months of the year. As long as the values for the cases are also strings the switch statement would still work. The last thing I want to say about switches is that multiple cases can be used to execute the same code. This can help save you time writing code and improve the readability of your code. I have a small example below.

const x = "April";
let quarter = "";

switch(x){
  case "January":
  case "February":
  case "March":
    quarter = "Month is in Q1";
    break;

  case "April":
  case "May":
  case "June":
    quarter = "Month is in Q2";
    break;

  default:
    quarter = "Month is not in Q1 or Q2";

}

Top comments (0)