Switch Case in JavaScript: Matching Values with Clean Syntax | JavaScript Tutorial | CodeWithMihir

Welcome back! 👋 In the previous lesson, you learned the ternary operator for writing clean one-line conditionals. Now let's explore the switch case statement — JavaScript's most elegant tool for matching one value against many exact options!

The switch statement is like a menu selector. Instead of writing a long chain of if...else if conditions, you hand JavaScript one value and let it jump straight to the right case. The result? Code that's cleaner, easier to scan, and simpler to maintain.

Let's master it from the ground up!

What is a Switch Statement?

A switch statement takes a single expression, evaluates it once, and then compares the result against a list of case values. When a match is found, the code inside that case runs.

The Problem it Solves

Imagine checking the day of the week with if...else if:

// ❌ Long and repetitive
let day = "Wednesday";

if (day === "Monday") {
  console.log("Start of the work week! 💪");
} else if (day === "Tuesday") {
  console.log("Second day!");
} else if (day === "Wednesday") {
  console.log("Midweek! 📅");
} else if (day === "Thursday") {
  console.log("Almost there!");
} else if (day === "Friday") {
  console.log("Last work day! 🎉");
} else {
  console.log("Weekend! 😎");
}

Now with switch:

// ✅ Clean and easy to read
let day = "Wednesday";

switch (day) {
  case "Monday":
    console.log("Start of the work week! 💪");
    break;
  case "Tuesday":
    console.log("Second day!");
    break;
  case "Wednesday":
    console.log("Midweek! 📅");
    break;
  case "Thursday":
    console.log("Almost there!");
    break;
  case "Friday":
    console.log("Last work day! 🎉");
    break;
  default:
    console.log("Weekend! 😎");
}
// Output: Midweek! 📅

Same logic — but the switch version is far easier to scan and extend.

Syntax

switch (expression) {
  case value1:
    // code to run if expression === value1
    break;

  case value2:
    // code to run if expression === value2
    break;

  case value3:
    // code to run if expression === value3
    break;

  default:
    // code to run if no case matches
}

Key Parts Explained

switch (expression) — the value being tested; evaluated once
case value: — a candidate to match against; uses strict equality (===)
break — stops execution and exits the switch block
default — optional fallback that runs when no case matches (like else)

How JavaScript Evaluates a Switch

Understanding the internal flow helps you avoid bugs.

let fruit = "Mango";

switch (fruit) {
  case "Apple":
    console.log("🍎 Apple");    // ❌ "Mango" !== "Apple" — skip
    break;
  case "Banana":
    console.log("🍌 Banana");   // ❌ "Mango" !== "Banana" — skip
    break;
  case "Mango":
    console.log("🥭 Mango!");   // ✅ Match found — run this
    break;
  case "Grapes":
    console.log("🍇 Grapes");   // Never reached
    break;
  default:
    console.log("Unknown fruit"); // Never reached
}
// Output: 🥭 Mango!

JavaScript checks each case from top to bottom until it finds a strict match, then runs that block. Once break is hit, it exits the entire switch.

The `break` Keyword

break is what stops JavaScript from running into the next case. Without it, execution falls through to the next case automatically — whether or not it matches.

Without `break` (Fall-Through Bug ❌)

let num = 1;

switch (num) {
  case 1:
    console.log("One");
    // ❌ No break — falls into case 2
  case 2:
    console.log("Two");
    // ❌ No break — falls into case 3
  case 3:
    console.log("Three");
    break;
}
// Output:
// One
// Two
// Three   ← Unintended!

With `break` (Correct ✅)

let num = 1;

switch (num) {
  case 1:
    console.log("One");
    break;  // ✅ Exit here
  case 2:
    console.log("Two");
    break;
  case 3:
    console.log("Three");
    break;
}
// Output: One ✅

The `default` Case

default is the switch statement's fallback — it runs when none of the case values match. It's like the else at the end of an if...else if chain.

let color = "purple";

switch (color) {
  case "red":
    console.log("Red 🔴");
    break;
  case "green":
    console.log("Green 🟢");
    break;
  case "blue":
    console.log("Blue 🔵");
    break;
  default:
    console.log(`"${color}" is not a primary color. 🎨`);
}
// Output: "purple" is not a primary color. 🎨

`default` Doesn't Have to Be Last

While convention puts default at the bottom, it can go anywhere. However, if it's not last, it still needs a break to prevent fall-through.

let val = 99;

switch (val) {
  default:
    console.log("No match found");
    break;  // ✅ Still needs break if not last
  case 1:
    console.log("One");
    break;
  case 2:
    console.log("Two");
    break;
}
// Output: No match found

Best practice: Always put default last for readability — it signals "if nothing else matched, do this."

Intentional Fall-Through

