The switch
statement is another form of conditional logic
in JavaScript
. In this chapter we will cover the syntax of the switch
statements as well as how it differs from the if statement and when to use which.
Switch vs If
A switch
statement is a good alternative to the if
statement when you are comparing a single value against multiple variants. For example, the following if statement can be written as a switch instead.
const fruit = "Cherry";
if (fruit === "Apples") {
console.log("Apples are on isle 2");
} else if (fruit === "Banana") {
console.log("Bananas are on isle 3");
} else if (fruit === "Cherry") {
console.log("Cherries are on isle 4");
} else {
console.log("We do not stock any of this fruit");
}
The Syntax
In a switch
statement you start with the value you are checking and create a case block
for each variant you want to check against.
const fruit = "Cherry";
switch (fruit) {
case "Apple":
console.log("Apples are on isle 2");
break;
case "Banana":
console.log("Bananas are on isle 3");
break;
case "Cherry":
console.log("Cherries are on isle 4");
break;
default:
console.log("We do not stock any of this fruit");
}
// Output: Cherries are on isle 4
Break
Once there is a match the execution starts and will run until the next break
. If you don't include breaks it will continue through each case.
const fruit = "Banana";
switch (fruit) {
case "Apple":
console.log("Apples are on isle 2");
break;
case "Banana":
console.log("Bananas are on isle 3");
break;
case "Cherry":
console.log("Cherries are on isle 4");
break;
default:
console.log("We do not stock any of this fruit");
}
// Output: Bananas are on isle 3
// Output: Cherries are on isle 4
// Output: We do not stock any of this fruit
Case Group
Several variants of case
which share the same code can be grouped together.
const fruit = "Cherry";
switch (fruit) {
case "Apple":
console.log("Apples are on isle 2");
break;
case "Banana":
case "Cherry":
console.log("Bananas and Cherries are on isle 4");
break;
default:
console.log("We do not stock any of this fruit");
break;
}
// Output: Bananas and Cherries are on isle 4
Type Matters
Switch
statements use a strick equality check so type always matters. If there is a possibility of your value being a different type it's best to transform if first before the switch statement.
const enteredValues = "2";
switch (Number(enteredValues)) {
case 1:
console.log("You picked number 1");
break;
case 2:
console.log("You picked number 2");
break;
case 3:
console.log("You picked number 3");
break;
default:
console.log("Pick a number between 1 and 3");
}
// Output: You picked number 2
Within Function
Switch
statements can also be used within function to return a value. If your switch has a return
then it doesn't need break
since a return will terminate the execution.
function getGreeting(language) {
switch (language) {
case "English":
return "Hello";
case "Spanish":
return "Hola";
case "French":
return "Bonjour";
case "Italian":
return "Ciao";
}
}
getGreeting("Spanish");
// Output: Hola
Summary
- Use
switch
statement when comparing equality against multiple variants. - Use a
case
block per variant. - Use
break
to stop subsequent executions. -
Group
case blocks that execute the same code. - Type matters, transforms values that might be a different type before comparing.
-
Switch
statements can return a value when used within a function.
Let's connect 💜
You can follow me on Twitter, Instagram & GitHub
If you like this post. Kindly support me by Buying Me a Coffee
Top comments (2)
Instead of switch we can use js objects:
const language={
english: "Hello",
spanish:"Hola",
french: "Bonjour",
italian:"Ciao"
}
console.log(language.english ?? "wrong key")
Hmmm thanks for letting me know.