Javascript Switch Statement Tutorial

The switch statement

Where the ternary operator is a different method to write an if else statement, the switch is a different way of writing an else if ladder.

We typically use a switch when we want to directly compare one main value against many others, like x == a || x == b || x == c.

The syntax for a switch statement is a bit complex at first, so let’s build it step by step.

switch (main_value) {

}

First, we write the keyword switch , followed by the main_value we want to compare against in open and close parentheses. Then we add a code block with open and close curly braces for our match cases and execution code.

switch (main_value) {

  case check_against_main_value:
    // execution statement(s)
    break;
}

Inside the code block, we have our match cases, these values are all compared against the main value.

We write the keyword case , followed by the value we want to compare against the main value and a colon operator ( : ). On the next line we write any execution statements we want if the case value and the main value is the same. Lastly, we write the break control statement and a semicolon ( ; ).

The break control statement will indicate to the translator that we’ve found the match and it can stop going through the switch. It will break out of the switch and continue on to any code outside and below it.

We can have as many match cases as we need.

switch (main_value) {

  case check_against_main_value:
    // execution statement(s)
    break;
  case check_against_main_value:
    // execution statement(s)
    break;

  default:
    // execution statement(s) if
    // none of the evaluations
    // above prove true
}

Finally we have the default case. The default case is like the else statement, it’s a catch-all fallback if none of the other cases match the main value.

The default case doesn’t have a break statement because it will always be the last case in a switch.

Now that we know the syntax, let’s see a practical example.

<script>

  var student_grade = 'B';

  switch (student_grade) {

      case 'A':
          document.write("You got an A. Excellent!");
          break;
      case 'B':
          document.write("You got a B. Good Job.");
          break;
      case 'C':
          document.write("You got a C. Well done.");
          break;
      case 'D':
          document.write("You got a D. You passed.");
          break;
      case 'F':
          document.write("You got an F. Sorry, you failed.");
          break;

      default:
          document.write("Unknown grade, please see the teacher.")
  }

</script>

In the example above, our main value is the grade that the student received. Our match cases are the grades that will be compared to the student’s grade. Once a case matches the student’s grade, the translator will print a message to the page and break out of the switch.

When to use the switch

A switch statement is only used when we want to compare one value to many.

If you’re writing a long else if ladder, and you only compare against one value, try rewriting the code into a switch statement.

Summary: Points to remember

• A switch is an alternative method to write an else if ladder.
• A switch is used when we want to compare many values against one.
• A switch uses match cases to compare its values against a main value.
• Each match case includes a break control statement to stop the execution of the switch when it finds a match.
• The default case is a catch-all fallback when none of the cases match the main value.