If you find yourself repeatingelse ifstatements in your code, where each condition is based on the same value, then it might be time to use a switch statement.

if (option === 1) {
  console.log("You selected option 1.");
} else if (option === 2) {
  console.log("You selected option 2.");
} else if (option === 3) {
  console.log("You selected option 3.");
} else if (option === 4) {
  console.log("You selected option 4.");
} else if (option === 5) {
  console.log("You selected option 5.");
} else if (option === 6) {
  console.log("You selected option 6.");
}

Switch statement

A switch statementis an another way to chain multipleelse ifstatements that are based on the same valuewithout using conditional statements. Instead, you just_s witch_which piece of code is executed based on a value.

switch (option) {
  case 1:
    console.log("You selected option 1.");
  case 2:
    console.log("You selected option 2.");
  case 3:
    console.log("You selected option 3.");
  case 4:
    console.log("You selected option 4.");
  case 5:
    console.log("You selected option 5.");
  case 6:
    console.log("You selected option 6.");
}

Here, eachelse ifstatement (option === [value]) has been replaced with acaseclause (case: [value]) and those clauses have been wrapped inside the switch statement.

When the switch statement first evaluates, it looks for the firstcaseclause whose expression evaluates to the same value as the result of the expression passed to the switch statement. Then, it transfers control to thatcaseclause, executing the associated statements.

So, if you setoptionequal to3...

var option = 3;

switch (option) {
  ...
}

Prints:
You selected option 3.
You selected option 4.
You selected option 5.
You selected option 6.

...then the switch statement prints out options 3, 4, 5, and 6.

But that’s not exactly like the originalif...elsecode at the top? So what’s missing?

Break statement

Thebreak statementcan be used to terminate a switch statement and transfer control to the code following the terminated statement. By adding abreakto eachcaseclause, you fix the issue of the switch statement_falling-through_to other case clauses.

var option = 3;

switch (option) {
  case 1:
    console.log("You selected option 1.");
    break;
  case 2:
    console.log("You selected option 2.");
    break;
  case 3:
    console.log("You selected option 3.");
    break;
  case 4:
    console.log("You selected option 4.");
    break;
  case 5:
    console.log("You selected option 5.");
    break;
  case 6:
    console.log("You selected option 6.");
    break; // technically, not needed
}

Prints:You selected option 3.

Falling-through: Swith

In some situations, you might want to leverage the "falling-through" behavior of switch statements to your advantage.

For example, when your code follows a hierarchical-type structure.

var tier = "nsfw deck";
var output = "You’ll receive "

switch (tier) {
  case "deck of legends":
    output += "a custom card, ";
  case "collector's deck":
    output += "a signed version of the Exploding Kittens deck, ";
  case "nsfw deck":
    output += "one copy of the NSFW (Not Safe for Work) Exploding Kittens card game and ";
  default:
    output += "one copy of the Exploding Kittens card game.";
}

console.log(output);

Prints:You’ll receive one copy of the NSFW (Not Safe for Work) Exploding Kittens card game and one copy of the Exploding Kittens card game.

In this example, based on thesuccessful Exploding Kittens Kickstarter campaign(a hilarious card game created by Elan Lee), each successive tier builds on the next by adding more to the output. Without any break statements in the code, after the switch statement jumps to the"nsfw deck", it continues to fall-through until reaching the end of the switch statement.

Also, notice thedefaultcase.

var tier = "none";
var output = "You’ll receive ";

switch (tier) {
  ... 
  default:
    output += "one copy of the Exploding Kittens card game.";
}

console.log(output);

Prints:You’ll receive one copy of the Exploding Kittens card game.

You can add adefaultcase to a switch statement and it will be executed when none of the values match the value of the switch expression.

results matching ""

    No results matching ""