Introduction to Switch Statement in JavaScript
A switch statement is one of the multiple conditional statements available in the JavaScript programming language, where the code execution starts when the switch condition is satisfied and the input value matches one or more of the cases inside the switch condition. This condition has a ‘break’ after each case, in turn, to control the program’s execution flow. It should also have a ‘default’ block for the execution to flow smoothly whenever the given input doesn’t match with the case choices provided in the switch statement.
What is Switch Statement in JavaScript?
There are several conditional methods in JavaScript, such as the if-else method, if-else-if method, while method, do-while method, and several other methods too. Out of such different methods in JavaScript, one such method is the switch statement method. We use this method to run a particular set of instructions or code if the condition satisfies. A switch statement generally contains several blocks of cases along with an optional default case. As per the condition, one or several cases may execute if cases satisfy. If no switch statement block becomes true, the default case gets executed automatically if it is added in the coding.
Syntax of JavaScript Switch Statement
The basic syntax of JavaScript in a switch statement is as follows:
switch(an expression which needs to be checked) {
case x:
// block of code or instructions
break;
case y:
// block of code or instructions
break;
default:
// block of code or instructions for default condition
}Now, let us try to understand how this block of the statement actually runs.
- An expression that needs to be checked – In this statement, we check the expression which needs to be evaluated. Based on the execution of an expression, the switch case satisfying will be executed.
- Different cases – On the execution of an expression, the case which satisfies the expression gets executed.
- Default case – If any of the switch cases do not get satisfied, then the default case is executed.
Flow Diagram
Given below is the flowchart of the switch statement:
How does Switch Statement Work in JavaScript?
A switch statement generally contains three sub-sections which are:
- Expression to evaluate.
- Cases which execute for the expression.
- Default case which needs to be executed if no cases get satisfied.
The basic responsibilities of these subsections are –
- An expression that needs to be checked – In this statement, we check the expression which needs to be evaluated. Based on the execution of an expression, the switch case satisfying will be executed.
- Different cases – On the execution of an expression, the case which satisfies the expression gets executed.
- Default case – If any of the switch cases do not get satisfied, then the default case is executed.
Examples
Given below are the examples mentioned:
Example #1
Now, let us take an example that takes a number from the user in an input box; if the number is less than 10, then it shows the number entered by the user; else will display the message that the number entered is larger than 10.
Simply copy the following code and paste it into the HTML file to run it.
Code:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript switch statement</h2>
<label>Enter the number in textbox</label>
<input type="number" id="inputBox"/>
<input type="button" onClick="checkVal()" value="Check value">
<label id="labelVal"></label>
<script>
var text = '', labelVal = "";
function checkVal(){
text = document.getElementById("inputBox").value;
labelVal = '';
text = Number(text)
switch(text) {
case 1:
labelVal = "You entered 1";
break;
case 2:
labelVal = "You entered 2";
break;
case 3:
labelVal = "You entered 3";
break;
case 4:
labelVal = "You entered 4";
break;
case 5:
labelVal = "You entered 5";
break;
case 6:
label Val = "You entered 6";
break;
case 7:
labelVal = "You entered 7";
break;
case 8:
label Val = "You entered 8";
break;
case 9:
labelVal = "You entered 9";
break;
default:
labelVal = "Enter value less than 10";
}
document.getElementById("labelVal").innerText = labelVal;
}
</script>
</body>
</html>Now let us see the example with the value entered:
Input value: 6
Output value: You entered 6
Example #2
Now let us see how we can execute multiple switch statements in JavaScript.
Executing Multiple Cases if Condition Satisfies.
Now, let us see how we can execute multiple cases. Copy the following code and paste it into an HTML file to execute it.
39 Online Courses | 24 Hands-on Projects| 230+ Hours| Verifiable Certificate of Completion
4.5
View Course
Code:
<!DOCTYPE html>
<html>
<body
<h2>JavaScript switch statement</h2>
<label>Enter the number in textbox</label>
<input type="number" id="inputBox"/>
<input type="button" onClick="checkVal()" value="Check value">
<label id="labelVal"></label>
<script>
var text = '', labelVal = "";
function checkVal(){
text = document.getElementById("inputBox").value;
labelVal = '';
text = Number(text)
switch(text) {
case 1:
labelVal = labelVal + " You entered 1";
case 2:
labelVal = labelVal + " You entered 2";
case 3:
labelVal = labelVal+ " You entered 3";
break;
case 4:
label Val = labelVal+ " You entered 4";
case 5:
label Val = labelVal+ " You entered 5";
case 6:
label Val = labelVal+ " You entered 6";
break;
default:
label Val = "Enter value less than 10";
}
document.getElementById("label Val").innerText = label Val;
}
</script>
</body>
</html>Input value: 1
Output value: You entered 1, You entered 2, You entered 3.
Conclusion
JavaScript is a programming language where there are lots of concepts that one needs to study. A switch statement is one of those. These conditional statements basically execute the code to check whether the expression satisfies the condition based on the expression evaluation; it returns the value. A conditional statement is widely used in any programming language to various logical programming expressions.
Recommended Articles
This has been a guide to Switch Statement in JavaScript. Here we discuss the concept, syntax, working, and examples of switch statement in JavaScript. You can also go through our other suggested articles to learn more –
