How to use switch statements in Javascript (with examples)

Switch statements are used, primarily, when you have logic that would otherwise be written as a long-winded conditional statement. As if-else statements become larger and more complex, they can become expensive, and often hard to read.

Here is the syntax for a switch statement (borrowed from w3schools). We’ll break it down line by line:

switch(expression) {
  case x:
    // code block
    break;
  case y:
    // code block
    break;
  default:
    // code block
}

switch(expression)

The expression here is what will tell your program what case to evaluate. For a simple example, you may have a function that prints out animal sounds depending on which animal you pass in. If you pass in cow, you want the function to print out “moo.” If you pass in dog, “bark.” You get the idea!

Here’s how the expression could look in code:

switch (animal){

We’ll get to the different cases in just a moment. The important thing here is to just know that each time you call this switch statement (or the function that contains this switch statement), you’ll need to pass in an animal.

switch(expression) {
  case x:
    // code block
    break;
  case y:
    // code block
    break;
  default:
    // code block
}

case x & case y

The cases, from the animal sounds example above, would be the different types of animals that you may be passing in. One case would be the cow, and the other would be the dog. Important note, the expression you pass in must be an exact match to the case in your switch statement, including being of the same type. If your switch statement was evaluating numbers, you couldn’t have the case be looking for a string of “1” and then pass in the integer of 1.

Inside of your case, you’ll simply put the code block that you wish to execute. In code:

case "dog": 
   console.log("bark!")
switch(expression) {
  case x:
    // code block
    break;
  case y:
    // code block
    break;
  default:
    // code block
}

break

The break statement is optional, but is often very helpful when using switch statements. It means that the program will break out of the switch statement when the matched statement is executed. In other words, when your program hits “dog”, it will print out the “bark” and then break out of that switch statement. If you don’t include the break statement, the next case will be executed regardless of whether the evaluation matches the case.

switch(expression) {
  case x:
    // code block
    break;
  case y:
    // code block
    break;
  default:
    // code block
}

default

The optional default keyword is what will happen if no cases match. An example of this is if your two cases are “dog” and “cow”, and your expression evaluates to “cat”. If you don’t include a default statement, the program will continue to the statement after the switch.

When to use switch statements

Switch statements are most useful when you have conditionals with three or more cases. For the purpose of simplicity in this post, I used only two cases for the examples (“dog” and “cow”), however, if you only have two cases in your code, it’s probably best to stick with an if-else statement. However, if you want to have matching code blocks for three or more cases, switch statements are more efficient and more readable than an if-else statement.