How to Use Switch Statements in JavaScript

Use switch when one value can lead to several exact outcomes. This is cleaner than long if...else if chains when you are matching a single variable against multiple known cases.

What you’ll build or solve

You’ll learn how to use switch statements in JavaScript with case, break, and default. You’ll also know when switch reads better than chained conditionals.

When this approach works best

This approach is the right choice when one variable maps to several exact values.

Common real-world scenarios include:

• Status messages
• Theme modes
• User roles
• Keyboard shortcuts
• Route-based UI rendering

This is a bad idea when each branch depends on different boolean logic. In that case, if statements stay clearer.

Prerequisites

You only need:

• A JavaScript file or browser console
• Basic variables and conditionals knowledge

Step-by-step instructions

Step 1: Match one value against multiple cases

Start with the variable inside switch.

const role = "admin";

switch (role) {
  case "admin":
    console.log("Full access");
    break;
  case "editor":
    console.log("Edit access");
    break;
  default:
    console.log("Read only");
}

Each case checks one exact match.

Use default as the fallback branch.

This pattern is ideal for enums, status labels, and UI modes.

What to look for:

• switch checks one variable
• case values are exact matches
• break stops fall-through
• default handles unmatched values
• Cleaner than long exact-match if chains

Examples you can copy

Theme mode

switch (theme) {
  case "dark":
    enableDarkMode();
    break;
  case "light":
    enableLightMode();
    break;
}

User role

switch (user.role) {
  case "pro":
    showPremium();
    break;
}

Status badge

switch (status) {
  case "success":
    badge.textContent = "Done";
    break;
}

Common mistakes and how to fix them

Mistake 1: Forgetting break

What the reader might do:

switch (role) {
  case "admin":
    console.log("Admin");
  case "editor":
    console.log("Editor");
}

Why it breaks: execution continues into the next case.

Corrected approach:

case "admin":
  console.log("Admin");
  break;

Mistake 2: Using expressions instead of exact matches

What the reader might do:

switch (score > 80)

Why it breaks: switch is best for exact values, not varied boolean logic.

Corrected approach:

Use if for condition ranges.

Mistake 3: Forgetting default

What the reader might do:

switch (theme) {
  case "dark":
    enableDarkMode();
    break;
}

Why it breaks: unmatched values silently do nothing.

Corrected approach:

default:
  enableLightMode();

Troubleshooting

If multiple cases run, add missing break statements.

If no branch matches, confirm the variable value exactly matches the case string.

If conditions are range-based, switch back to if.

If unexpected values appear, add a default fallback.

Quick recap

• Use switch for one exact-match variable
• Add case for each possible value
• Use break to stop fall-through
• Use default as fallback
• Prefer if for range logic