JavaScript Switch...Case Statements
In this tutorial you will learn how to use the switch...case statement to test or evaluate an expression with different values in JavaScript.
Using the Switch...Case Statement
The switch..case statement is an alternative to the if...else if...else statement, which does almost the same thing. The switch...case statement tests a variable or expression against a series of values until it finds a match, and then executes the block of code corresponding to that match. It's syntax is:
case value1:
// Code to be executed if x === value1
break;
case value2:
// Code to be executed if x === value2
break;
...
default:
// Code to be executed if x is different from all values
}
Consider the following example, which display the name of the day of the week.
Example
Try this code »let d = new Date();
switch(d.getDay()) {
case 0:
alert("Today is Sunday.");
break;
case 1:
alert("Today is Monday.");
break;
case 2:
alert("Today is Tuesday.");
break;
case 3:
alert("Today is Wednesday.");
break;
case 4:
alert("Today is Thursday.");
break;
case 5:
alert("Today is Friday.");
break;
case 6:
alert("Today is Saturday.");
break;
default:
alert("No information available for that day.");
break;
}
The getDay()
method returns the weekday as a number from 0 and 6, where 0 represents Sunday. See the JavaScript date and time chapter to learn more about date methods.
Note: In a switch...case statement, the value of the expression or variable is compared against the case value using the strict equality operator (===
). That means if x = "0"
, it doesn't match case 0:
, because their data types are not equal.
The switch...case statement differs from the if...else statement in one important way. The switch statement executes line by line (i.e. statement by statement) and once JavaScript finds a case
clause that evaluates to true, it's not only executes the code corresponding to that case clause, but also executes all the subsequent case
clauses till the end of the switch
block automatically.
To prevent this you must include a break
statement after each case
(as you can see in the above example). The break
statement tells the JavaScript interpreter to break out of the switch...case statement block once it executes the code associated with the first true case.
The break
statement is however not required for the case
or default
clause, when it appears at last in a switch statement. Although, it a good programming practice to terminate the last case
, or default
clause in a switch statement with a break
. It prevents a possible programming error later if another case statement is added to the switch statement.
The default
clause is optional, which specify the actions to be performed if no case
matches the switch expression. The default
clause does not have to be the last clause to appear in a switch statement. Here's an example, where default
is not the last clause.
Example
Try this code »let d = new Date();
switch(d.getDay()) {
default:
alert("Looking forward to the weekend.");
break;
case 6:
alert("Today is Saturday.");
break;
case 0:
alert("Today is Sunday.");
}
Multiple Cases Sharing Same Action
Each case value must be unique within a switch statement. However, different cases don't need to have a unique action. Several cases can share the same action, as shown here:
Example
Try this code »let d = new Date();
switch(d.getDay()) {
case 1:
case 2:
case 3:
case 4:
case 5:
alert("It is a weekday.");
break;
case 0:
case 6:
alert("It is a weekend day.");
break;
default:
alert("Enjoy every day of your life.");
}