How To Use the Switch Statement in JavaScript
Table of Contents
Introduction #
Conditional statements are among the most useful and common features of all programming languages. How To Write Conditional Statements in JavaScript describes how to use the if
, else
, and else if
keywords to control the flow of a program based on different conditions, which in JavaScript are often the result of user input.
In addition to if...else
, JavaScript has a feature known as a switch
statement. switch
is a type of conditional statement that will evaluate an expression against multiple possible cases and execute one or more blocks of code based on matching cases. The switch
statement is closely related to a conditional statement containing many else if
blocks, and they can often be used interchangeably.
In this tutorial, we will learn how to use the switch
statement, as well as how to use the related keywords case
, break
, and default
. Finally, we’ll go through how to use multiple cases in a switch
statement.
Switch #
The switch
statement evaluates an expression and executes code as a result of a matching case. The basic syntax is similar to that of an if
statement. It will always be written with switch () {}
, with parentheses containing the expression to test, and curly brackets containing the potential code to execute.
Below is an example of a switch
statement with two case
statements, and a fallback known as default
.
switch (expression) {
case x:
// execute case x code block
break;
case y:
// execute case y code block
break;
default:
// execute default code block
}
Following the logic of the code block above, this is the sequence of events that will take place:
The expression is evaluated.
The first case
, x
, will be tested against the expression. If it matches, the code will execute, and the break
keyword will end the switch
block.
If it does not match, x
will be skipped and the y
case will be tested against the expression. If y
matches the expression, the code will execute and exit out of the switch
block.
If none of the cases match, the default
code block will run.
Let’s make a working example of a switch
statement following the syntax above. In this code block, we will find the current day of the week with the new Date()
method, and getDay()
to print a number corresponding to the current day. `` stands for Sunday, all the way through 6
which stands for Saturday. We’ll start by setting up our variable.
const day = new Date().getDay();
Using switch
, we will send a message to the console each day of the week. The program will run in order from top to bottom looking for a match, and once one is found, the break
command will halt the switch
block from continuing to evaluate statements.
week.js
// Set the current day of the week to a variable, with 0 being Sunday and 6 being Saturday
const day = new Date().getDay();
switch (day) {
case 0:
console.log("It's Sunday, time to relax!");
break;
case 1:
console.log("Happy Monday!");
break;
case 2:
console.log("It's Tuesday. You got this!");
break;
case 3:
console.log("Hump day already!");
break;
case 4:
console.log("Just one more day 'til the weekend!");
break;
case 5:
console.log("Happy Friday!");
break;
case 6:
console.log("Have a wonderful Saturday!");
break;
default:
console.log("Something went horribly wrong...");
}
'Just one more day 'til the weekend!'
This code was tested on a Thursday, which corresponds to 4
, therefore the console output was Just one more day 'til the weekend!
. Depending on what day of the week you are testing the code, your output will be different. We have included a default
block at the end to run in case of an error, which in this case should not happen as there are only 7 days of the week. We also could have, for example, only printed results for Monday to Friday, and the default
block could have had the same message for the weekend.
If we had omitted the break
keyword in each statement, none of the other case
statements would have evaluated to true, but the program would have continued to check until it reached the end. In order to make our programs faster and more efficient, we include the break
.
Switch Ranges #
There might be an occasion in which you will need to evaluate a range of values in a switch
block, as opposed to a single value as in our example above. We can do this by setting our expression to true
and doing an operation within each case
statement.
To make this easier to understand, we will use a familiar example. In the conditional statements tutorial, we made a grading app which would take a number score and convert it to a letter grade, with the following requirements.
Grade of 90 and above is an A
Grade of 80 to 89 is a B
Grade of 70 to 79 is a C
Grade of 60 to 69 is a D
Grade of 59 or below is an F
Now we can write that as a switch
statement. Since we’re checking a range, we will perform the operation in each case
to check if each expression is evaluating to true
then break out of the statement once the requirements for true
have been satisfied.
grades.js
// Set the student's grade
const grade = 87;
switch (true) {
// If score is 90 or greater
case grade >= 90:
console.log("A");
break;
// If score is 80 or greater
case grade >= 80:
console.log("B");
break;
// If score is 70 or greater
case grade >= 70:
console.log("C");
break;
// If score is 60 or greater
case grade >= 60:
console.log("D");
break;
// Anything 59 or below is failing
default:
console.log("F");
}
'B'
The expression in parentheses to be evaluated is true
in this example. This means that any case
that evaluates to true
will be a match.
Just like with else if
, switch
is evaluated from top to bottom, and the first true match will be accepted. Therefore, even though our grade
variable is 87
and therefore evaluates to true
for C and D as well, the first match is B, which will be the output.
Multiple Cases #
You may encounter code in which multiple cases should have the same output. In order to accomplish this, you can use more than one case
for each block of code.
In order to test this, we are going to make a small application matching the current month to the appropriate season. First, we will use the new Date()
method to find a number corresponding to the current month, and apply that to the month
variable.
const month = new Date().getMonth();
The new Date().getMonth()
method will output a number from to `11`, with
being January and 11
being December. At the time of this publication, the month is September, which will correspond to 8
.
Our application will output the four seasons with the following specifications for simplicity:
Winter: January, February, and March
Spring: April, May, and June
Summer: July, August, and September
Autumn: October, November, and December
Below is our code.
seasons.js
// Get number corresponding to the current month, with 0 being January and 11 being December
const month = new Date().getMonth();
switch (month) {
// January, February, March
case 0:
case 1:
case 2:
console.log("Winter");
break;
// April, May, June
case 3:
case 4:
case 5:
console.log("Spring");
break;
// July, August, September
case 6:
case 7:
case 8:
console.log("Summer");
break;
// October, November, December
case 9:
case 10:
case 11:
console.log("Autumn");
break;
default:
console.log("Something went wrong.");
}
When we run the code, we’ll receive output identifying the current season based on the specifications above.
Summer
The current month at the time of publication was 8
, which corresponded to one of the case
statements with the "Summer"
season output.
Conclusion #
In this article, we reviewed the switch
statement, a type of conditonal statement which evaluates an expression and outputs different values based on matching results. We reviewed switch
statements using a range and multiple case
statements.
To learn more about switch
, you can review it on the Mozilla Developer Network.