Javascript Switch Statement
Introduction
Conditional statements are simple building blocks in programming languages and are utilized fairly frequently. This portion of Developing Conditional Statements in JavaScript talks about how to utilize the if, else, and else if keywords to control the program flow based on alternative conditions, typically initiated by user input. Aside from the if-else construct, JavaScript also has the switch statement. This kind of conditional statement checks an expression against a set of possible cases and executes the corresponding blocks of code for cases that pass the test. The switch statement is similar to using several else if statements and can typically be exchanged interchangeably.
This tutorial will be discussing the switch statement in more detail, as well as its related keywords: case, break, and default. Lastly, we will be discussing how to control multiple cases inside a switch statement.
What is switch statement
A switch statement is a unique type of conditional statement in JavaScript. The program starts executing when the switch condition is satisfied, comparing the input value with one or more of the cases listed in the switch structure. Each case is preceded by a 'break' statement, which determines the flow of execution in the program. One must also provide a 'default' block so that the program will run normally in case the input does not satisfy any of the provided case options in the switch statement.
JavaScript provides a large number of methods of controlling conditions, including the if-else method, if-else-if method, while method, and do-while method, among others. Out of all the various methods, the switch statement provides the ability to execute a special group of instructions when the condition is satisfied.
A switch statement typically has multiple case blocks and an optional default block. Based on the condition, one or more case blocks will be executed if they are satisfied. If none of the case blocks are satisfied, the default block will be executed automatically if it is available in the code.
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
}
Flow Diagram
Given below is the flowchart of the switch statement:
How does the Switch Statement work in JavaScript?
A switch statement typically includes three main parts:
- The expression to be evaluated.
- The cases that are equal to the expression to be evaluated.
- The default case, which will be executed when none of the cases are satisfied.
Let us now examine the operation of this statement structure.
The expression to evaluate – This section includes testing the expression to be evaluated. The execution of the switch case will be based on which case is equal to the expression to be evaluated.
Different cases – After testing the expression, the case equal to the expression will be executed.
Default case – In situations where none of the switch cases are satisfied, the default case will be executed.
Examples
Some examples are presented below:
Example 1
Suppose an example where a user is prompted to type a number in an input box. If the number typed is less than 10, the program will print the number typed by the user; otherwise, it will print a message saying that the number typed is greater than 10.
To achieve this, simply copy the code below and place it in your HTML file.
Code
<!DOCTYPE html>
<html>
<body>
<h2>Example for 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:
labelVal = "You entered 6";
break;
case 7:
labelVal = "You entered 7";
break;
case 8:
labelVal = "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>
Output
Example 2
We will now describe the process of executing multiple switch statements in JavaScript.
Executing Multiple Cases When Conditions Are Met.
At this stage, we will describe how to execute multiple cases. Please copy the code given below and place it in an HTML file for running.
Code
<!DOCTYPE html>
<html>
<body>
<h2>Example for 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:
labelVal = labelVal+ " You entered 4";
case 5:
labelVal = labelVal+ " You entered 5";
case 6:
labelVal = labelVal+ " You entered 6";
break;
default:
labelVal = "Enter value less than 10";
}
document.getElementById("labelVal").innerText = labelVal;
}
</script>
</body>
</html>
Output
Conclusion
JavaScript is a programming language with many concepts that need to be studied in detail. Among them is the switch statement. This kind of conditional statement runs code to check whether the expression satisfies the given condition based on its evaluation, returning a value in the end. Conditional statements are widely used for a variety of logical programming expressions in different programming languages.