Home » Tutorials » Learn Javascript » JavaScript Switch Statement

Learn Javascript

 Prev

JavaScript Switch Statement

JavaScript Switch Statement executes blocks of code matching certain “cases” or conditions. It is sometimes used in place of if-else Statement.

Be sure to check out our JavaScript If-Else lesson before you jump on the Switch statement for better learning.

How the JavaScript Switch Statement works? 🤔

It’s syntax is given below:

switch (condition) {
    case value1:
        // Code Block of value1 
        break;
    case value2:
        // Code Block of value2 
        break;
    default:
        // Default Code Block
}
  1. We provide a condition in the switch expression.
  2. Then, the value from the condition provided in the switch expression is checked with each of the values in our case blocks.
  3. If the value from condition matches any of the values in each of the case blocks, the corresponding case block executes.
  4. If the value does not match any of the provided values in any of the case blocks, the default block executes.

Example

const age = 24;

switch (age) {
    case 20:
        console.log("You're 20 years old.");
        break;
    case 22:
        console.log("You're 22 years old.");
        break;
    case 24:
        console.log("You're 22 years old.");
        break;
    default:
        console.log("How old are you?");
        break;
}

Output

You're 22 years old.

Switch Uses Strictly Equal operator 👨‍🏫

Switch uses the Strictly Equal Operator === inside it, to check the given condition with values given in cases.

It means that switch statement checks not only the values in cases but also the data type of values with the data type given in the condition. The Strictly Equal Operator === is true only when both values and their data types match.

const numberOfBooks = 14;

switch (numberOfBooks) {
    case "14":
        console.log("Wait, I don't understand.");
        break;
    case 14:
        console.log("You have 14 books.");
        break;
    default:
        console.log("How many books do you have?");
        break;
}

Output

You have 14 books.

The Break Keyword ✂

The break keyword helps to get out/exit out of the switch statement. In other words, it stops the switch statement from executing any further.

NOTE: If we don’t provide the break keyword, the next case will still run even if the conditions don’t match.

const age = 24;

switch (age) {
    case 24:
        // This runs because conditions match
        console.log("You're 24 years old.");
    case 22:
        // But, as we didn't provide a break statement above, this block also gets executed.
        console.log("You're 22 years old.");
        break;
    default:
        console.log("How old are you?");
        break;
}

Output

You're 24 years old.
You're 22 years old.

The Default Keyword ✅

The default keyword is used to create a block which will run if none of the above cases match the given condition.

const currentSeason = "Summer";

switch (currentSeason) {
    case "Winter":
        console.log("Winter has arrived. Let's make a snowman.");
        break;
    case "Spring":
        console.log("Spring is awesome. I can hear the birds singing.");
        break;
    case "Autumn":
        console.log("Autumn just feels so sad. No leaves on trees either.");
        break;
    default:
        console.log("Summer is here. Let's have some ice cream.");
        break;
}

Output

Summer is here. Let's have some ice cream.

Multi-Case Switch 🤯

We can also use the fact that multiple cases can run if a break keyword is not provided and have a multiple-case switch statement running.

In order to understand it better, check out the example below:

const trafficLight = "Green";

switch (trafficLight) {
    case "Yellow":
    case "Green":
    case "Red":
        console.log("It is one of the colors in the Traffic Light.");
        break;
    default:
        console.log("It is a color excluding the colors in the traffic light.");
        break;
}

Output

It is one of the colors in the Traffic Light.

Replacing If-Else with Switch Statement 🤔

Although, If-Else statement are used more widely than Switch statement, there are some cases when switch statement is preferred more than if-else.

Example with If-Else Statement 😢

const weatherOutside = "Snowing";

if (weatherOutside === "Snowing") {
    console.log("Wear a warm coat.");
}
else if (weatherOutside === "Winter") {
    console.log("Wear a warm coat.");
}
else if (weatherOutside === "Hot") {
    console.log("Let's have ice cream.");
}
else if (weatherOutside === "Summer") {
    console.log("Let's have ice cream.");
}
else {
    console.log("Let's stay at home.");
}

Output

Wear a warm coat.

Example with Switch Statement 😀

Fewer lines of code is written as compared to if-else statement. When we have similar conditions, that have the same output/code-block to execute, it is found much better to use switch statement rather than if-else, even if any of those would work.

const weatherOutside = "Snowing";

switch (weatherOutside) {
    case "Snowing":
    case "Winter":
        console.log("Wear a warm coat.");
        break;
    case "Hot":
    case "Summer":
        console.log("Let's have ice cream.");
        break;
    default:
        console.log("Let's stay at home.");
        break;
}

Output

Wear a warm coat.

In this way, Switch statement helps us write conditional statement in an organized way.

Next