JavaScript Switch

An if...else if chain works fine for three or four options, but what about seven — one for each day of the week? Or twelve, one for each month? The chain gets long and hard to read. That is when you use a switch: you give it one value, and it jumps straight to the matching case.

Diagram — see how it fits together

Think of a railway station enquiry counter. You say "Platform 3", and the clerk does not check platform 1, then platform 2, then platform 3 — he jumps straight to the right board. A switch works the same way: it looks at one value and goes directly to the matching case. No repeated questions, no long chain.

Remember it like this: switch picks, case matches, break stops, default catches the rest.

switch and case — jumping to the right answer

A switch statement starts with the word switch, then the value in round brackets, then a block with one case for each possible value. Each case has a colon, then the code to run.

let day = 3;
switch (day) {
  case 1:
    console.log("Monday");
    break;
  case 2:
    console.log("Tuesday");
    break;
  case 3:
    console.log("Wednesday");
    break;
  default:
    console.log("Another day");
}
// "Wednesday"

The computer compares day with each case, top to bottom, and runs the first one that matches. It compares with === — strict equality, value and type — so case 3 does not match the string "3".

break — why it matters

Here is the strange part: without a break, the computer does not stop after the matching case. It keeps running into the next case, and the next, until it hits a break or the end of the switch. This is called "fall-through", and it is the most common switch bug in the world.

let day = 2;
switch (day) {
  case 2:
    console.log("Tuesday");
  case 3:
    console.log("Wednesday");
  case 4:
    console.log("Thursday");
}
// Tuesday, Wednesday, Thursday — all three print!

Because there was no break after "Tuesday", the computer fell through and printed Wednesday and Thursday too. In almost every switch you write, every case ends with a break. The only time you skip it on purpose is when two cases should do the same thing.

default — the safety net

default is the case that runs when nothing matches. It is like the else of an if-chain: it catches everything the cases missed. It is optional, but writing one is good practice — it means your program always has an answer, even for a value you did not expect.

let grade = "Z";
switch (grade) {
  case "A":
    console.log("Excellent");
    break;
  case "B":
    console.log("Good");
    break;
  default:
    console.log("Unknown grade");
}
// "Unknown grade"

default does not need a break because it is the last block in the switch — there is nothing after it to fall through into. But some programmers add one anyway, in case a new case is added below it later.

Common mistakes

• Forgetting break after a case — the code falls through and runs the next cases too, printing three answers instead of one.
• Using a switch for ranges — case marks >= 90 does not work. Switch matches exact values only; ranges need if...else if.
• Mixing types — switch ("3") will not match case 3, because the comparison is strict. The string "3" and the number 3 are different values.
• Forgetting default — when no case matches, the switch silently does nothing. A default makes the program's answer clear.
• Putting code between the cases without a case label — the switch ignores it. Every line must belong to a case or to default.

Remember

• Switch picks, case matches, break stops, default catches the rest.
• Without break, the code falls through into the next case — almost always a bug.
• switch matches exact values only, with strict === comparison. Ranges need if...else if.
• Use switch for one value with many exact options — days, months, grades, menu choices.

Example explained

• let day = 3; — the day number, where 1 is Monday and 7 is Sunday.
• switch (day) — the computer looks at the value of day and jumps to the matching case.
• case 3: ... break; — day is 3, so this case runs, prints "Wednesday", and the break stops the switch right there.
• default: — if day were 8 or 0 or anything else, this block would run and print "Invalid day number".
• document.getElementById("result").innerHTML = ... — writes the weekday name into the page when the button is clicked.