Switch it Up: Switch Statements in JavaScript

When I first learned the fundamentals of programming in JavaScript, I breezed over switch statements. They’re just an alternative syntax for writing simple conditional statements, and I was already overwhelmed with memorizing the “default” conditional statement syntax alongside all the other new JavaScript I was learning.

But I’ve since revisited switch statements after encountering them in other developers’ code, and I find myself a convert.

Here’s your standard conditional statement:

if (condition) {
  //  block of code to execute if the condition evaluates as true
} else {
  //  block of code to execute if the condition evaluates as false
}

The above statement allows you to check for a single condition’s truthiness, and execute some code if the condition is true; the statement would execute some alternative code (the code inside the “else” block) if the condition is false.

Using similar syntax as that above, you could check multiple conditions for truthiness.

if (myVacation === "beach") {
  console.log(["sunscreen", "towel", "magazines"]);
} else if (myVacation === "city") {
  console.log(["walking shoes", "museum guide", "subway map"]);
} else if (myVacation === "mountains") {
  console.log(["hiking boots", "tent", "bug spray"]);
} else if (myVacation === "staycation") {
  console.log(["sweatpants", "Netflix", "snacks"]);
}

In the above if/else statement, every “if” condition is checking for nearly identical information: it’s evaluating whether or not the value of the myVacation variable is equal to a specific string. The value of that string changes with each condition — first we’re checking whether myVacation is equal to “beach”, then we’re checking whether myVacation is equal to “city”, and so on — but in every case, we’re checking whether the string is equal to the value of myVacation.

Using switch statement syntax here could DRY up our code and make its functionality more evident:

switch(myVacation) {
  case "beach":
    console.log(["sunscreen", "towel", "magazines"]);
    break;
  case "city":
    console.log(["walking shoes", "museum guide", "subway map"]);
    break;
  case "mountains":
    console.log(["hiking boots", "tent", "bug spray"]);
    break;
  case "staycation":
    console.log(["sweatpants", "Netflix", "snacks"]);
    break;
  default:
    // code block
}

When a switch statement executes, it checks each case against the given expression (in this instance, myVacation) for a match. If it finds a match, it will execute the code associated with that case. Then, thanks to the “break” keyword, the switch statement will be exited and no further cases will be checked. If no match is found among the cases, the code inside the “default” block will run.

Important: if a break keyword is not included after a matching case’s code, the code inside each case block that follows the matching case will run, regardless of whether it matches the expression.

Note: under the hood, switch statements use a hard, or strict, equals (===) comparison, meaning that the expression and the matching case must be of the same data type.

Switch statements are just an alternative way of structuring if/else conditionals, but they’re handy if you’re looking for an easier-to-read syntax when checking simple equivalency between an expression and a large number of cases.