Learn JavaScript

JavaScript Switch Case

JavaScript allows us to use multiple if else blocks to execute a particular code snippet, as we have already done in previous chapter. To execute a multiple blocks of codes, we used multiple if else blocks. However for a better programming practice, this is not a best solution to write a program in this way. JavaScript provides a better solution to do so. In JavaScript programming we can use switch statement, rather than multiple if else blocks (it may leads to some error, since the execution of a set of blocks depends only on the truth value of a single expression or variable).

Syntax

switch (expression)
{
case 1: Set of statements;
break;
case 2: Set of statements;
break;
.
.
.
case n: Set of statements;
break;
default: set of statements;
}

Explanation

  • Very first the value of the switch “expression” is evaluated.
  • The value of the switch “expression” is compared with each case.
  • If any match founds, then the set of statements under that match will be thoroughly executed.
  • If no match found, then the set of statements under default case will be executed.
  • As the execution of the program reaches to the break keyword, the execution jumps out of the switch block.

Example

<html>
<body>
<h2>Program to understand the JavaScript switch case</h2>
<script>
var fl = 'C';
switch (fl)
{
case 'A': document.write("A for Apple <br>");
break;
case 'B': document.write("B for Blogger <br>");
break;
case 'C': document.write("C for Canvas <br>");
break;
case 'D': document.write("D for Dribble <br>");
break;
case 'E': document.write("E for Etutororg <br>");
break;
default: document.write("Sorry No Case Matches");
}
</script>
</body>
</html>

Output

Program to understand the JavaScript switch case

C for Canvas

Suggestion: change the values of the variable var fl = ‘C’; then get the output of the above JavaScript code snippet accordingly.

Note: If we remove the break keyword from any case, then the set of statements under next switch case will be executed thoroughly, even if there is no match occurs.

Example

<html>
<body>
<h2>Program to understand the ommission of break keyword</h2>
<script>
var fl = 'C';
switch (fl)
{
case 'A': document.write("A for Apple <br>");
break;
case 'B': document.write("B for Blogger <br>");
break;
case 'C': document.write("C for Canvas <br>");
case 'D': document.write("D for Dribble <br>");
break;
case 'E': document.write("E for Etutororg <br>");
break;
default: document.write("Sorry No Case Matches");
}
</script>
</body>
</html>

Output

Program to understand the omission of break keyword

C for Canvas
D for Dribble

JavaScript Switch Case Important Notes

  • If multiple matches are found, then the first match will be executed, only.
  • If no matches are found, then the set of statements under default keyword will be executed.
  • If there is no default case is used and no match occurs, then the control will be jump out of the switch block.

Audience

This JavaScript tutorial is designed to help the beginners as well as the professional developers. For better understanding the language of the tutorial is kept simple and easy to understand.

Prerequisites

This tutorial demands to have the basic knowledge of the programming languages such as c or c++, HTML for the better understanding of the JavaScript programming language. The other basic requirement to learn JavaScript through this tutorial is the basic knowledge of computer and information technology so you can easily acquire a better understanding JavaScript programming.

Community Helping

In case you find any kind of error like typing error, spelling mistakes, incorrect grammar, incorrect information or any other mistakes. Please feel free to write to us at: akyadav@etutororg.com.