This content originally appeared on DEV Community and was authored by Danish Saleem
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
switchstatement when comparing equality against multiple variants. - Use a
caseblock per variant. - Use
breakto stop subsequent executions. -
Groupcase blocks that execute the same code. - Type matters, transforms values that might be a different type before comparing.
-
Switchstatements 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
This content originally appeared on DEV Community and was authored by Danish Saleem
Danish Saleem | Sciencx (2021-12-09T12:16:26+00:00) JavaScript for Beginners – Chapter 5: Switch Statements. Retrieved from https://www.scien.cx/2021/12/09/javascript-for-beginners-chapter-5-switch-statements/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.