Switch statement in JavaScript

Link for all dot net and sql server video tutorial playlists

Link for slides, code samples and text version of the video

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.

When should we use switch statement
To improve the readability of a program multiple if else if statements can be replaced with a switch statement.

Notice that in the following code we have several if else if statements
var userInput = Number(prompt("Please enter a number", ""));
if (userInput == 1)
{
alert("You number is One");
}
else if (userInput == 2)
{
alert("You number is Two");
}
else if (userInput == 3)
{
alert("Your number is Three");
}
else
{
alert("Your number is not between 1 and 3");
}

The above code can be rewritten using a switch statement and it greatly improves the readability
var userInput = Number(prompt("Please enter a number", ""));
switch (userInput)
{
case 1:
alert("You number is One");
break;
case 2:
alert("You number is Two");
break;
case 3:
alert("You number is Three");
break;
default:
alert("You number is not between 1 and 3");
break;
}

In general we need to have break statement after each case statement to ensure the program breaks out of the switch statement after executing statements present in a specific case.

What happens if there is no break in a switch statement?
If there is no break statement the execution falls automatically to next case until a break statement is encountered or end of the program is reached.

In the example below, since we don't have a break statement for case 1, when we enter 1 as the number we would get 2 alerts. First alert from case 1 and the second alert from case 2.
var userInput = Number(prompt("Please enter a number", ""));
switch (userInput)
{
case 1:
alert("You number is One");
case 2:
alert("You number is Two");
break;
case 3:
alert("You number is Three");
break;
default:
alert("You number is not between 1 and 3");
break;
}

When would you combine multiple case statements together?
If you want the same piece of code to be executed for multiple cases you can combine them together as shown below. Case statement with no code in-between creates a single case for multiple values. A case without any code will automatically fall through to the next case.

In this example case 1 and case 2 will fall through and execute code for case 3
var userInput = Number(prompt("Please enter a number", ""));
switch (userInput)
{
case 1:
case 2:
case 3:
alert("You number is "+ userInput);
break;
default:
alert("You number is not between 1 and 3");
break;
}

[tempest]

Thanks a lot, this has been very helpful. I am currently attending a javascript course and our mentor forgot to explain a lot of important things.

[BreathingGuy]

Great tutorial! Finally, learned how to use the switch statement and you presented it in a way that it was easily understood. Good job!

[computer_programming_gk]

In case of no break statement after alert, it goes to next case and display alert. But how it matches value of next case. E.g. user input is 1 and case has no break stmt then it goes to case 2 but user input is 1 then 1 equals 2? Little confusing. Anyone know how it works?

[folorunso]

Awesome piece as usually !! After the javascript fundamentals, i would really love to see AngularJs next; that seem to be the future of web client. Please !!! lol.  God bless

[uddiptasarkar]

Very nice video sir..this tutorial is helping me in lot of ways, I am a .net developer and It will be very helpful if you show the json lessons in video series..thanks

[jamesvandervegt]

Out of curiosity, can you make the switch statement work within a function? None of the javascript switch statement examples I found have javascript functions, but yours seems to be the closest to it. Also, yours actually has user input! Wow!

[satishmaurya]

Thanks sir
This video made me able to understand better

[karliebis]

in a case label can you use || so is case "hi" || "hey": valid?

[Deepakkumarmintoo]

Dear Venkat sir can you please upload the CSS from the beginning.

[mahmoudraslan]

I see switch case is not making sense, because when we entered 1 value at the first time the program should not case 2 because i did not enter 2 value on the textbox, is there any one agree with me?

[AkshanshShrivastava]

I always get invalid number. Is there something wrong with my code



<html>
<head>
<title>
switch case
</title>
</head>
<body>
<script language="javascript">
var d=prompt("Enter number");
switch (d)
{
case 0:alert("sunday");
break;
case 1:alert("Monday");
break;
case 2:alert("tuesday");
break;
case 3:alert("wednesday");
break;
case 4:alert("thursday");
break;
case 5:alert("friday");
break;
case 6:alert("saturday");
break;
default:alert("Invalid number");
break;
}
</script>
<form id="form1" runat="server">
</form>
</body>
</html>