Hello guys! evening and welcome to my new tutorial post on Javascript. In my last tutorial post i talked about JavaScript if...else Statement, like i made mention of in my last tutorial, we are going to be looking into JavaScript switch case in today's tutorial.
Like i made mention of in my previous tutorial post, you can use multiple if...else...if statements to perform a multiway branch. However, this is not always the best way it can be done, especially when all the branches depend on the value of a single variable.
Starting with JavaScript 1.2, you can use a switch statement which handles exactly this situation and it does so more efficiently than repeated if...else...if statements.
Starting with JavaScript 1.2, you can use a switch statement which handles exactly this situation and it does so more efficiently than repeated if...else...if statements.
Flow Chart
The following flow chart below explains how a switch-case statement works in JavaScript.
Syntax
The purpose of a switch statement is to give an expression to evaluate and several different statements to execute based on the value of the expression. The interpreter checks each case against the value of the expression until a match is found. If no match is found then a default condition will be used.
switch (expression) {
case condition 1: statement(s)
break;
case condition 2: statement(s)
break;
....
case condition n: statement(s)
break;
default: statement(s)
}
case condition 1: statement(s)
break;
case condition 2: statement(s)
break;
....
case condition n: statement(s)
break;
default: statement(s)
}
You can also check out our tutorial post on: How to enable JavaScript
From the above syntax the break statemebts indicates the end of an individual case. If they were ommited, the interpreter would continue executing each statement in each of the following cases.
Example
The following example below shows how to implement switch-case statement in JavaScript.
<html>
<body>
<script type="text/javascript">
<!--
var grade = "A";
document.write("Entering switch block<br />");
switch (grade) {
case "A" : document.write("Excellent job<br />");
break;
case "B" : document.write("Good job<br />");
break;
case "C" : document.write("Passed<br />");
break;
case "D" : document.write("Poor<br />");
break;
case "F" : document.write("Failed<br />");
break;
default : document.write("Unknown<br />");
}
document.write("Exiting switch block<br />");
//-->
</script>
</body>
</html>
<body>
<script type="text/javascript">
<!--
var grade = "A";
document.write("Entering switch block<br />");
switch (grade) {
case "A" : document.write("Excellent job<br />");
break;
case "B" : document.write("Good job<br />");
break;
case "C" : document.write("Passed<br />");
break;
case "D" : document.write("Poor<br />");
break;
case "F" : document.write("Failed<br />");
break;
default : document.write("Unknown<br />");
}
document.write("Exiting switch block<br />");
//-->
</script>
</body>
</html>
Below is the output of the above example:
Entering switch block
Excellent job
Exiting switch block
Excellent job
Exiting switch block
You can try the above example for better understanding on how to implement switch-case statement on JavaScript. You can assign different value to the variable while practicing.
You can also check out our tutorial post on: PYTHON ON OS X
In JavaScript or any other high level programming languages, break statement play a major role in switch-case statements. Try the following code that uses switch-case statement without any break statement.
<html>
<body>
<script type="text/javascript">
<!--
var grade ="A";
document.write("Entering switch block<br />");
switch (grade) {
case "A" : document.write("Excellent job<br />");
case "B" : document.write("Good job<br />");
case "C" : document.write("Passed<br />");
case "D" : document.write("Poor<br />");
case "F" : document.write("Failed<br />");
default : document.write("Unknown<br />");
}
document.write("Exiting switch block<br />");
//-->
</script>
</body>
</html>
<body>
<script type="text/javascript">
<!--
var grade ="A";
document.write("Entering switch block<br />");
switch (grade) {
case "A" : document.write("Excellent job<br />");
case "B" : document.write("Good job<br />");
case "C" : document.write("Passed<br />");
case "D" : document.write("Poor<br />");
case "F" : document.write("Failed<br />");
default : document.write("Unknown<br />");
}
document.write("Exiting switch block<br />");
//-->
</script>
</body>
</html>
Below is the output of the above example:
Entering switch block
Excellent job
Good job
Passed
Poor
Failed
Unkown
Exiting switch block
Excellent job
Good job
Passed
Poor
Failed
Unkown
Exiting switch block
From the above output, you should see that without the break statement in the switch-block to indicate the end of each case, the program will not be executed correctly.
You can check out our tutorial post on: Css Dimensions
Alright guys! we have come to the end of this tutorial post on JavaScript switch case. Feel free to drop your questions in the comment box and they will attended to as soon as possible.
Follow us on our various social media pages in other to stay up to date with our tutorials, bye for now.
Follow us on our various social media pages in other to stay up to date with our tutorials, bye for now.