JavaScript Switch Statements

Switch is a conditional statement like 'if ... else ...', but different in that the 'switch' statement allows the variable to be tested for equality with a list of values.

Use 'switch' to select one of many code blocks to be executed. This is a perfect solution for nested 'if...else' statements.

A 'switch' statement is as follows:

switch (expression) {
　　case value1:　　
　　　　//The statement is executed
　　　　//The result of the expression matches value1Match
　　break;
　　case value2:　　
　　　　//The statement is executed
　　　　//The result of the expression matches value2Match
　　break;
　　...
　　case valueN:　　
　　　　//The statement is executed
　　　　//The result of the expression matches value N
　　break;
　　default:
　　　//When none of the above are executed
　　　//Execute the code block here
　}

According to the logic of the above code block, this is the sequence of events that will occur:

• The 'switch' expression is evaluated once

• Compare the value of the expression with the value of each case

• If there is a match, execute the relevant code block

• If none of the cases match, execute the default code block

The following example uses the working day number to calculate the day of the week:

var day;
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";
　break;
default:　
　day = "Undefined Day";
}

The 'break' keyword

The keyword 'break' associated with each 'case' label ensures that the program will exit the switch and continue executing the statement after the switch once the matching statement is executed. If 'break' is omitted, the program will continue executing the next statement after the 'switch' statement.

If you forget to rest, the script will start running from the conditions that are met and then run the situation under the conditions that are met:

var num = Number(document.querySelector("input").value);
var text;
switch (num) {
　　　case　1:　
　　　　text = "The number you entered is"　1";
　　　case　2:　
　　　　text = "The number you entered is"　2";
　　　case　3:　
　　　　text = "The number you entered is"　3";
　　　case　4:　
　　　　text = "The number you entered is"　4";
　　　case　5:　
　　　　text = "The number you entered is"　5";
　　　default:　
　　　　text = "Execute default statement";
}

There is no need to break the last case (i.e., default) in the switch block. Because the statement block ends here eventually.

default Keyword

If there is no case match, the default keyword specifies some code to be executed.

There can only be one default statement in the switch. Although it is optional, it is recommended to use it because it can handle unexpected situations.

Multiple Conditions

Sometimes, you may want the same code to be used for different cases, or use general code.

This is an example of a switch statement with an operation order, where four different values perform the same operation:

var num = Number(document.querySelector("input").value);
var text;
switch (num) {
　　　case　1:
　　　case　2:
　　　case　3:
　　　case　4:
　　text = "The number you entered is between　1　-　4";
　　break;
　　　case　5:
　　　case　6:
　　　case　7:
　　　case　8:
　　text = "The number you entered is between　5　-　8";
　　break;　
　　　default: text = "Execute default statement";
}

If multiple cases match the value, the first case will be selected.

If the matching case is not found, the program will continue to use the default label.

If the default label is not found, the program will continue to execute the statement after the switch.