Sometimes fall-through is exactly what you want — when multiple cases should run the same block of code. Just stack the cases together with no code or break between them.

Grouping Cases

let month = 6; // June

switch (month) {
  case 1:
  case 3:
  case 5:
  case 7:
  case 8:
  case 10:
  case 12:
    console.log("This month has 31 days. 📅");
    break;
  case 4:
  case 6:
  case 9:
  case 11:
    console.log("This month has 30 days. 📅");
    break;
  case 2:
    console.log("February has 28 or 29 days. 📅");
    break;
  default:
    console.log("Invalid month ❌");
}
// Output: This month has 30 days. 📅

let day = "Saturday";

switch (day) {
  case "Monday":
  case "Tuesday":
  case "Wednesday":
  case "Thursday":
  case "Friday":
    console.log("Weekday 💼 — time to work!");
    break;
  case "Saturday":
  case "Sunday":
    console.log("Weekend 🎉 — time to relax!");
    break;
  default:
    console.log("Invalid day ❌");
}
// Output: Weekend 🎉 — time to relax!

Switch Uses Strict Equality (`===`)

This is one of the most important things to know about switch. It always compares using === — meaning both value AND type must match.

let value = "1"; // String "1"

switch (value) {
  case 1:
    console.log("Number 1");    // ❌ "1" !== 1 (different types!)
    break;
  case "1":
    console.log("String '1'");  // ✅ "1" === "1" — match!
    break;
  default:
    console.log("No match");
}
// Output: String '1'

let flag = true;

switch (flag) {
  case 1:
    console.log("Number 1");   // ❌ true !== 1 (strict!)
    break;
  case true:
    console.log("Boolean true ✅"); // ✅ Match
    break;
}
// Output: Boolean true ✅

Real-World Examples

Example 1: Traffic Light System

let signal = "yellow";

switch (signal) {
  case "red":
    console.log("🔴 STOP — Do not proceed.");
    break;
  case "yellow":
    console.log("🟡 SLOW DOWN — Prepare to stop.");
    break;
  case "green":
    console.log("🟢 GO — Proceed safely.");
    break;
  default:
    console.log("⚠️ Unknown signal — proceed with caution.");
}
// Output: 🟡 SLOW DOWN — Prepare to stop.

Example 2: Calculator

let a = 20;
let b = 5;
let operator = "*";

switch (operator) {
  case "+":
    console.log(`${a} + ${b} = ${a + b}`);
    break;
  case "-":
    console.log(`${a} - ${b} = ${a - b}`);
    break;
  case "*":
    console.log(`${a} * ${b} = ${a * b}`);
    break;
  case "/":
    if (b === 0) {
      console.log("❌ Cannot divide by zero!");
    } else {
      console.log(`${a} / ${b} = ${a / b}`);
    }
    break;
  case "%":
    console.log(`${a} % ${b} = ${a % b}`);
    break;
  default:
    console.log(`❌ Unknown operator: "${operator}"`);
}
// Output: 20 * 5 = 100

Example 3: Language Greeter

let language = "Hindi";

switch (language) {
  case "English":
    console.log("Hello! 👋");
    break;
  case "Hindi":
    console.log("Namaste! 🙏");
    break;
  case "Spanish":
    console.log("¡Hola! 👋");
    break;
  case "French":
    console.log("Bonjour! 👋");
    break;
  case "Japanese":
    console.log("Konnichiwa! 🎌");
    break;
  default:
    console.log(`Greetings! (Language "${language}" not supported yet)`);
}
// Output: Namaste! 🙏

Example 4: Subscription Plan Features

let plan = "pro";

switch (plan) {
  case "enterprise":
    console.log("✅ Custom integrations");
    console.log("✅ Dedicated support");
    // fall-through intentionally
  case "pro":
    console.log("✅ Advanced analytics");
    console.log("✅ Priority email support");
    // fall-through intentionally
  case "basic":
    console.log("✅ 10GB storage");
    console.log("✅ Standard features");
    break;
  default:
    console.log("❌ No plan selected");
}
// Output:
// ✅ Advanced analytics
// ✅ Priority email support
// ✅ 10GB storage
// ✅ Standard features

Example 5: HTTP Status Code Handler

let statusCode = 404;

switch (statusCode) {
  case 200:
    console.log("200 ✅ OK — Request successful.");
    break;
  case 201:
    console.log("201 ✅ Created — Resource created.");
    break;
  case 301:
    console.log("301 🔀 Moved Permanently — Redirect.");
    break;
  case 400:
    console.log("400 ❌ Bad Request — Check your input.");
    break;
  case 401:
    console.log("401 🔒 Unauthorized — Please log in.");
    break;
  case 403:
    console.log("403 🚫 Forbidden — Access denied.");
    break;
  case 404:
    console.log("404 🔍 Not Found — Page doesn't exist.");
    break;
  case 500:
    console.log("500 💥 Internal Server Error — Try again later.");
    break;
  default:
    console.log(`${statusCode} ❓ Unknown status code.`);
}
// Output: 404 🔍 Not Found — Page doesn't exist.

