1. About Switch Case
In if…else statement, we can do the comparison and decide the code flow direction. Sometime, a comparison may end-up in checking a variable with multiple possible values. Here, one can use a switch-case to avoid multiple if-else statements. Below is the structure of the JavaScript switch-case:
Below are components of the switch case construct:
- switch: Comes with an expression which evaluates to a value. A single variable can also be an expression as it evaluates to a value. For example, the variable month number can hold a value of 1…12, Which can act as an expression.
- case: The value which we want to compare with evaluated expression will take part in case statement. The constant value here forms an expression like
Switch Expression == Case_Value. When the match returns true, the case block executes. In the above picture, it showed the case block in red colour. - break: After executing the case block, if you want code flow to go out of the complete switch case structure, you can use the break statement. The break keyword will stay as the last statement inside the case block.
- default: The default block executes when no case statement match with the evaluated switch expression.
2. JavaScript Switch…Case Example
The below example takes a number from the user and forms the switch-case structure to print some numbers in a word.
- The
UserNovariable contains the input number. Here, we form the switch expression using this variable. - Shows case statements. Here, we provide the match case with a constant. Let us consider the statement
case 3:and this will form the conditional expressionUserNo == 3. When this condition evaluates to true, the code flow enters the case block. - We can use a break statement to come out of the case block. So once a case match happens, the code flow enters the case block. The break statement makes the flow go out of the switch-case structure.
- Shows a complete case block. One can see a break statement at the end of this case block. This will avoid case flow trying for the case match for 5 after executing the case block for 4.
- When no case block matches with the switch expression, the execution flow enters the default: block. In our example, we print numbers 1-5 in words. The default block reports the number is more than five.
3. Case Groups
Sometimes, we may need to execute the same block of code for more than one match. In this case, we can group the case statement to execute a single block of statements. Have a look at the below example:
- Here, we use the same switch expression on the variable
UserNo. But we group three casescase 1:case 2:andcase 3:together. - This case body is common for three cases. When the input number is 1 or 2 or 3, JavaScript will execute this case block.
- This is the second group based on the case match 4,5,6.
- Common case block for 4,5,6. Note, here we do not use any break statement as it is the last case block within the switch..case structure.
4. Code Reference
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<!DOCTYPE html> <html lang="en"> <head> <title>Java Script Switch Case Example</title> </head> <body> <script> //Sample 01: Take a Number from User var strTheNumber = prompt("Enter a Positive Number :", 0); var UserNo = parseInt(strTheNumber, 10); //Sample 02: Form Switch Case switch(UserNo) { case 1: document.writeln("The Number is One </br>"); break; case 2: document.writeln("The Number is Two </br>"); break; case 3: document.writeln("The Number is Three </br>"); break; case 4: document.writeln("The Number is Four </br>"); break; case 5: document.writeln("The Number is Five </br>"); break; default: document.writeln("More Than Five </br>") } //Sample 03: Case Group switch(UserNo) { case 1: case 2: case 3: document.writeln("Input in Range 1-3"); break; case 4: case 5: case 6: document.writeln("Input in Range 4-6"); } </script> </body> </html> |
5. Sample Output of the Example
Executing above html with JavaScript will produce the result, as shown below. Here, we provided the input number as 4. In the first switch-case structure, cas4 4: block executes. Then we enter the second switch-case and enter the second case group.
Categories: JavaScript
Tags: Break, Case, Default, Switch
Do you like this Example? Please comment about it for others!!
This site uses Akismet to reduce spam. Learn how your comment data is processed.