...

Web Technologies - JAVASCRIPT

Back to Course

Lesson Description


Lession - #231 Javascript Switch


The Switch Statement in JavaScript

Use the switch statement to choose one of several code blocks to executed.
Syntax

switch(expression>
{
case x: 
// code block
break;
case y:
/ /code section
break;
default:
/ /code section
}

Here's how it works:
Once, the switch expression is evaluated. The expression's value is compared to the values of each case.
If a match is found, the relevant piece of code is run. If no match is found, the default code block is performed.

Example
The weekday is returned as a number between 0 and 6 by the getDay(>
method.
(Sunday=0, Monday=1, Tuesday=2, and so on.>

In this example, the weekday number is used to calculate the weekday name:

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript switch Statement</h1>
<style>
body{
background-color:#fcffa4;
}
</style>
<p id="example"></p>

<script>
let day;
switch (new Date(>
.getDay(>
>
{ case 0: day = "Sun"; break; case 1: day = "Mon"; break; case 2: day = "Tus"; break; case 3: day = "Wed"; break; case 4: day = "Thurs"; break; case 5: day = "Fri"; break; case 6: day = "Sat"; } document.getElementById("example">
.innerHTML = "Today is "+ day; </script> </body> </html>


Output:
Sorry cannot be displayed
Try it here


The break Keyword

The term "break" is used to describe a period of JavaScript exits the switch block when it reaches the break keyword.
This will bring the execution of the switch block to a halt.
The last case in a switch block does not need to be broken. In any case, the block breaks (terminates>
there.

Keyword (default>

If there is no case match, the default keyword indicates the code to run:
Example
The weekday is returned as a number between 0 and 6 by the getDay(>
method.
Write a default message if today is not Saturday (6>
nor Sunday (0>
:

<!DOCTYPE html>
<html>
<style>
body{
background-color:#fcffa4;
}
</style>
<body>

<h1>JavaScript switch statement</h1>

<p id="demo"></p>

<script>
let text;
switch (new Date(>
.getDay(>
>
{ case 6: text = "Today is SAT"; break; case 0: text = "Today is SUN"; break; default: text = "Looking forward to the Weekend"; } document.getElementById("demo">
.innerHTML = text; </script> </body> </html>



Output:
Sorry cannot be displayed
Try it here


In a switch block, the default case does not have to be the last case:
<!DOCTYPE html>
<html>
<style>
body{
background-color:#fcffa4;
}
</style>
<body>

<h2>JavaScript switch</h2>

<p id="demo"></p>

<script>
let text;
switch (new Date(9>
.getDay(>
>
{ default: text = "Looking forward to the Weekend"; break; case 6: text = "Today is Saturday"; break; case 0: text = "Today is Sunday"; } document.getElementById("demo">
.innerHTML = text; </script> </body> </html>

Output:
Sorry cannot be displayed
Try it here

Common Code Blocks

Occasionally, you'll want to utilise the same code for multiple switch scenarios. 4 and 5 share the same code block in this example, however 0 and 6 share a different code block:

<!DOCTYPE html>
<html>
<style>
body{
background-color:#fcffa4;
}
</style>
<body>

<h2>JavaScript switch</h2>

<p id="demo"></p>

<script>
let text;
switch (new Date(3>
.getDay(>
>
{ case 4: case 5: text = "It'll be the weekend soon"; 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:
Sorry cannot be displayed
Try it here

Switching Details

If more than one case fits a case value, the first one is chosen. If no cases are identified that match, the programme defaults to the default label. If no default label can be discovered, the programme moves on to the statement(s>
after the javascript switch case.

Strict Comparison

In switch circumstances, stringent comparison (===>
is used. To match, the values must be of the same type. Only if the operands are of the same type may a rigorous comparison be made. There will be no match for x in this example:

<!DOCTYPE html>
<html>
<style>
body{
background-color:#fcffa4;
}
</style>
<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 = "There was no value found."; } document.getElementById("demo">
.innerHTML = text; </script> </body> </html>

Output:
Sorry cannot be displayed
Try it here