There are times in JavaScript where you might consider using a switch
statement instead of an if else
statement.
switch
statements can have a cleaner syntax over complicated if else
statements.
Take a look at the example below – instead of using this long if else
statement, you might choose to go with an easier to read switch
statement.
const pet = "dog";
if (pet === "lizard") {
console.log("I own a lizard");
} else if (pet === "dog") {
console.log("I own a dog");
} else if (pet === "cat") {
console.log("I own a cat");
} else if (pet === "snake") {
console.log("I own a snake");
} else if (pet === "parrot") {
console.log("I own a parrot");
} else {
console.log("I don't own a pet");
}
const pet = "dog";
switch (pet) {
case "lizard":
console.log("I own a lizard");
break;
case "dog":
console.log("I own a dog");
break;
case "cat":
console.log("I own a cat");
break;
case "snake":
console.log("I own a snake");
break;
case "parrot":
console.log("I own a parrot");
break;
default:
console.log("I don't own a pet");
break;
}
In this article, I'll explain what switch statements are and how they work. I'll also help you figure out if they're a good option to use in your code.
What is a Switch Statement?
In programming, a switch
statement is a control-flow statement that tests the value of an expression
against multiple cases.
This is the basic syntax for a switch
statement:
switch (expression) {
case 1:
//this code will execute if the case matches the expression
break;
case 2:
//this code will execute if the case matches the expression
break;
case 3:
//this code will execute if the case matches the expression
break;
default:
//this code will execute if none of the cases match the expression
break;
}
The computer will go through the switch
statement and check for strict equality ===
between the case
and expression
. If one of the cases matches the expression
, then the code inside that case
clause will execute.
switch (expression) {
case 1:
//this code will execute if the case matches the expression
break;
case 2:
//this code will execute if the case matches the expression
break;
}
If none of the cases match the expression, then the default
clause will be executed.
default:
//this code will execute if none of the cases match the expression
break;
If multiples cases match the switch
statement, then the first case
that matches the expression
will be used.
break
statements will break out of the switch
when the case
is matched. If break
statements are not present, then the computer will continue through the switch
statement even if a match is found.
If return
statements are present in the switch
, then you don't need a break
statement.
Example of Switch Statements in JavaScript
In this example, we are comparing "oboe"
to the cases. "oboe"
would match the third case
clause and would print to the console "I play the oboe".
switch ("oboe") {
case "trumpet":
console.log("I play the trumpet");
break;
case "flute":
console.log("I play the flute");
break;
case "oboe":
console.log("I play the oboe");
break;
default:
console.log("I don't play an instrument. Sorry");
break;
}
If I were to change the expression to "no instrument"
, then the default
clause would execute and the message printed to the console would be "I don't play an instrument. Sorry".
switch ("no instrument") {
case "trumpet":
console.log("I play the trumpet");
break;
case "flute":
console.log("I play the flute");
break;
case "oboe":
console.log("I play the oboe");
break;
default:
console.log("I don't play an instrument. Sorry");
break;
}
Missing Break Statements
In this example, the match would be case
2. But without a break
statement, the computer will continue onto case
3 and the default
clause.
You should see three console.log
statements because a break
statement was not included.
switch (2) {
case 1:
console.log("Number 1 was chosen");
case 2:
console.log("Number 2 was chosen");
case 3:
console.log("Number 3 was chosen");
default:
console.log("No number was chosen");
}

Where to Place the Default Clause
Standard convention is to place the default
as the last clause. But you can place it before other cases too.
const food = "nuts";
switch (food) {
case "cake":
console.log("I like cake");
break;
case "pizza":
console.log("I like pizza");
break;
default:
console.log("I like all foods");
break;
case "ice cream":
console.log("I like ice cream");
break;
}

The computer will still go through each of the cases and find a match. Since the variable food
does not match any of the cases, then the default
case will be executed.
Multiple Cases for One Operation
There may be times where you have one operation that will be the same for multiple cases.
Instead of writing out the same console.log
for each case, we can omit the break
statements and place a singular operation after the group of cases.
The message, "This country is in Europe." will print to the console if country
matches any of the cases of "France"
, "Spain"
, "Ireland"
or "Poland"
.
const country = "Ireland";
switch (country) {
case "France":
case "Spain":
case "Ireland":
case "Poland":
console.log("This country is in Europe.");
break;
case "United States":
default:
console.log("This country is not in Europe.");
}
Block Scope and Switch Statements
This example will produce an error message, because the message
variable has already been declared and you cannot have the same variable name in the same block scope.
const errand = "Going Shopping";
switch (errand) {
case "Going to the Dentist":
let message = "I hate going to the dentist";
console.log(message);
break;
case "Going Shopping":
let message = "I love to shop";
console.log(message);
break;
default:
console.log("No errands");
break;
}

In order to get rid of that error message, the cases need to be wrapped in a set of curly braces.
const errand = "Going Shopping";
switch (errand) {
case "Going to the Dentist": {
let message = "I hate going to the dentist";
console.log(message);
break;
}
case "Going Shopping": {
let message = "I love to shop";
console.log(message);
break;
}
default: {
console.log("No errand");
break;
}
}

Conclusion
Using a switch
statement can be an alternative to an if else
statement. A switch
statement compares the value of an expression
to multiple cases.
switch
statements will check for strict equality. In this example, since "2"!== 2
, the default
clause will execute.
switch (2) {
case "2":
console.log("Number 2 in a string");
break;
case "3":
console.log("Number 3 in a string");
break;
default:
console.log("Number not present");
break;
}
break
statements will break out of the switch
when the case
is matched. If break
statements are not present, then the computer will continue through the switch
statement even if a match is found.
I hope you enjoyed this article on switch
statements.