When learning any programming language, you will come across the concept of control flow. This is when we want our program to behave differently, based on the information and values we supply to it. One popular control flow structure is a switch statement.
A switch statement will evaluate an expression and perform an action, based on the resulting value. In this article, we will learn how to implement switch statements in JavaScript and how they differ from other control structures, such as if…else statements.
Let’s get right to it.
The Syntax of a Switch Statement
The basic syntax of a switch statement is like so:
switch (expression) {
case value_1:
statement_1;
break;
case value_2:
statement_2;
break;
default:
default_statement;
}
As you can see, the switch statement receives an expression. An expression is any unit of code that resolves to a value. For example:
3 + 4'hello' + 'world'a > 20false
You can read more about expressions on MDN.
The switch statement will evaluate the result of the expression and either execute the matching case statement, or the default statement in the event that no case statement match.
Let’s look at this using a practical example:
const name = 'lary';
switch (name) {
case 'lary':
alert('Hi lary!');
break;
case 'Hillary':
alert('Hi Hillary!');
break;
default:
alert('Howdy stranger!');
}
Try running this code. Change the value of the name variable and notice how a different greeting is output to the screen.
Once control of a program enters a switch statement, the expression is first executed, then followed by matching the first case constant to the value of the expression result, in the case they match, the statements in that clause are executed.
In a scenario that they do not match, control of the program goes on to compare the expression’s result to the second clause, evaluating its statements when there is a match.
Once the statements of a given case clause are executed, where a break statement is used, this ends the switch case, and program control is returned to the main program. Since break statements are optional, when they are not available, the program will continue matching other case clauses that flow irrespective they matched the case without a break statement. This introduces some very unique usage for a switch statement.
In a scenario where none of the clauses match, the default clause if available is executed, calling all the statements for the default clause and then exiting the switch statement. When a default clause is not available, no statements within any of the switch cases would be executed.
Flow Diagram
As shown above, the program starts by executing the given expression, then checking the results match/equal to the given case constant, in which case it would go ahead to execute the statements for the matching case. When break statements are provided, the program exits the switch statement immediately, otherwise continues evaluating other cases.
So how exactly does the switch statement work in JavaScript?
How Switch Statement Works in JavaScript
JavaScript Keywords
Expression
In JavaScript, expressions are blocks of code that evaluate a value, meaning that the given expression must return a value. It compares the value to the constant defined in each case clause. Switch statements evaluate a given expression only once.
Cases
Cases define how values from the expression compare to each given case. In JavaScript, the comparison of results is strict === , meaning values must be of the same type.
We set variables outside of the switch block to retain changes made while executing a switch statement, and we can alter their values within the matching cases.
Variables can also be scoped within the case blocks of a given clause by using let and const .
One outstanding feature of cases is the different outcomes based on the provision of a break statement at the end of the case blocks. When provided, after encountering it, the execution within the switch block ends, otherwise, JavaScript evaluates other clauses.
Default Case
The default case is optional and defined in any position within the switch block; JavaScript only evaluates it when all the other cases do not match the value of the given expression. A break statement is not necessary in this case as the execution of the switch statement ends here anyway.
Examples of Switch Statements
Below is an example to print the name of the Day fetched from the day of week of the current date time. This can be used to modify the result of the expected day name, say ‘Monday’ to something funky as ‘Money Day’
const epoch_day = new Date("January 1, 1970 00:00:00");
switch (epoch_day.getDay()) {
case 0:
console.log("Sunny Day");
break;
case 1:
console.log("Money Day");
break;
case 2:
console.log("Two Days");
break;
case 3:
console.log("Wedding Day");
break;
case 4:
console.log("Thus Day");
break;
case 5:
console.log("Free Day");
break;
case 6:
console.log("Sabbath Day");
break;
default:
console.log("Not a day of the week.");
}
First we use epoch time to define a constant in JavaScript Date format. The expression evaluates the day of week with Date.protocol.getDay() of the constant date variable, which returns an integer representing days of the week, i.e. 0-6 to Sunday to Saturday respectively.
It compares the returned value with the given result, and returns a modified name of the day of the week of epoch time.
Executing Multiple Cases if Condition Satisfies
Considering that break statements are optional, multiple cases can be evaluated within the same switch block. When no break statement is provided, the program will continue to execute another case’s statement block until a break statement is encountered.
Example, let’s use a switch statement to find when epoch time was either a weekday or weekend.
const epoch_date = new Date("January 1, 1970 00:00:00");
switch (epoch_date.getDay()) {
case 1:
case 2:
case 3:
case 4:
case 5:
console.log("Epoch was on a weekday");
break;
case 6:
case 0:
console.log("Epoch was on a weekend");
break;
default:
console.log("Invalid day of the week");
}
In the above example, break statement having been omitted for the case blocks of the first 5 case clauses, ensures that once any of the case constant matches a given value, its code block will be executed, but since there are no defined statements, it goes on to execute other case clauses until encountering a break system, that exits the program from execution.
Switch Statement vs If Else Statement
if-else statements is a conditional control structure that is used to compare against a pair of outcomes. This can only be either true or false responses, and any other custom matching required should always return a boolean. If-else statements can evaluate at most 2 conditions.
Switch statements have better support for handling multiple result expressions, unlike if-else statement that mostly works on binary results of an expression, ie. there can only be 2 outcomes. Nesting multiple if-else statements together can achieve multiple conditions.
Even though it’s possible to achieve similar control flow with if-else statements, switch case offers more readability of the code, as nested if conditions are not always quick to read through and understand the flow of a program.
An example of a nested if-else statement usage.
const epoch_date = new Date("January 1, 1970 00:00:00");
var day = epoch_date.getDay();
if (day === 0) {
console.log("[IF] Epoch was on a weekend");
} else if (day <= 5) {
console.log("[IF ELSE] Epoch was on a weekday");
} else if (day === 6) {
console.log("[IF ELSE] Epoch was on a weekend");
} else {
console.log("[ELSE] Invalid day of the week");
}
When to use Switch Statement
Perhaps, you might wonder why use switch statement if we have the alternative if-else, here is why:
For easier code readability and understanding, switch statements are better for multiple cases of an expected result. While an if-else statement would be better for cases with only 2 conditions.
Conclusion
The switch conditional statements are often used to evaluate an expression and return a response on whether that expression is met. They are useful if you would like to compare against multiple possible outcomes.
In this article, we have discussed the fundamentals of conditional statements in JavaScript. We then explored the way to use the switch and case statements and went through an example of the way to use multiple case statements in an exceedingly switch block.
Now you’ve got the knowledge you need to use the JavaScript “switch case” statement like an expert!
