JS Tutorial
JS Version
JS Objects
JS Function
JS Classes
JS Async
JS HTML DOM
JS Browser BOM
JS Web API
JS AJAX
JS JSON
JS vs JQUERY
JS Graphics
JavaScript Switch Statement
The switch statement is used to select one of many code blocks that are to be executed.
Syntax
switch(expression) {
case x:
// code block
break;
case y:
// code block
break;
default:
// code block
}
This is how it works:
- Only once the switch expression is evaluated.
- The values of the expression in each case are compared.
- If it is matched, the associated block of code is executed.
- If nothing is matched, the default code block is executed.
Example
The getDay() method returns the weekday as a number between 0 and 6
(Sunday=0, Monday=1, Tuesday=2 ..)
This example uses the weekday number to calculate the weekday name:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript switch</h2>
<p id=”demo”></p>
<script>
let day;
switch (new Date().getDay()) {
case 0:
day = “Sunday”;
break;
case 1:
day = “Monday”;
break;
case 2:
day = “Tuesday”;
break;
case 3:
day = “Wednesday”;
break;
case 4:
day = “Thursday”;
break;
case 5:
day = “Friday”;
break;
case 6:
day = “Saturday”;
}
document.getElementById(“demo”).innerHTML = “Today is ” + day;
</script>
</body>
</html>
Output
JavaScript switch
Today is friday
The break Keyword
When JavaScript reaches a break keyword, it leaves out of the switch block.
The execution inside the switch block is stopped.
It is not compulsory to break the last case in a switch block. The block breaks (ends) there anyway.
The default Keyword
The default keyword defines the code to run if there is no case match:
Example
The getDay() method is used to return the weekday as a number between 0 and 6.
If today is neither Saturday (6) nor Sunday (0), write a default message:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript switch</h2>
<p id=”demo”></p>
<script>
let text;
switch (new Date().getDay()) {
case 6:
text = “Today is Saturday”;
break;
case 0:
text = “Today is Sunday”;
break;
default:
text = “Looking forward to the Weekend”;
}
document.getElementById(“demo”).innerHTML = text;
</script>
</body>
</html>
Output
JavaScript switch
Looking forward to the Weekend
Common Code Blocks
There may be times when different switch cases use the same code.
In this example case 4 and 5 share the same code block, and 0 and 6 share another code block:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript switch</h2>
<p id=”demo”></p>
<script>
let text;
switch (new Date().getDay()) {
case 4:
case 5:
text = “Soon it is Weekend”;
break;
case 0:
case 6:
text = “It is Weekend”;
break;
default:
text = “Looking forward to the Weekend”;
}
document.getElementById(“demo”).innerHTML = text;
</script>
</body>
</html>
Output
JavaScript switch
Soon it is Weekend
Switching Details
If multiple cases match a case value, the first case is selected.
If no matching cases are found, the program continues to the default label.
If no default label is found, the program continues to the statement(s) after the switch.
Strict Comparison
Switch cases use strict comparison (===).
The values used should be of the same type to match.
If the operands are of the same type, only then the strict comparison is true.
In this example there will be no match for x:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript switch</h2>
<p id=”demo”></p>
<script>
let x = “0”;
switch (x) {
case 0:
text = “Off”;
break;
case 1:
text = “On”;
break;
default:
text = “No value found”;
}
document.getElementById(“demo”).innerHTML = text;
</script>
</body>
</html>
Output
JavaScript switch
No value found