In this tutorial, you will learn about the switch
statement in JavaScript.
The switch
statement is used to perform different actions based on different conditions. It provides an efficient way to execute a specific block of code depending on the value of an expression.
Syntax
switch(expression) {
case value1:
// Code to execute if expression === value1
break;
case value2:
// Code to execute if expression === value2
break;
default:
// Code to execute if no match is found
}
How It Works:
- The
switch
expression is evaluated once. - Its value is compared with each
case
value. - If there is a match, the corresponding block of code executes.
- If no match is found, the
default
block executes.
Example: Get Weekday Name
The getDay()
method returns a number representing the weekday (0 for Sunday, 1 for Monday, etc.). The example below converts this number into a weekday name:
let day;
switch (new Date().getDay()) {
case 0:
day = "Sunday";
break;
case 1:
day = "Monday";
break;
case 2:
day = "Tuesday";
break;
case 3:
day = "Wednesday";
break;
case 4:
day = "Thursday";
break;
case 5:
day = "Friday";
break;
case 6:
day = "Saturday";
break;
}
console.log("Today is: " + day);
// Output: Today is: Tuesday
The break
Keyword
The break
statement stops execution inside the switch
block. If omitted, execution will fall through to the next case.
Without break
let fruit = "banana";
switch (fruit) {
case "apple":
console.log("You chose an apple.");
case "banana":
console.log("You chose a banana.");
case "mango":
console.log("You chose a mango.");
default:
console.log("Unknown fruit.");
}
// Output:
You chose a banana.
You chose a mango.
Unknown fruit.
Adding break
prevents this issue
switch (fruit) {
case "apple":
console.log("You chose an apple.");
break;
case "banana":
console.log("You chose a banana.");
break;
case "mango":
console.log("You chose a mango.");
break;
default:
console.log("Unknown fruit.");
}
// Output: You chose a banana.
The default
Keyword
The default
case executes if no other case
matches:
let weather = "stormy";
switch (weather) {
case "sunny":
console.log("Wear sunglasses!");
break;
case "rainy":
console.log("Take an umbrella.");
break;
default:
console.log("Weather is unpredictable!");
}
// Output: Weather is unpredictable!
The default
case does not have to be at the end:
switch (weather) {
default:
console.log("Weather is unpredictable!");
break;
case "sunny":
console.log("Wear sunglasses!");
break;
case "rainy":
console.log("Take an umbrella.");
break;
}
Grouping Cases with Common Code
Multiple cases can share the same code block:
let dayNumber = new Date().getDay();
switch (dayNumber) {
case 4:
case 5:
console.log("The weekend is near!");
break;
case 0:
case 6:
console.log("It's the weekend!");
break;
default:
console.log("Waiting for the weekend!");
}
// Output: The weekend is near!
Strict Comparison (===
)
The switch
statement uses strict comparison (===
).
let x = "0";
switch (x) {
case 0:
console.log("Zero as a number");
break;
case "0":
console.log("Zero as a string");
break;
default:
console.log("No match found");
}
// Output: Zero as a string
Since x
is a string ("0"), it does not match the number 0
due to strict comparison.