6.4 JS Switch

The JavaScript Switch Statement

Use the switch statement to select one of many code blocks to be executed.

Syntax

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

This is how it works:

• The switch expression is evaluated once.
• The value of the expression is compared with the values of each case.
• If there is a match, the associated block of code is executed.
• If there is no match, the default code block is executed.

Example 1: JS switch - break keyword

• The getDay() method returns the weekday as a number between 0 and 6.
• (Sunday=0, Monday=1, Tuesday=2 ..)
• This example uses the weekday number to calculate the weekday name:

switch (new Date().getDay()) {
  case 0:
    day = "Sunday";
    break;
  case 1:
    day = "Monday";
    break;
  case 2:
     day = "Tuesday";
    break;
  case 3:
    day = "Wednesday";
    break;
  case 4:
    day = "Thursday";
    break;
  case 5:
    day = "Friday";
    break;
  case 6:
    day = "Saturday";
}

The result - today is:

The default Keyword

The default keyword specifies the code to run if there is no case match:

Example 2: JS switch - default keyword part 1

• The getDay() method returns the weekday as a number between 0 and 6. If today is neither Saturday (6) nor Sunday (0), write a default message:

let text;
switch (new Date().getDay()) {
  case 6:
    text = "Today is Saturday";
    break;
  case 0:
    text = "Today is Sunday";
    break;
  default:
    text = "Are you looking forward to the Weekend?";
}

The result is:

The default case does not have to be the last case in a switch block:

Example 3: JS switch - default keyword part 2

switch (new Date().getDay()) {
  default:
    text = "Are you looking forward to the Weekend?";
    break;
  case 6:
    text = "Today is Saturday";
    break;
  case 0:
    text = "Today is Sunday";
}

If default is not the last case in the switch block, remember to end the default case with a break.

Common Code Blocks

• Sometimes you will want different switch cases to use the same code.
• In this example case 4 and 5 share the same code block, and 0 and 6 share another code block:

Example 3: JS switch - Common Code Blocks

switch (new Date().getDay()) {
  case 4:
  case 5:
    text = "It will soon be the Weekend";
    break;
  case 0:
  case 6:
    text = "It is the Weekend";
    break;
  default:
    text = "I am looking forward to the Weekend";
}

Strict Comparison

• Switch cases use strict comparison (===).
• The values must be of the same type to match.
• A strict comparison can only be true if the operands are of the same type.
• In this example there will be no match for x:

Example 4: JS switch - Strict Comparison

var x = "0";
switch (x) {
  case 0:
    text = "Off";
    break;
  case 1:
    text = "On";
    break;
  default:
    text = "No value found";
}