JS Switch...Case

Previous Page Next Page

Using the Switch...Case Statement

The switch...case statement is another option to the if...else if...else statement, performing a similar function. The switch...case statement checks a variable or expression against multiple values until it finds a match, then executes the block of code that corresponds to that match. Its syntax is:

switch(x){
    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 displays the name of the day of the week.

Example

Try this code »

var 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 retrieves the weekday as a number ranging from 0 to 6, where 0 denotes Sunday. Check out the JavaScript date and time chapter for more details on date methods.

Note: In a switch...case statement, the expression or variable value is compared to the case value using the strict equality operator (===). Thus, if x = "0", it won't match case 0: because their data types are different.

The switch...case statement diverges from the if...else statement in a crucial manner. The switch statement runs line by line (i.e., statement by statement), and once JavaScript encounters a case clause that evaluates to true, it not only executes the code linked to that case clause but also runs all subsequent case clauses until the end of the switch block automatically.

To prevent this, you need to include a break statement after each case (as illustrated in the example above). The break statement instructs the JavaScript interpreter to exit the switch...case statement block once it executes the code associated with the first true case.

However, the break statement is not obligatory for the case or default clause, especially when it appears last in a switch statement. Nonetheless, it's a good programming practice to terminate the final case or default clause in a switch statement with a break. This practice helps prevent potential programming errors later on if another case statement is added to the switch statement.

The default clause is optional and specifies the actions to take if no case matches the switch expression. The default clause doesn't have to be the last clause in a switch statement. Here's an example where default is not the final clause.

Example

Try this code »

var 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

Every case value must be distinct within a switch statement. However, different cases do not necessarily require unique actions. Multiple cases can execute the same action, as demonstrated here:

Example

Try this code »

var 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.");
}

Previous Page Next Page