JavaScript — Switch

One value, many matches

Comparing the same variable against a pile of constants? switch reads better than an else-if tower:

const fruit = "mango";

switch (fruit) {
    case "apple":
        console.log("Keeps the doctor away");
        break;
    case "banana":
        console.log("Potassium delivery");
        break;
    case "mango":
        console.log("Tropical royalty");
        break;
    default:
        console.log("Unknown fruit");
}

What happens

JavaScript compares fruit to each case with strict ===, jumps to the match, runs until break.

break — the exit door

Without break, execution falls through into the next case:

switch (2) {
    case 1:  console.log("one");
    case 2:  console.log("two");     // runs
    case 3:  console.log("three");   // also runs! no break above
             break;
}
// prints "two" AND "three"

Intentional fall-through groups cases:

switch (day) {
    case "Sat":
    case "Sun":
        console.log("Weekend!");
        break;                        // both days share one body
    default:
        console.log("Weekday");
}

Forgetting one break among many is the classic switch bug — some teams lint against fall-through entirely.

default — the catch-all

Runs when nothing matched. Convention places it last, but anywhere works (with breaks). Always include one unless every possible value is covered.

Strict matching bites

const input = prompt("Number?");   // always returns a STRING

switch (input) {
    case 1: console.log("matched!"); break;   // never fires for "1"
}

Fix by converting first:

switch (Number(input)) { … }

Switching on true — a pattern worth knowing

Ranges don't fit plain switch, but a clever form handles them:

switch (true) {
    case score >= 90: grade = "A"; break;
    case score >= 80: grade = "B"; break;
    default:          grade = "F";
}

Neat trick — though most teams prefer if/else-if for ranges.

Object lookup — often better than both

const actions = {
    card: chargeCard,
    paypal: redirectPaypal,
};
(actions[method] ?? showUnsupported)();

Data-driven mapping scales better than either branching style when cases map to values/functions.

switch vs else-if

Use switch when	Use if/else when
ONE value vs many constants	Multiple different conditions
Cases are discrete values	Ranges / complex logic
Flat structure aids readability	Conditions vary in shape

Mini Practice

1. Build a weekday translator: number → name, with default
2. Group two cases via intentional fall-through
3. Trigger accidental fall-through; then fix with break
4. Reproduce the string-vs-number prompt bug and fix it
5. Convert a five-branch else-if on a single value to switch — compare readability

Next: loops →