JavaScript switch Statement

In the previous lesson, we learned how to make decisions with if/else if/else. Now let’s meet the switch statement, a cleaner way to compare one value against many possible cases.

🔀 What is a switch Statement?

A switch statement checks a single value and runs the block of code that matches it. When you find yourself writing a long chain of if/else if that all compares the same variable, switch says the same thing with less clutter.

Here is the basic shape:

switch (value) {
  case x:
    // runs when value === x
    break;
  case y:
    // runs when value === y
    break;
  default:
  // runs when nothing matches
}

Let’s walk through the shape line by line:

• switch (value) takes the value we want to compare and hands it to the cases below.
• case x: runs its block when value === x, and case y: does the same for y.
• break; stops the switch once a matching case finishes.
• default: runs when none of the cases match.

JavaScript takes the value at the top, walks down the cases, and runs the first one that matches.

🧩 The Parts of a switch

Each piece of a switch has a job. Let’s break them down.

📅 A Simple Example

Let’s turn a day number into a day name. We compare the day variable against each case until one matches.

const day = 3;

switch (day) {
  case 1:
    console.log("Monday");
    break;
  case 2:
    console.log("Tuesday");
    break;
  case 3:
    console.log("Wednesday"); // ✅ this matches
    break;
  default:
    console.log("Some other day");
}

Here is how JavaScript runs this code:

• const day = 3; sets the value we are about to compare.
• switch (day) starts checking day against each case from the top.
• case 1 and case 2 do not match, so JavaScript skips them.
• case 3 matches, so it prints "Wednesday" and then hits break to stop.
• default never runs here because a case already matched.

🛑 The Role of break

The break keyword tells JavaScript to leave the switch once a matching case is done. Without it, JavaScript keeps running the next cases too, even if they do not match. This is called fall-through.

Watch what happens when we forget break:

const day = 1;

switch (day) {
  case 1:
    console.log("Monday"); // matches, but no break
  case 2:
    console.log("Tuesday"); // ❌ this also runs!
  case 3:
    console.log("Wednesday"); // ❌ and so does this!
}

Let’s trace why all three lines print:

• case 1 matches, so it prints "Monday".
• With no break, JavaScript falls into case 2 and prints "Tuesday" even though day is not 2.
• It keeps falling through into case 3 and prints "Wednesday" too.

Almost always you want a break at the end of each case.

🎯 The default Case

The default case runs when none of the cases match. Think of it as the else of a switch. It is optional, but adding it means your code always has an answer.

const color = "purple";

switch (color) {
  case "red":
    console.log("Stop");
    break;
  case "green":
    console.log("Go");
    break;
  default:
    console.log("Unknown color"); // ✅ runs because nothing matched
}

Here is what happens step by step:

• const color = "purple"; sets the value we compare.
• case "red" and case "green" do not match, so JavaScript skips both.
• default runs because nothing matched, printing "Unknown color".

🔍 switch Uses Strict Comparison

A switch compares each case using strict equality (===), so the value and the type must both match. There is no type conversion here.

const input = "5";

switch (input) {
  case 5:
    console.log("Number five");
    break;
  case "5":
    console.log("String five"); // ✅ this matches
    break;
}

Let’s see why only one case matches:

• const input = "5"; stores the string "5", not the number 5.
• case 5 does not match because the number 5 is a different type from the string "5".
• case "5" matches exactly, so it prints "String five".

The number and the string are different values to a switch.

🍔 A Practical Example

A switch shines when a single choice triggers different actions. Let’s handle a menu choice where each option does something different.

const choice = "save";

switch (choice) {
  case "new":
    console.log("Creating a new file...");
    break;
  case "open":
    console.log("Opening a file...");
    break;
  case "save":
    console.log("Saving your work..."); // ✅ this runs
    break;
  default:
    console.log("Command not recognized");
}

Here is how the menu picks an action:

• const choice = "save"; holds the command we want to handle.
• case "new" and case "open" do not match, so JavaScript skips them.
• case "save" matches, so it prints "Saving your work..." and then break stops the switch.
• default catches any command we did not plan for, like a typo.

🤔 switch vs if/else if

Both tools make decisions, so which one fits? Use a switch when you are checking one value against many fixed options. Reach for if/else if when your conditions are ranges or involve different variables.

⚠️ Common Mistakes to Avoid

🔧 Try It Yourself!

🧩 What You’ve Learned

• ✅ A switch compares one value against many cases cleanly
• ✅ break stops the switch and prevents fall-through
• ✅ default runs when no case matches
• ✅ A switch uses strict comparison (===), so type matters
• ✅ Use switch for many fixed values and if/else if for ranges or complex logic

🚀 What’s Next?

Now that you can branch with switch, let’s learn a shortcut for quick decisions. Let’s continue to Ternary Operator.