JavaScript Switch

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




Color Picker

List of color names supported by all browser »



Character Code

List of character codes to display special character »



Language Code

List of all language supported by all browser »



Country Code

List of Country code supported by all browser »

Latest Updates

PHP Introduction

How to Run a PHP program in Xampp?

How can I create a phpinfo.php page?

How to Define a Variable in PHP

PHP Echo and Print Statements

Working with PHP Operators

Understanding the PHP Data Types

How to Write Comments in PHP

How to Define a Constant in PHP

PHP if...else...elseif Statements