JAVASCRIPT BASIC
JAVASCRIPT & DOM
JAVASCRIPT & BOM
JAVASCRIPT ADVANCED
JAVASCRIPT EXAMPLES
JAVASCRIPT REFERENCE

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:

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 display the name of the day of the week.

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.

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:

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.");
}
Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties