Loading...

JavaScript Switch

if / else shines when the question is yes/no or a range. Sometimes the question is different: which of several fixed values is this? A day code 1…7, a status string "ok" / "warn" / "err", a menu key. For that shape, switch is the clean tool. You already know branching; here you match one value to labeled cases.

What does switch do?

switch looks at one expression in parentheses. It compares that value to each case label. When a label matches, JavaScript runs the statements under that case. break ends the switch so the next cases are skipped. default is the fallback when no case matched.

The pieces at a glance

📊 Everyday switch pieces

Keyword Everyday reading Typical use
switch look at this value… open the choice
case if it equals this label… one fixed option
break stop here; leave the switch end after a match
default if nothing matched… fallback path

Matching uses a strict equality style check (same idea as ===). A number case will not match a string of digits. Keep the value and the labels in the same “shape.”

Simple switch

javascript 
let day = 3;
switch (day) {
case 1:
console.log("Mon");
break;
case 2:
console.log("Tue");
break;
case 3:
console.log("Wed");
break;
default:
console.log("other");
}

One value, several labeled paths

Here day is 3, so the case 3 path runs and the Console prints Wed. Cases 1 and 2 were checked and skipped. After break, the switch is finished — default does not run.

Without break, JavaScript would keep running into the next case bodies. That is called fall-through. Beginners almost always want a break after each case they finish.

Why break matters

javascript 
let day = 2;
switch (day) {
case 1:
console.log("Mon");
case 2:
console.log("Tue");
case 3:
console.log("Wed");
break;
default:
console.log("other");
}

Missing break runs later cases too

day is 2. The match starts at case 2, prints Tue, then continues into case 3 and prints Wed before break. You wanted one label; you got two. Put break under each finished case unless you deliberately share code.

default when nothing matches

javascript 
let day = 9;
switch (day) {
case 1:
console.log("Mon");
break;
case 2:
console.log("Tue");
break;
default:
console.log("other");
}

default covers “none of these”

day is 9. No case matches, so default runs and you see other. Use default when every unexpected value still needs a safe message. You can omit it only when silence is acceptable.

String cases

javascript 
let status = "warn";
switch (status) {
case "ok":
console.log("green");
break;
case "warn":
console.log("yellow");
break;
case "err":
console.log("red");
break;
default:
console.log("unknown");
}

Cases can be strings too

status is "warn", so you see yellow. String cases are common for short codes from a form or API. Ranges like “score from 60 to 90” still belong in if / else if — switch wants discrete labels.

Store a chosen label

javascript 
let day = 1;
let label;
switch (day) {
case 1:
label = "Mon";
break;
case 2:
label = "Tue";
break;
default:
label = "other";
}
console.log(label);

Name the result of the match

Set label inside each case (and in default), then use it once afterward. Here label becomes "Mon". Same pattern you used with if / else — choose first, use later.

Show the chosen path on the page

Pick a short message with switch, then write it into the page.

Page choice with switch

html 
<!DOCTYPE html>
<html>
<head>
<title>Switch — page choice</title>
</head>
<body>
<p id="out">…</p>
<script>
let day = 3;
let msg;
switch (day) {
case 1:
msg = "Mon";
break;
case 2:
msg = "Tue";
break;
case 3:
msg = "Wed";
break;
default:
msg = "other";
}
let box = document.getElementById("out");
box.textContent = "day=" + msg;
</script>
</body>
</html>

day is 3, so the page shows day=Wed. Change day to 9, refresh, and you should see day=other. The next lesson (for) repeats work many times; switch stays the tool for “which fixed label?”

Try it yourself

  1. Build a switch on let day = 1 that logs "Mon" for case 1.
  2. Add cases for 2 and 3 with break after each.
  3. Set day to 9 and confirm default logs "other".
  4. Switch on a string status with "ok", "warn", "err".
  5. Temporarily remove one break and watch fall-through in the Console.
  6. In the HTML demo, change only day, refresh, and read the new day= text.

Common mistakes

  • Forgetting break after a case (later cases run too)
  • Using switch for open ranges (score >= 60) — prefer if / else if
  • Mixing types so a number never matches a string case
  • Omitting default when unknown values still need a message
  • Replacing every if with switch when the check is not a fixed label list

Summary

  • switch matches one value to several case labels
  • break stops the switch after a match
  • default runs when nothing matched
  • Best for discrete values; ranges stay with if / else if
  • Store a label when you need the result later; show it on the page when useful
  • Next: for loop — repeating work a set number of times

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓
8
Questions
🎯
70%
To Pass
♾️
∞
Time
🔄
∞
Attempts

📝 Instructions

  • Read each question carefully
  • Select the best answer for each question
  • You can retake the quiz as many times as you want
  • Your progress will be shown at the top
Topic 22 of 23
Javascript Tutorial