Switch statement is used to replace multiple else-if statement particularly when you have a long list of conditions to test. Especially this will involve a multiple branching switch statement can help it make easier. The switch statement consists of case block and default block that we will see in the example below. The basic syntax of switch statement in JavaScript looks something like the following:
switch(expression)
{
case expression 1:
//code to be executed
break;
case expression 2:
//code to be executed
break;
.
.
.
case expression n:
//code to be executed
break;
default:
//code to be executed
}
Here we will see the practical example of switch statement in JavaScript to see which month is it based on the value provided. If it is 1, then the month is January, if it is 2 then the month is February and so on. There is no any month except for the value 1-12 and in such case we will use a default statement saying there is no such month with that number. This is where default is used if none of the conditions matches then we place the statement inside the default block. And it is advisable to put the default at the end although it is ok to place the inside anywhere inside switch statement.
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript Switch</title>
<script>
var month = 6;
switch (month)
{
case 1:
document.write("<h3>The month is January.</h3>");
break;
case 2:
document.write("<h3>The month is February.</h3>");
break;
case 3:
document.write("<h3>The month is March.</h3>");
break;
case 4:
document.write("<h3>The month is April.</h3>");
break;
case 5:
document.write("<h3>The month is May.</h3>");
break;
case 6:
document.write("<h3>The month is June.</h3>");
break;
case 7:
document.write("<h3>The month is July.</h3>");
break;
case 8:
document.write("<h3>The month is August.</h3>");
break;
case 9:
document.write("<h3>The month is September.</h3>");
break;
case 10:
document.write("<h3>The month is October.</h3>");
break;
case 11:
document.write("<h3>The month is November.</h3>");
break;
case 12:
document.write("<h3>The month is December.</h3>");
break;
default:
document.write("<h3>No such month exists for the number.</h3>");
break;
}
</script>
</head>
<body>
</body>
</html>
This should print "The month is June.", if you see in your browser you get the same output:
If you change the var month=6 to var month=13, you will get the following output:
Let me show the importance of break as well. Lets set month value as 2 i.e. var month=4 and then we will remove break keyword from case 1 and case 2 and leave the rest as it is. When you see the output in your browser you will get the following output.
We know that February should only be our answer but since we removed the break statement from case 2, the control passes to the third statement as well and print the value inside the case 3. So that's why break statement should be used so that once your condition matches the control won't flow to the next statement and goes out of the current statement where the condition satisfies. As you can see removing break from case 1 doesn't really affect while the value is 2. But if the value is 1 you should use break in case 1.