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

Description- how does switch statement work?

What is the work of break keyword?

The default 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

In example when user enter number the switch expression checks for cases, if match found then javascript statement of that case is executed.

<!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

In previous program I add default keyword at last. Now when any value entered rather than 1 -7, following message will be display ( “please enter only 1-7 digits” ).

<!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

In example the default keyword at top and this can not affect the program. But if you omit break program execution will continue to next until break found.

<!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

Following example check for vowels and consonants alphabets. Five cases (A,E,I,O,U) represents vowels and default for consonants alphabets. So here only single javascript statement needed for five cases.

<!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:-

Arithmetic operations using javascript switch case statement

Following example takes 3 inputs, two numeric value and one is operator. If incorrect value is entered default javascript statement displayed.

<!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 ().