Welcome to the JavaScript tutorials, we already covered JavaScript If else, and JavaScript Variables. Today we will discuss JavaScript Switch Case, like if else statement JavaScript switch case is also a conditional statement. Instead of using many if else statements, you can use the switch case in JavaScript. It is the best option to use when you will have more actions to perform as per the conditions.

Let’s see what we will cover in this tutorial:

  • JavaScript switch case – Syntax
  • Use of Break
  • Use of Default

Learn JavaScript Switch Case

JavaScript Switch Case – Syntax

Let’s see the syntax first, and then we will discuss how it will work:

Switch (expression)

{

Case 1:

Statement1

Break;

Case 2:

Statement2

Break;

Case n:

Statement n

Break;

Default:

Default statement

}

Let’s examine the syntax from the start. We have an expression that will be evaluated once, and later it will be checked with the value of each case. The moment switch ‘expression’ value and case value matches, the relevant code will be executed.

Note: If nothing matches, then default case code will be executed.



JavaScript Switch Case – use of break

The break means stop, and in JavaScript Switch case, the meaning of the break keyword is same. Once the interpreter will find a break keyword, then the interpreter will understand that, it’s time to move next code.

For example, if the interpreter will get the result (matched value) in the first case only, then there is no need to look for the entire case.

<html>

<head>                </head>

<body>

<script type="text/javascript">

<!--

var val='1';

document.write("Let's check result<br />");

switch (val)

{

case '1': document.write("sharplesson is at no. 1<br />");

case '2': document.write("see we have not used break keyword in case1<br />");
break;

default:  document.write("We used break in case2:<br />")

}
document.write("Exit with smile");

//-->

</script>

</body>

</html>

The result will be:

Let's check result
sharplesson is at no. 1
see we have not used break keyword in case1
Exit with smile

You can see, even though the interpreter got the result in the first case only.  But still it has executed case 2 as well. Want to know, why?

Reason

Because, we have not used break keyword in the case ‘1’, which let the interpreter to execute case ‘2’ as well. Since we have used the break keyword in the case ‘2’, that is why the interpreter stopped there. Otherwise, it could have printed default statement as well.

JavaScript Switch Case –Use of default

In JavaScript Switch Case, the default keyword will be used to execute the default code. It means, if the interpreter will not find any value matching to the switch expression value, then it will show you the default value.

<html>

<head>                </head>

<body>

<script type="text/javascript">

<!--

var val='4';

document.write("Let's check result<br />");

switch (val)

{

case '1': document.write("sharplesson is at no. 1<br />");

break;

case '2': document.write("see we have not used break keyword in case1<br />");

break;
default:  document.write("nothing matched:<br />")

}

document.write("Exit with smile");

//-->

</script>

</body>

</html>

The output will be:

Let's check result
nothing matched:
Exit with smile

We can clearly see that we have properly used break statement.  It means, you will see the only one result either the matched one or the default one. The switch expression value doesn’t match with any case, and that is why the interpreter has executed the default statement.

Tips

  • If you will not use break keyword properly, then you will get unexpected results. As we have seen in our examples.
  • If you will not use the default keyword, then either interpreter will execute the matched case statements or it will not show any result, because interpreter can’t find anything default.

Conclusion

We have just covered JavaScript switch case, break, and default keywords. We hope things are clear regarding the use of JavaScript switch case, and how you will use it? Just practice it to get perfection. Because JavaScript is a very easy language to understand.


What next? Next we will see the JavaScript While loop.


If you liked our content on JavaScript Switch case, then just tweet, share, or like us on a Facebook. Let’s reach out to many people, because we believe sharing is caring. In case you have any query or suggestion, just write to us. We are working for our readers and for sure will help you to assist with your query.