JavaScript Conditions
JavaScript switch Statement
The JavaScript
switchstatement is used to perform different actions based on different values.
It is useful when you want to compare one value with many possible cases.
Example
Example
javascript
let day = 1;
switch (day) {
case 1:
console.log("Monday");
break;
case 2:
console.log("Tuesday");
break;
default:
console.log("Invalid day");
}In this example, JavaScript checks the value of day and runs the matching case.
What is a switch Statement?
A switch statement checks one value against multiple possible cases.
It can be used as an alternative to multiple else if statements.
Syntax
Syntax
javascript
switch (expression) {
case value1:
// code runs if expression matches value1
break;
case value2:
// code runs if expression matches value2
break;
default:
// code runs if no case matches
}The expression is compared with each case.
When a matching case is found, the code inside that case runs.
Simple switch Example
Simple switch Example
javascript
let fruit = "apple";
switch (fruit) {
case "apple":
console.log("This is an apple.");
break;
case "banana":
console.log("This is a banana.");
break;
default:
console.log("Unknown fruit.");
}Here, JavaScript checks the value of fruit.
Since the value is "apple", the first case runs.
The case Keyword
The case keyword is used to define a possible value.
Example
The case Keyword
javascript
let grade = "A";
switch (grade) {
case "A":
console.log("Excellent");
break;
case "B":
console.log("Good");
break;
case "C":
console.log("Average");
break;
default:
console.log("Invalid grade");
}Each case represents one possible value.
The break Keyword
The break keyword is used to stop the switch statement after a matching case runs.
Example
The break Keyword
javascript
let color = "red";
switch (color) {
case "red":
console.log("Stop");
break;
case "green":
console.log("Go");
break;
default:
console.log("Invalid color");
}Without break, JavaScript may continue running the next cases.
What Happens Without break?
If you do not use break, JavaScript continues to execute the next case after a match.
Example
What Happens Without break?
javascript
let number = 1;
switch (number) {
case 1:
console.log("One");
case 2:
console.log("Two");
default:
console.log("Other number");
}In most beginner examples, you should use break to avoid unwanted results.
The default Keyword
The default block runs when no case matches.
Example
The default Keyword
javascript
let day = 9;
switch (day) {
case 1:
console.log("Monday");
break;
case 2:
console.log("Tuesday");
break;
default:
console.log("Invalid day");
}Here, no case matches 9, so the default block runs.
switch with Numbers
You can use switch with number values.
Example
switch with Numbers
javascript
let month = 3;
switch (month) {
case 1:
console.log("January");
break;
case 2:
console.log("February");
break;
case 3:
console.log("March");
break;
default:
console.log("Invalid month");
}switch with Strings
You can also use switch with string values.
Example
switch with Strings
javascript
let role = "admin";
switch (role) {
case "admin":
console.log("Full access");
break;
case "editor":
console.log("Edit access");
break;
case "user":
console.log("View access");
break;
default:
console.log("No access");
}Grouping Multiple Cases
Sometimes, multiple cases need to run the same code.
Example
Grouping Multiple Cases
javascript
let day = "Saturday";
switch (day) {
case "Saturday":
case "Sunday":
console.log("Weekend");
break;
case "Monday":
case "Tuesday":
case "Wednesday":
case "Thursday":
case "Friday":
console.log("Weekday");
break;
default:
console.log("Invalid day");
}Here, "Saturday" and "Sunday" share the same result.
switch Uses Strict Comparison
The switch statement uses strict comparison.
This means the value and data type should match.
Example
switch Uses Strict Comparison
javascript
let value = "1";
switch (value) {
case 1:
console.log("Number one");
break;
case "1":
console.log("String one");
break;
}Here, "1" and 1 are different because one is a string and the other is a number.
Complete Example
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript switch Statement</title>
</head>
<body>
<h1>JavaScript switch Statement</h1>
<p id="result"></p>
<script>
let dayNumber = 3;
let dayName = "";
switch (dayNumber) {
case 1:
dayName = "Monday";
break;
case 2:
dayName = "Tuesday";
break;
case 3:
dayName = "Wednesday";
break;
case 4:
dayName = "Thursday";
break;
case 5:
dayName = "Friday";
break;
case 6:
case 7:
dayName = "Weekend";
break;
default:
dayName = "Invalid day number";
}
document.getElementById("result").innerHTML = dayName;
</script>
</body>
</html>Try It Yourself
Run the above example in the Try It Editor.
Try changing the value of dayNumber.
Example
Try It Yourself
javascript
let dayNumber = 6;Then try:
Try It Yourself
javascript
let dayNumber = 9;Check how the result changes.
Important Points
- The
switchstatement is used to compare one value with many possible cases. - The
casekeyword defines each possible value. - The
breakkeyword stops the switch after a matching case runs. - The
defaultblock runs when no case matches. - Multiple cases can share the same code.
- The
switchstatement uses strict comparison.
Conclusion
The JavaScript switch statement is useful when you need to compare one value with many possible options.
It can make your code cleaner than writing many else if statements, especially when checking fixed values like days, roles, grades, or menu choices.