JavaScript switch case
Summary: in this tutorial, you will learn how to use the JavaScript switch statement to execute a block based on multiple conditions.
Introduction to the JavaScript switch case statement
The switch statement evaluates an expression, compares its result with case values, and executes the statement associated with the matching case value.
The following illustrates the syntax of the switch statement:
switch (expression) {
case value1:
statement1;
break;
case value2:
statement2;
break;
case value3:
statement3;
break;
default:
statement;
}Code language: JavaScript (javascript)
How it works.
- First, evaluate the
expressioninside the parentheses after theswitchkeyword. - Second, compare the result of the expression with the
value1,value2, … in thecasebranches from top to bottom. Theswitchstatement uses the strict comparison (===). - Third, execute the statement in the
casebranch where the result of theexpressionequals the value that follows thecasekeyword. Thebreakstatement exits theswitchstatement. If you skip thebreakstatement, the code execution falls through the originalcasebranch into the next one. If the result of theexpressiondoes not strictly equal to any value, theswitchstatement will execute thestatementin thedefaultbranch.
That the switch statement will stop comparing the expression‘s result with the remaining case values as long as it finds a match.
The switch statement is like the if…else…if statement. But it has more readable syntax.
The following flowchart illustrates the switch statement:
In practice, you often use a switch statement to replace a complex if...else...if statement to make the code more readable.
Technically, the switch statement is equivalent to the following if...else...if statement:
if (expression === value1) {
statement1;
} else if (expression === value2) {
statement2;
} else if (expression === value3) {
statement3;
} else {
statement;
}
Code language: JavaScript (javascript)
JavaScript switch case examples
Let’s take some examples of using the JavaScript switch statement.
1) Using JavaScript switch statement to get the day of the week
The following example uses the switch statement to get the day of the week based on a day number:
let day = 3;
let dayName;switch (day) {
case 1:
dayName = 'Sunday';
break;
case 2:
dayName = 'Monday';
break;
case 3:
dayName = 'Tuesday';
break;
case 4:
dayName = 'Wednesday';
break;
case 5:
dayName = 'Thursday';
break;
case 6:
dayName = 'Friday';
break;
case 7:
dayName = 'Saturday';
break;
default:
dayName = 'Invalid day';
}
console.log(dayName); // Tuesday
Code language: JavaScript (javascript)
Output:
Tuesday
How it works.
First, declare the day variable that holds the day number and the day name variable (dayName).
Second, get the day of the week based on the day number using the switch statement. If the day is 1, the day of the week is Sunday. If the day is 2, the day of the week is Monday, and so on.
Third, output the day of the week to the console.
2) Using the JavaScript switch statement to get the day count based of a month
The following example uses the switch statement to get the day count of a month:
let year = 2016;
let month = 2;
let dayCount;switch (month) {
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
dayCount = 31;
break;
case 4:
case 6:
case 9:
case 11:
dayCount = 30;
break;
case 2:
// leap year
if ((year % 4 == 0 && !(year % 100 == 0)) || year % 400 == 0) {
dayCount = 29;
} else {
dayCount = 28;
}
break;
default:
dayCount = -1; // invalid month
}
console.log(dayCount); // 29
Code language: JavaScript (javascript)
In this example, we have four cases:
- If the month is 1, 3,5, 7, 8, 10, or 12, the number of days in a month is 31.
- If the month is 4, 6, 9, or 11, the number of days in that month is 30.
- If the month is 2, and the year is not the leap year, the number of days is 28. If the year is the leap year, the number of days is 29.
- If the month is not in the valid range (1-12), the
defaultbranch executes and sets thedayCountvariable to -1, which indicates the invalid month.
Summary
- The
switchstatement evaluates an expression, compare its result withcasevalues, and execute the statement associated with the matching case. - Use the
switchstatement to rather than a complexif...else...ifstatement to make the code more redable. - The
switchstatement uses the strict comparison (===) to compare theexpressionwith thecasevalues.