Platform under construction

Control Flow

Intermediate

switch

switch compares one expression against multiple cases. It is useful when one value can have several known states.

const view = "settings";

switch (view) {
  case "overview":
    console.log("Show overview");
    break;
  case "settings":
    console.log("Show settings");
    break;
  default:
    console.log("Show fallback");
}

Control Flow

switch is best for one value with clear named cases.

A switch statement evaluates one expression and compares it to case labels with strict comparison. When a case matches, JavaScript starts running from that point.

Most switch branches should end with break, return or throw. Without that, execution continues into the next case. That behavior is called fallthrough.

Use switch when it makes the value-to-behavior mapping easier to scan than a long else if chain. If every branch has a different condition shape, if/else is usually clearer.

switch expression

The value being compared, such as status, view or command.

case

A possible matching value. Cases use strict comparison.

break

Stops execution from falling into the next case.

default

Fallback branch when no case matches.

Examples

Control flow should make the program path easy to follow.

Status routing with explicit breaks

const status = "published";

switch (status) {
  case "draft":
    label = "Continue editing";
    break;
  case "published":
    label = "Visible";
    break;
  default:
    label = "Unknown status";
}

Missing break creates accidental fallthrough

switch (status) {
  case "draft":
    label = "Continue editing";
  case "published":
    label = "Visible";
}

// A draft status continues into the published case.

Rules that matter

Make branches, loops and exits deliberate.

Control flow decides which path code takes. Keep that path visible: name conditions, protect loop boundaries, avoid accidental fallthrough and use early exits only when they make the main path clearer.

Use switch for one value

The pattern is strongest when every case compares the same expression.

End cases deliberately

Use break, return or throw unless fallthrough is intentional and commented.

Include default

A fallback makes unexpected values visible.

Keep cases short

Large branches belong in functions.

Prefer lookup objects for pure mapping

If every case only returns a value, an object or Map can be cleaner.

Do not switch on vague data

Normalize external strings before routing on them.

Production thinking

Reliable branching is reliable behavior.

Why does this matter?

Many interfaces have states: loading, empty, ready, error. switch can make those state decisions easy to scan.

Accessibility

A switch often chooses status text. Always make fallback states understandable for users and assistive technology.

Production note

Production switches should handle unknown values. Silent missing cases become hard-to-debug UI states.

SEO note

When switch controls rendered content, a missing default can leave important sections empty.

Live code lab

Change the HTML, CSS or JavaScript and run the result.

The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.

Mini assignment

Try this now.

Add a new option called scheduled and handle it in the switch.
Remove one break and observe the wrong message.
Rewrite the switch as an object lookup for labels.

Practice assignment

Do this before moving to the next topic.

Write a switch with three cases and one default.
Explain why break matters.
Choose one situation where switch is clearer than if/else.

HTML + JavaScript CSS

Live preview

Self-check

Before you continue, prove that you understand switch.