Before you begin
Why this matters
A switch looks like a list of separate choices, but in TypeScript the cases are joined: one missing break runs a second case’s code. Knowing the rule lets you predict exactly which lines run, and recognize this bug at once.
What this helps you reason about
- Predict which lines of a switch run for a given value.
- Spot a missing break, and tell it from an empty case that shares code on purpose.
- Decide between a switch and an else-if chain, and say what happens to a value that no case names.
A library sorts returned books by the section number on their label: one cart for children’s books, one for fiction, and the front desk for everything else. A switch statement writes that rule directly. This lesson shows which case a switch runs, what runs after it, and what happens when no case matches.
Already know this? The short version
- switch (x) compares x with each case value using === and jumps to the first match; the code under default runs when none matches.
- A case with code and no break falls through into the next case’s code without testing it; an empty case written above another shares its code on purpose.
- A case tests one exact value; for ranges or combined tests use an else-if chain, where the first true test wins.
- With no match and no default, nothing runs and no error is reported; noFallthroughCasesInSwitch and a never check are compiler aids, not defaults.
Words in this lesson (5)
- switch statement
- A statement that compares one value with the values written after case and runs the code of the case that matches. The code under default runs when no case matches.
- fall-through
- Running on from the code of one case into the code of the next case, without testing the next case’s value. It happens when a case does not end with break.
- break
- A statement that ends the innermost switch or loop it is in at once; the program continues after it.
- default
- The part of a switch that runs when no case matches. It is optional; without it, a value that matches no case runs nothing.
- else-if chain
- A sequence of if … else if … else. The tests are checked from top to bottom; the first one that is true runs its block, and the rest are skipped. The final else runs when no test is true.
Examples are focused snippets; imports, enclosing functions, or classes may be omitted. C examples use C11; Haskell examples use Haskell 2010. Expand the notes for language-specific depth.
01 / Choosing
How does a switch choose one case?
Conditions and truthiness chose a branch with an else-if chain. When every test compares the same value with a fixed value, a switch statement says it more directly. switch (section) names the value. Each case gives one value to compare it with, using ===. The code under the first case that matches runs. break ends the switch, and the program continues after it. The code under default runs when no case matches.
Use a switch when one value is compared with several fixed values. Use an else-if chain when the tests are ranges, such as daysLate >= 28, or when they test different things.
let section = 2;
switch (section) {
case 1:
console.log("children's cart");
break;
case 2:
console.log("fiction cart"); // runs
break;
default:
console.log("front desk");
}A switch runs the code of the case that matches, or the code under default when none matches.
Experiment
Follow a switch to the matching case
The switch compares section with the case values. The code under the matching case runs, break ends the switch, and the program continues after it. When no case matches, the code under default runs.
Why it matters To know which code of a switch runs, find the case whose value equals the value being switched on; if there is none, look for default.
Predict which lines run and what is printed. Then change let section = 2; to let section = 7; and predict again.
let section = 2;
switch (section) {
case 1:
console.log("children's cart");
break;
case 2:
console.log("fiction cart");
break;
default:
console.log("front desk");
}
console.log("next book");
What to look for
At the switch line, section shows 2. The next stop is the "fiction cart" line: the stepper does not stop on the case lines, and never on the "children's cart" line. This debugger sometimes stops on the same line twice; that is normal. Then it stops on break and on the "next book" line. The run prints fiction cart, then next book. After the edit, the stop after the switch line is the "front desk" line, and the run prints front desk, then next book.
Expected output
fiction cart
next book02 / After the case
What runs after the chosen case?
A case does not end by itself. Without break, the program runs on into the code of the next case, without testing that case’s value. This is called fall-through. It is the classic switch bug: one missing break, and a book is sent to two carts.
Fall-through is also how several values share one piece of code. A case with no code of its own, written just above another case, falls into it on purpose. Below, picture books (section 3) and children’s books (section 1) go to the same cart.
switch (section) {
case 1:
case 3: // 1 and 3 share this code
console.log("children's cart");
break;
case 2:
console.log("fiction cart");
// no break: section 2 also runs default
default:
console.log("front desk");
}End every case that has code with break. A case with no code shares the code of the case below it.
Coming from Python: match runs one case only. A TypeScript switch runs on into the next case unless the case ends with break.
Coming from Go: A Go case stops at the next case. In TypeScript, the code of the next case runs too, unless you write break.
Precisely: return, and the compiler option
A return inside a case also ends the switch, because it ends the whole function. The compiler option noFallthroughCasesInSwitch makes TypeScript report a case that has code and falls into the next one. It is off unless a project turns it on, and the stepper does not turn it on.
Experiment
Leave out one break
A case has no end of its own. After the code under case 1, nothing stops the program, so it runs on into the code under case 2 without testing 2. Only the break under case 2 ends the switch.
Why it matters A case with code and no break runs into the next case. End every such case with break.
Predict what a children's book (section 1) prints. Then add the line break; after the "children's cart" line and predict again.
let section = 1;
switch (section) {
case 1:
console.log("children's cart");
case 2:
console.log("fiction cart");
break;
default:
console.log("front desk");
}
console.log("next book");
What to look for
At the switch line, section shows 1. The next stop is the "children's cart" line, then the "fiction cart" line, although section is not 2; then break and the "next book" line. The run prints children's cart, fiction cart, then next book. After the edit, the stop after the "children's cart" line is the new break, then the "next book" line, and the run prints children's cart, then next book.
Expected output
children's cart
fiction cart
next book03 / Patterns
What can a case test besides one exact value?
A case value is compared with ===, so a case tests one exact value, such as 2 or "map". It cannot test a range, such as 1 to 7 days late, or add a second condition. For those, use an else-if chain. As in any else-if chain, the first true test wins, so put a test for one exact value above a test that also covers it.
let daysLate = 0;
let note = "";
if (daysLate === 0) {
note = "on time";
} else if (daysLate >= 28) {
note = "lost: bill the card";
} else if (daysLate <= 7) {
note = "small fee"; // 1 to 7
} else {
note = "fee and letter";
}A case tests one exact value with ===. For ranges and combined tests, use an else-if chain.
Precisely: switch (true)
switch (true) { case daysLate >= 28: … } compiles and works: each case expression is computed and compared with true. Readers rarely expect it, and an else-if chain says the same thing more plainly.
04 / No match
What happens when no case matches?
When no case matches and there is no default, nothing in the switch runs. The program continues after it, and no error is reported. A value you forgot is simply ignored.
A default catches every value that no case names. Write one when such values can arrive, and decide what each of them should get.
TypeScript can also check that a switch covers every value of a type that lists them all, such as "book" | "map". A later topic, TypeScript narrowing, shows this check with the type never.
let section = 9;
switch (section) {
case 1:
console.log("children's cart");
break;
case 2:
console.log("fiction cart");
break;
}
console.log("next book"); // the only line printedWithout a default, a value that matches no case runs nothing, and no error is reported.
05 / Try it
Can you explain a fresh example?
Find the case that matches, then follow the code down until a break. The next lesson, Function calls, shows how a program runs code that is written somewhere else.
let room = 4;
let stamps = "";
switch (room) {
case 1:
stamps += "A";
case 4:
stamps += "B";
case 5:
stamps += "C";
break;
default:
stamps += "D";
}
console.log(stamps);
A museum passport collects stamps. What is printed for room 4?
Reveal the reasoning
BC. room is 4, so the code under case 4 runs and adds B. That case has no break, so the program runs on into the code under case 5, without testing 5, and adds C. The break there ends the switch. Case 1 and default never run.
Practice tickets
- MATCH-101 · City maps never reach their drawer → Free
- MATCH-102 · The weekend star party never appears on the screen → Sign in · Pro
- MATCH-103 · Photograph requests promise the wrong wait → Sign in · Pro