Introduction to Switch Statement in JavaScript
In this topic, we will discuss on switch statement in JavaScript. With the advent of technology, computers have developed which in turn brought the requirement for programming language. There were many programming languages which include both low-level language as well as high-level language. High-level languages are easier to use as they are easy to understand in comparison to low-level languages. JavaScript is one such high-level language that is used widely as a frontend language for programming purposes. There are lots of a concept which one needs to study and practice in order to understand basic concepts.
What is Switch Statement in JavaScript?
There are several conditional methods in JavaScript such as 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. In this method, we use it to run a particular set of instructions or code if 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. In case no switch statement block becomes true then the default case gets executed automatically if it is added in the coding.
Syntax of JavaScript Switch Statement
Let us try to understand the basic syntax of JavaScript in a switch statement.
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 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
Now, let us look at the flowchart of the switch statement.
4.5 (2,251 ratings)
View Course
Now, let us look at how the switch statement works in JavaScript.
How does Switch Statement Work in JavaScript?
As explained earlier in the article, a switch statement generally contains three sub-sections which are –
- Expression to evaluate.
- Cases which executes 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 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
Now, let us take an example which 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 number entered is larger than 10.
Simply copy the following code and paste it in the HTML file to run it.
<!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
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 in HTML file to execute it.
<!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 which one needs to study. A switch statement is one of those. These conditional statements basically execute the code to check whether the expression satisfies 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 –
