Full article available on Sweetcode for free
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. This will evaluate an expression and perform an action, based on the resulting value. In this article, we are going to learn how switch statements are implemented 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 > 20
false
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
statements 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 non 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
Check out the complete Article on Sweetcode.
No registration is needed to access the article
Connect With me at Twitter | Insta | YouTube | LinkedIn | GitHub
Enjoy Coding β€
Top comments (6)
It's important to note that the case 'values' are expressions too. This is perfectly valid (and useful sometimes):
In react switch case is very common to solve reducer for useReducer
I think you should use strategy pattern instead of switch case.
result
I will definately give it a try
Are there significant differences in the speed of execution?
I tend to think it will depend with the program being executed