JavaScript supports various conditional statements for making decisions at runtime, such as “if-else” and “Switch Case Statements“; however, under some specific conditions, utilizing Switch Case Statements instead of “if-else” statements is considered more convenient.
For instance, you need to test a variable for thousands of distinct values and then operate based on test results. In this scenario, usage of the “if-else” statement is less efficient than Switch Case Statements. So, to evaluate an expression for multiple cases, it is better to use Switch Case Statement as it also increases the code readability.
This write-up will discuss the working and usage of Switch Case Statement in JavaScript with the help of suitable examples.
Working of Switch Case Statement in JavaScript
The below-given flow-chart illustrates the working of the Switch Case Statement in JavaScript:
<img alt="Blank diagram" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/blank-diagram.png" data-lazy- height="1249" src="data:image/svg xml,” width=”950″>
When a Switch Case Statement is added in JavaScript, it performs the execution in the following steps:
- First, the statement followed by the “switch” word is evaluated.
- In the next step, the evaluation result is “strictly” compared to the “values” of the added “cases”, one by one from top to bottom.
- When the result of the expression gets matched with the value of any “case“, the statements added in its code block will be executed, and the “break” keyword breaks the execution flow of the switch statement.
- Lastly, the “default” case code block is executed when the results of expression evaluation do not match with any of the specified cases.
Now, check out the syntax of the Switch Case Statement, as it will help in implementation.
Syntax
switch (expression) {
casea:
//code block of case a
break;
caseb:
//code block of case b
break;
casec:
//code block of case c
break;
default:
//code block of default case
break;
}
Here, “expression” is the condition which will be evaluated, “case” keyword is utilized for defining the cases followed by their values, “break” keyword is added to break the control flow of the Switch Case statement, and the “default” statement is “optional” case which will be executed when the Switch case expression is evaluated as “false”.
Now, let’s check out some examples related to Switch Case Statement in JavaScript.
Example 1: How to use Switch Case Statement in JavaScript with “break” keyword
First of all, we will create a variable named “a” and initialize it with the value “2”:
In the next step, the variable “a” is passed to the Switch Case Statement as an “expression,” and the Switch Case Statement will compare the value of the variable “a” with all of the added cases:
switch (a) {
case0:
console.log(“Number is Zero”);
break;
case1:
console.log(“Number is One”);
break;
case2:
console.log(“Number is Two”);
break;
default:
console.log(“Number is Not Zero, One or Two”);
}
As the value of the variable “a” matched with the “case 2“, its related code block will be executed, and the program will output “Number is Two” to the console window and get out of the case statement:
<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/word-image-22.png" data-lazy- height="439" src="data:image/svg xml,” width=”892″>
In another case, if the variable value does not match with any of the specified cases, then JavaScript will execute the statements added in the “default” case.
For instance, in the below-given example, the value of the variable “a” is set to “10,” which will not match with the value of the added switch cases:
var a = 10;
switch (a) {
case0:
console.log(“Number is Zero”);
break;
case1:
console.log(“Number is One”);
break;
case2:
console.log(“Number is Two”);
break;
default:
console.log(“Number is Not Zero, One or Two”);
}
So, the Switch case statement will execute the code block of the “default” case:
<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/word-image-24.png" data-lazy- height="452" src="data:image/svg xml,” width=”891″>
Example 2: How to use Switch Case Statement in JavaScript without “break” keyword
If you have not added the “break” keyword, then the JavaScript will first execute the case, where the specified value gets matched, and after that, it will run all of the other cases even if the criteria are not met.
For instance, the “break” keyword is missing in the case statement of the below-given program:
var a = 2;
switch (a) {
case0:
console.log(“Number is Zero”);
case1:
console.log(“Number is One”);
case2:
console.log(“Number is Two”);
case3:
console.log(“Number is Three”);
default:
console.log(“Number is Not Zero, One or Two”);
}
In this scenario, the Switch Case Statement will sequentially match the value of the variable “a” with all cases until it reaches the “case 2”; as the “break” keyword is missing so after executing the code block of “case 2”, JavaScript will not break the execution control and then run the next cases:
<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/word-image-25.png" data-lazy- height="477" src="data:image/svg xml,” width=”886″>
Example 3: How to use Switch Case Statement in JavaScript with multiple criteria
There exists a chance that you have to perform similar operations for multiple cases. In such a situation, instead of writing the same code block for each “case” again and again, exclude the “break” keyword and write out that particular operation for a group of cases in the following way:
const a= “4”;
switch (a) {
case“1”:
case“2”:
case“3”:
case“4”:
console.log(“Number is less than 5”);
break;
case“Number is 5”:
default:
console.log(“Number is not valid”);
}
The above-given program will print out the statement “Number is less than 5” if the value of the variable “a” matched with the case “1”, “2”, “3”, or “4”:
<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/word-image-27.png" data-lazy- height="398" src="data:image/svg xml,” width=”890″>
We have provided the essential information related to the case statement in JavaScript. You can further research it according to your requirements.
Conclusion
The Switch Case Statement in JavaScript is utilized for executing one code block if the specified criteria is satisfied. It is primarily utilized for performing operations based on different conditions. Switch Case Statement works similar to the “if-else” conditionals; however, the usage of switch case maintains the code readability. This write-up discussed the working of Case Statements in JavaScript with the help of suitable examples.
About the author
<img alt="" data-lazy-src="https://secure.gravatar.com/avatar/c73b74cd8044d2e9b300610f5af77d0b?s=112&r=g" data-lazy- height="112" src="data:image/svg xml,” width=”112″>
Sharqa Hameed
I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.