Switch vs if...else if — When to Use Which

Both can solve the same problems, but each shines in different situations.

Feature	`switch`	`if...else if`
Best for	Matching exact values	Checking ranges or complex expressions
Comparison type	Strict equality `===` only	Any expression
Readability	Cleaner for many exact cases	Better for 2–3 conditions
Multiple cases, same code	Easy — just stack cases	Requires `
Range checks (`> < >=`)	❌ Not supported	✅ Native
Performance	Slightly faster for many cases	Fine for fewer cases

Use `switch` When:

// Matching exact string values ✅
switch (command) {
  case "start": ...
  case "stop": ...
  case "pause": ...
}

// Matching exact number values ✅
switch (errorCode) {
  case 404: ...
  case 500: ...
}

Use `if...else if` When:

// Range comparisons ✅
if (score >= 90) { ... }
else if (score >= 75) { ... }

// Complex conditions ✅
if (age > 18 && hasLicense) { ... }
else if (age > 16 && hasPerm) { ... }

Switch Inside a Function

A common and clean pattern — wrap your switch in a function and return from each case instead of using break.

function getDayType(day) {
  switch (day) {
    case "Monday":
    case "Tuesday":
    case "Wednesday":
    case "Thursday":
    case "Friday":
      return "Weekday 💼";
    case "Saturday":
    case "Sunday":
      return "Weekend 🎉";
    default:
      return "Invalid day ❌";
  }
}

console.log(getDayType("Monday"));    // Weekday 💼
console.log(getDayType("Saturday"));  // Weekend 🎉
console.log(getDayType("Holiday"));   // Invalid day ❌

Using return inside a function automatically exits both the switch and the function — so break is not needed. This is a very clean and popular pattern.

Common Mistakes

Mistake 1: Forgetting `break` (Unintended Fall-Through)

let grade = "B";

// ❌ Missing break — falls through all cases below B
switch (grade) {
  case "A":
    console.log("Excellent!");
  case "B":
    console.log("Good!");       // Runs ✅
  case "C":
    console.log("Average.");    // Also runs ❌
  default:
    console.log("Invalid.");    // Also runs ❌
}
// Output: Good!  Average.  Invalid.

// ✅ Add break to each case
switch (grade) {
  case "A":
    console.log("Excellent!");
    break;
  case "B":
    console.log("Good!");
    break;
  case "C":
    console.log("Average.");
    break;
  default:
    console.log("Invalid.");
}
// Output: Good! ✅

Mistake 2: Using Switch for Range Checks

let score = 85;

// ❌ Switch can't do range comparisons — this won't work as expected
switch (score) {
  case score >= 90:     // This checks (85 >= 90) = false, not 90
    console.log("A");
    break;
  case score >= 75:     // This checks (85 >= 75) = true... but matches true, not score
    console.log("B");
    break;
}
// Likely output: nothing (no match!)

// ✅ Use if...else if for ranges
if (score >= 90) {
  console.log("A");
} else if (score >= 75) {
  console.log("B");
}

Mistake 3: Type Mismatch (Forgetting Strict Equality)

let input = "2"; // String — from user input or URL param

// ❌ Type mismatch — "2" !== 2
switch (input) {
  case 2:
    console.log("Two");  // Never runs!
    break;
  default:
    console.log("No match");  // Runs instead
}

// ✅ Match the correct type
switch (input) {
  case "2":
    console.log("Two ✅");
    break;
  default:
    console.log("No match");
}
// Or convert first:
switch (Number(input)) {
  case 2:
    console.log("Two ✅");
    break;
}

Mistake 4: Missing `default` Case

let status = "pending"; // Unexpected value

// ❌ No default — silent failure, nothing happens
switch (status) {
  case "active":
    console.log("Active ✅");
    break;
  case "inactive":
    console.log("Inactive 💤");
    break;
}
// Output: (nothing — hard to debug!)

// ✅ Always include a default
switch (status) {
  case "active":
    console.log("Active ✅");
    break;
  case "inactive":
    console.log("Inactive 💤");
    break;
  default:
    console.log(`Unknown status: "${status}" ⚠️`);
}
// Output: Unknown status: "pending" ⚠️

Mistake 5: Declaring Variables Inside Cases Without Blocks

// ❌ Variable declarations inside switch cases can leak across cases
switch (action) {
  case "greet":
    let message = "Hello!";  // Can cause SyntaxError or unexpected behavior
    console.log(message);
    break;
  case "bye":
    let message = "Goodbye!"; // ❌ SyntaxError: 'message' already declared
    console.log(message);
    break;
}

// ✅ Wrap each case in its own block using {}
switch (action) {
  case "greet": {
    let message = "Hello!";  // Scoped to this block only
    console.log(message);
    break;
  }
  case "bye": {
    let message = "Goodbye!"; // ✅ Different scope — no conflict
    console.log(message);
    break;
  }
}

Practical Exercise: Build a Command Line Menu

Create a file called switch-demo.js:

// 🎯 Exercise: Switch Case Practice

// 1. Simple Calculator
function calculate(a, operator, b) {
  console.log(`\n=== ${a} ${operator} ${b} ===`);

  switch (operator) {
    case "+":
      console.log(`Result: ${a + b}`);
      break;
    case "-":
      console.log(`Result: ${a - b}`);
      break;
    case "*":
      console.log(`Result: ${a * b}`);
      break;
    case "/":
      b === 0
        ? console.log("Result: ❌ Cannot divide by zero")
        : console.log(`Result: ${a / b}`);
      break;
    case "%":
      console.log(`Result: ${a % b}`);
      break;
    default:
      console.log(`❌ Unknown operator: "${operator}"`);
  }
}

calculate(10, "+", 5);
calculate(10, "-", 3);
calculate(6,  "*", 7);
calculate(20, "/", 4);
calculate(10, "/", 0);
calculate(10, "^", 2);


// 2. Season Finder
function getSeason(month) {
  console.log(`\n=== Month: ${month} ===`);

  switch (month) {
    case 12:
    case 1:
    case 2:
      console.log("❄️ Winter");
      break;
    case 3:
    case 4:
    case 5:
      console.log("🌸 Spring");
      break;
    case 6:
    case 7:
    case 8:
      console.log("☀️ Summer");
      break;
    case 9:
    case 10:
    case 11:
      console.log("🍂 Autumn");
      break;
    default:
      console.log("❌ Invalid month. Enter 1–12.");
  }
}

getSeason(1);
getSeason(5);
getSeason(7);
getSeason(10);
getSeason(13);


// 3. Notification Handler
function handleNotification(type, sender) {
  let message;

  switch (type) {
    case "message":
      message = `💬 New message from ${sender}`;
      break;
    case "like":
      message = `❤️ ${sender} liked your post`;
      break;
    case "follow":
      message = `👤 ${sender} started following you`;
      break;
    case "comment":
      message = `💭 ${sender} commented on your post`;
      break;
    case "share":
      message = `🔁 ${sender} shared your post`;
      break;
    default:
      message = `🔔 New notification from ${sender}`;
  }

  console.log(`\nNotification: ${message}`);
}

handleNotification("message", "Priya");
handleNotification("like",    "Rahul");
handleNotification("follow",  "Sara");
handleNotification("mention", "Arjun");

Run it:

node switch-demo.js

Expected Output:

=== 10 + 5 ===
Result: 15

=== Month: 7 ===
☀️ Summer

Notification: 💬 New message from Priya
Notification: ❤️ Rahul liked your post
Notification: 🔔 New notification from Arjun

Key Takeaways

Congratulations! 🎉 You've fully mastered the switch case statement in JavaScript.

✅ switch statement evaluates one expression and jumps to the matching case.

✅ Strict equality (===):

Switch always uses === — type AND value must match
"1" and 1 are different cases

✅ break keyword:

Exits the switch block after a case runs
Without break, execution falls through to the next case

✅ default case:

Optional but always recommended
Runs when no case matches — your safety net

✅ Intentional fall-through:

Stack multiple cases with no code between them
All grouped cases run the same block

✅ return in functions:

Inside a function, return replaces break — cleaner pattern

✅ Switch vs if...else if:

Use switch for exact value matching
Use if...else if for ranges and complex conditions

✅ Variable declarations in cases:

Wrap each case in {} blocks when declaring let or const

Best Practices

✅ Always add break at the end of every case (unless intentional fall-through)
✅ Always include a default case — never let a switch fail silently
✅ Use {} blocks inside cases when declaring let or const
✅ Place default last for readability and convention
✅ Use return instead of break when switch is inside a function
✅ Never use switch for range comparisons — use if...else if instead
✅ Watch out for type mismatches — convert input types before switching
✅ Add a comment when using intentional fall-through so it's clear to other developers

What's Next?

Excellent work! 🎉 You've now completed the entire Conditional Statements series:

✅ Conditional Statements (overview)
✅ If Else Ladder
✅ Ternary Operator
✅ Switch Case

Up next, we're moving into Loops in JavaScript — where you'll learn how to run code repeatedly without writing it over and over. Get ready for for, while, and for...of loops!

Keep up the great momentum! 💪

Operators and Expressions

Loops in JS