There are four conditional statements. In previous post we have learnt about if conditional statements. This post will describe about fourth one that is switch statement.
Precap
What is switch statement in javascript?
Javascript Switch statement Syntax
Description- how does switch statement work?
What is the work of break keyword?
Arithmetic operations using switch case
Let’s start with definition.
JavaScript switch case statement |
What is switch statement in javascript?
Javascript switch statement is a conditional statement represents control flow of JavaScript statements based on single expression.
Javascript switch statement syntax
switch(expression) { case value1: //Javascript statement break; case value2: //Javascript statement break; ……….. ……….. case valueN: //Javascript statement break; default: //Javascript statement break; }
Description
How does switch statement work?
expression of switch evaluated first, then each case value is compared with expression. If any case value matches with expression then javascript statement of that case is executed. If none of the case value matches with expression then default javascript statement is executed.
What is the work of break keyword in switch statement?
When any case value matches with expression the keyword stop the execution. This break keyword is important in switch statement. If we omit break keyword then the program execution will continue even after case matches with expression.
Example
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 | <!DOCTYPE html> <html> <head> <title>switch statement</title> </head> <body> <script> var a=prompt("Enter weekdays number"); switch(a) { case "1": document.write("day 1 is Monday"); break; case "2": document.write("day 2 is Tuesday"); break; case "3": document.write("day 3 is Thursday"); break; case "4": document.write("day 4 is Wednesday"); break; case "5": document.write("day 5 is Friday"); break; case "6": document.write("day 6 is Saturday"); break; case "7": document.write("day 7 is Sunday"); break; </script> </body> </html> |
Output:-
The default keyword
Above example doesn’t include default keyword. so when you enter value that doesn't match with any cases nothing will display.
What is the work of default keyword?
The default keyword is similar as else in if statement. If no case matches with expression then javascript statement after default keyword will be executed.
Example
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 | <!DOCTYPE html> <html> <head> <title>switch statement</title> </head> <body> <script> var a=prompt("Enter weekdays number"); switch(a) { case "1": document.write("day 1 is Monday"); break; case "2": document.write("day 2 is Tuesday"); break; case "3": document.write("day 3 is Thursday"); break; case "4": document.write("day 4 is Wednesday"); break; case "5": document.write("day 5 is Friday"); break; case "6": document.write("day 6 is Saturday"); break; case "7": document.write("day 7 is Sunday"); break; default: document.write("please enter only 1-7 digits"); } </script> </body> </html> |
Output:-
Is default keyword necessary for switch statement?
No, it is not necessary to include default, it is optional. But it is good habit to put default in switch case, because it notify about what is happened wrong.
In our program when default keyword not include, nothing display on screen on alphabets or digit that is out of range is entered.
But when it present, a message displayed to alert user that digit from 1-7 are allowed.
Is it necessary to put default at last?
No, it is not necessary to put default at last. You can put any where default keyword. at top, middle or bottom.
But keep in mind that when you don’t write default at last write break keyword after default block is over.
Example
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 | <!DOCTYPE html> <html> <head> <title>switch statement</title> </head> <body> <script> var a=prompt("enter color name of Indian flag:-"); switch(a) { default: document.write("Enter correct value "); break; case "orange": document.write("Orange color represents courage and sacrifies."); break; case "white": document.write("White color represents truth,purity and peace."); break; case "green": document.write("Green color represents faith,fertility and chivarly."); break; case "navy blue": document.write("Navy blue Ashok chakra represents motion of growth."); break; } </script> </body> </html> |
Output:-
Javascript switch with multiple cases and single operation
Example
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html> <html> <head> <title>Multiple switch cases</title> </head> <body> <script> var vowels=prompt("Enter alphabets","only enter single and capital alphabets."); switch(vowels) { case "A": case "E": case "I": case "O": case "U": document.write("Vowels alphabet."); break; default: document.write("Consonants alphabet."); } </script> </body> </html> |
Output:-
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 | <!DOCTYPE html> <html> <head> <title>Arithmetic operation</title> </head> <body> <h2>Arithmetic operation with switch case</h2> <script> var a=prompt("enter number1:-"); var b=prompt("enter number2:-"); var op=prompt("enter operator"); switch(op) { case "+": document.write("Addition:-",a ,"+" ,b ,"=",+a + +b); break; case "-": document.write("Subtraction:-",a ,"-" ,b ,"=",a-b); break; case "*": document.write("Multiplication:-",a ,"*" ,b ,"=",a*b); break; case "/": document.write("Division:-",a ,"/" ,b ,"=",a/b); break; case "%": document.write("Modulo:-",a ,"%" ,b ,"=",a%b); break; default: document.write("Your input is incorrect."); } </script> </body> </html> |
Output:-
Points to remember
- The switch expression is strict type comparison(===). Comparison will only true if same type or exact value matches with expression.
- Use quotes for case value.
- An switch expression can be variable/expression enclosed in ().
0 Comments