
- Javascript Basics Tutorial
- Javascript - Home
- Javascript - Overview
- Javascript - Syntax
- Javascript - Enabling
- Javascript - Placement
- Javascript - Variables
- Javascript - Operators
- Javascript - If...Else
- Javascript - Switch Case
- Javascript - While Loop
- Javascript - For Loop
- Javascript - For...in
- Javascript - Loop Control
- Javascript - Functions
- Javascript - Events
- Javascript - Cookies
- Javascript - Page Redirect
- Javascript - Dialog Boxes
- Javascript - Void Keyword
- Javascript - Page Printing
- JavaScript Objects
- Javascript - Objects
- Javascript - Number
- Javascript - Boolean
- Javascript - Strings
- Javascript - Arrays
- Javascript - Date
- Javascript - Math
- Javascript - RegExp
- Javascript - HTML DOM
- JavaScript Advanced
- Javascript - Error Handling
- Javascript - Validations
- Javascript - Animation
- Javascript - Multimedia
- Javascript - Debugging
- Javascript - Image Map
- Javascript - Browsers
- JavaScript Useful Resources
- Javascript - Questions And Answers
- Javascript - Quick Guide
- Javascript - Functions
- Javascript - Resources
What is Switch...case statement in JavaScript?
The objective of a switch statement is to give an expression to evaluate and several different statements to execute based on the value of the expression. The interpreter checks each case against the value of the expression until a match is found. If nothing matches, a default condition will be used.
You can use a switch statement that handles exactly this situation, and it does so more efficiently than repeated if...else if statements. In simple programming, the switch case statement is a control-flow statement that checks an expression for the different values against multiple cases.
Syntax
Following syntax will show you how you can use the switch case statements where the multiple cases to be checked for a single expression −
switch (expression){ case firstValue: // code to be executed if the first case met the expression break; case secondValue: // code to be executed if the second case met the expression break; case thirdValue: // code to be executed if the third case met the expression break; default: // code to be executed if none of the cases met the expression break; };
The break statements indicate the end of a particular case. If they were omitted, the interpreter would continue executing each statement in each of the following cases.
How does the Switch statement work?
The switch case statement takes an expression inside the parenthesis and then it checks that expression for different cases and executes the particular code or the statements associated with that case. If you noticed in the above syntax, every case ended with the break keyword. The break keyword tells the interpreter that the code inside any particular case is executed and now it’s time to eliminate the switch case statement for now. The default statement will execute if none of the cases in the switch statement matches the expression.
Let us understand the practical implementation of the switch-case statement in JavaScript with the help of the code example
Algorithm
Step 1 − In the first step, we will add an input element in the HTML document to get the inputs from the users of their choice.
Step 2 − In the next step, we will add a button tag with an onclick event which will later call a function on user click to the button.
Step 3 − In the final step, we will declare a JavaScript function that contains the switch case statement to check for various cases and return different outputs on the user screen for different cases.
Example
You can try to run the following to learn how to work with a switch case statement in JavaScript −
<html> <body> <script> var grade = 'A'; document.write("Entering switch block<br />"); switch(grade) { case'A': document.write("Good job <br />"); break; case'B': document.write("Pretty good <br />"); break; case'C': document.write("Passed <br />"); break; case'D': document.write("Not so good <br />"); break; case'F': document.write("Failed <br />"); break; default: document.write("Unknown grade<br />") } document.write("Exiting switch block"); </script> </body> </html>
Let us see one more code example where we will check whether the value entered by the user is an odd or even value using the switch case statement.
Algorithm − The algorithm of this example and the above example is almost the same you just need to do some minor addition by applying the odd/even number checking formula on the input entered by the user and the rest of the things will remain the same.
Example
The below example will explain the use of the switch case statement to find out whether the number entered by the user is odd or even −
<html> <body> <h2> Switch...case statement in JavaScript </h2> <p> Enter any number: </p> <input type = "number" id = "inp" /> <br> <p> Click the below button to see the results. </p> <button onclick = "display()"> Click to See Results </button> <p id = "result"> </p> <script> var result = document.getElementById("result"); function check() { var inp1 = document.getElementById("inp"); var inpVal = Number(inp1.value); var num = (inpVal % 2); switch (num) { case 0: result.innerHTML += " The number you entered " + inpVal + " is an even number. <br> "; break; case 1: result.innerHTML += " The number you entered " + inpVal + " is an odd number. <br> "; break; default: result.innerHTML += ' You entered a wrong input. '; break; } } function display() { check(); } </script> </body> </html>
In this example, we are grabbing the value entered by the user and then storing it in a new variable which holds the remainder of the entered value when it is divided by 2. If the remainder is 0, then the entered value will be an even number. Otherwise, the entered value will be an odd number.
In this article, we have learned about the switch case statement in JavaScript. We have discussed it in detail with the help of two different use cases of switch case statements in two different scenarios, wherein in the first one we are checking for the string inputs and in the latter one we are checking for the number inputs.
- Related Articles
- Switch case statement in C
- What is a switch case statement in Java and how to use it?
- How to implement switch-case statement in Kotlin?
- Switch case calculator in JavaScript
- How to use case-insensitive switch-case in JavaScript?
- Explain Strict Comparison in JavaScript switch statement?
- Golang Program to Show the Duplicate Case Error in Switch Statement
- Can we have a return statement in a JavaScript switch statement?
- Explain common code blocks in JavaScript switch statement?
- Switch case in Arduino
- Is it safe to assume strict comparison in a JavaScript switch statement?
- How to come out of a switch case in JavaScript?
- Switch Statement in Java
- Switch Case in Python (Replacement)
- Java switch statement
