JS Switch Case

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 a substitute for the if...else if...else statement, which does almost the same thing. The switch...case statement experiments with a variable or expression against a series or sequence of values until it finds a match, and then executes the block of code corresponding to that match. Its Syntax:

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:

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;
}

Try with example

The getDay() method returns the weekday as an integer from 0 and 6, where 0 represents Sunday. Check the JavaScript date and time chapter to learn more about date methods.

Note: The value of the expression or variable in a switch...case statement is compared against the case value using the strict equality operator (===). That means if x = "0", it doesn't match case 0, simply because their data types are not equal.

The switch...case statement differs from the if...else statement crucially. The switch statement executes line by line or statement by statement and once JavaScript discovers a case clause that evaluates to true, it will not only execute the code corresponding to that case clause but also executes all the subsequent case clauses till the end of the switch automatically block.

To prevent this a break statement must be included after each case (as you can see in the above example). The break statement notifies the JavaScript interpreter to break out of the switch...case statement block immediately executes the code associated with the first true case.

However, the break statement is not needed for the case or default clause when it appears at last in a switch statement. Nevertheless, it is a good programming practice to terminate the last case, or default clause in a switch statement with a break. A possible programming error is prevented if another case statement is added to the switch statement.

The default clause which specifies the actions to be performed if no case matches the switch expression is optional. For the default clause to appear in a switch statement it does not have to be the last clause. Here's an example, where default is not the last clause in a switch statement.

Example:

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

Try with example

Multiple Cases Sharing Same Action

Within a switch statement, each case value must be unique. However, different cases don't need to have a unique action since several cases can share the same action, as shown here:

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

Try with example