JavaScript switch statement

Intro to JavaScript's switch statement

Switch statements can be used to replace a series of if/else statements. Reasons for switch statements vary, but it's up to you as to whether you want to use them or not. If you're dealing with complex if/else statments, it could prove useful. Either way, it's good to understand what's available.

Syntax

The flow starts with the opening switch statement block. You pass an expression (i.e. something you want to check against), into the switch statement as an argument.

const expression = "Some expression here";

switch (expression) {
  // rest of switch statement goes in here 
}

Normaly this would be some variable you want to check against. I'm going to use animals in our example. So we would adjust our initial switch statement to this.

const animal = "Bear";

switch (animal) {
  // rest of switch statement goes in here
}

Next you need to add what are called "cases" inside of the switch statement. You'll add a case for each value you want to compare to the argument that was passed into your switch statement. If your case matches the argument, the code inside of that case clause will run.

case 'value':
  // Insert code that executes if value matches the argument passed into switch statement
  break;

case: Value you want to check against compared to the argument passed into your switch statement.

break: Stop the execution of the case clause and exit out of the switch statement.

You can add/remove as many "cases" as you would like. Let's continue with the our animal example and add in few more cases.

switch (animal) {
  case "Deer":
    // Code to run
    break;
  case "Fox":
    // Code to run
    break;
  case "Rabbit":
    // Code to run
    break;
  case "Elk":
    // Code to run
    break;
}

Finally, you add the default statement as the last case in the switch statement block. This means if none of the other cases match, you would run the code inside the default case statement.

default:
  // Default code to run if none of the cases match the switch statement argument

Let's combine all of this into a complete switch statement using our animal examples.

const animal = "Bear";

switch (animal) {
  case "Deer":
    alert("Deer matched");
    break;
  case "Fox":
    alert("Fox matched");
    break;
  case "Rabbit":
    alert("Rabbit matched");
    break;
  case "Bear":
    alert("Bear matched");
    break;
  case "Elk":
    alert("Elk matched");
    break;
  default:
    alert('run this alert if none of the other cases match');
}

What does this switch statement look like as an if/else statement?

Let's see what this switch statement would look like as an if/else statement.

const animal = "Bear";

if (animal === "Deer") {
  alert("Deer matched")
} else if (animal === "Fox") {
  alert("Fox matched");
} else if (animal === "Rabbit") {
  alert("Rabbit matched");
} else if (animal === "Bear") {
  alert("Bear matched");
} else if (animal === "Elk") {
  alert("Elk matched")
};

What happens if I don't add break statements?

Not adding a break statement would allow for the switch statement to run the case that matches, and run each case after that (including the default case).

So for example:

const animal = "Bear";

switch (animal) {
  case "Deer":
    alert("Deer matched");
  case "Fox":
    alert("Fox matched");
  case "Rabbit":
    alert("Rabbit matched");
  case "Bear":
    alert("Bear matched");
  case "Elk":
    alert("Elk matched");
  default:
    alert('run this alert if none of the other cases match');
}

This would alert:

• Bear matched
• Elk matched
• run this alert if none of the other cases match.

This isn't what we're looking to do, so you would add back your break statement.