Advertisement

Advertisement


JavaScript Switch

The switch..case statement is an alternative to the if...else if...else statement. It tests a variable or expression for a series of value which will be defined as different cases. For each case a proper block of code will be defined and if the variable's value matches some case then the block of code after that case will get executed.

It is just like else if statement that we have learned in previous page, but it is convenient than if..else..if because it can be used with numbers, characters etc.

Syntax:

switch(expression)
{
case value1:
//code to be executed
break;
case value2:
//code to be executed
break;
......
default:
code to be executed if all cases are not matched;
}


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript If Else If Statement </title>
</head>
<body>
<script>
var favcolor='red';
var result;
switch (favcolor) {
case "red":
result="Your favorite color is red!";
break;
case "blue":
result="Your favorite color is blue!";
break;
case "green":
result="Your favorite color is green!";
break;
default:
result="Your favorite color is neither red, blue, nor green!";
}
document.write(result);
</script>
</body>
</html>

Output

JavaScript If Else If Statement Example

Note : In a switch...case statement, the value of the expression or variable is compared against the case value using the strict equality operator (===) i.e. the data types are also compared. That means if x = "0"(string), it doesn't match case 0(int):, because their data types are not equal.

In switch statement, if it finds a match in some case, then not only the block of code of that 'case' will get executed but all the code of other cases following it, will be executed as well. To prevent this you must include a break statement after each case. The break statement will stop the execution of switch statement after the specified case execution and no other case will get executed automatically.
The break statement is not required for the default clause, when it appears at last in a switch statement. As whatever case comes at last doesn't need to be terminated by the break statement. But it is a good practice to terminate the last case also, or default clause in a switch statement with a break.

The default clause is optional, which specify the actions to be performed if no case matches the switch expression.
Here's an example:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Switch Case </title>
</head>
<body>
<script>
var d = new Date();
switch(d.getDay()) {
default:
document.write("Looking forward to the weekend.");
break;
case 6:
document.write("Today is Saturday.");
break;
case 0:
document.write("Today is Sunday.");
}
</script>
</body>
</html>

Output

JavaScript Switch Case

Sharing Same Action in Multiple case

When you want to execute same block of code for more than one case then you have to make some minor changes as described in the example below. In this example, each case value is unique within a switch statement but more than one cases are using same block of code.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Multiple Switch Case </title>
</head>
<body>
<script>
var x = new Date();
switch(x.getDay()) {
case 1:
case 2:
case 3:
case 4:
case 5:
document.write("It is a weekday.");
break;
case 0:
case 6:
document.write("It is a weekend day.");
break;
default:
document.write("Enjoy every day of your life.");
}
</script>
</body>
</html>

Output

JavaScript Multiple Switch Case Examples









Become a Patron!

Note: If the updated content is not visible to you please refresh the cookies by pressing CTRL + Shift + R.