JavaScript switch Statement

A JavaScript switch statement compares one expression against multiple case values and runs the matching branch. It is useful when one value can match one of several known alternatives.

Basic syntax:

switch (expression) {
  case value1:
    // statements
    break;
  case value2:
    // statements
    break;
  default:
    // fallback
}

break normally prevents execution from falling through into the next case. Intentional fall-through is also possible and can be useful for grouping cases.

Basic JavaScript switch Example Top ↑

const value = 2;

switch (value) {
  case 1:
    console.log("value = 1");
    break;
  case 2:
    console.log("value = 2");
    break;
  case 3:
    console.log("value = 3");
    break;
  default:
    console.log("No listed value matched");
}

The matching case is 2, so the output is value = 2.

How switch Case Matching Works Top ↑

The switch expression is evaluated once. Case matching uses strict comparison semantics, so numeric 2 does not match string "2".

const value = 2;

switch (value) {
  case "2":
    console.log("string two");
    break;
  case 2:
    console.log("number two");
    break;
}

This avoids the implicit coercion associated with loose equality. See comparison operators for equality rules.

Why break Is Common in switch Top ↑

After a case matches, JavaScript continues executing statements from that point until it encounters break, return, throw, or the end of the switch. Therefore most independent cases end with break.

const option = 5;
let text = "";

switch (option) {
  case 5:
    text += " matched 5";
  case 8:
    text += " then ran case 8";
  case 10:
    text += " then ran case 10";
    break;
  default:
    text += " no match";
}

console.log(text);

This preserves the original “without break” lesson: after case 5 matches, cases 8 and 10 also execute because there is no break between them.

Intentional Fall-Through Top ↑

Fall-through is valid when several cases deliberately share behavior. Comment unusual fall-through so future maintainers know it is intentional.

const month = "January";
let season;

switch (month) {
  case "December":
  case "January":
  case "February":
    season = "winter";
    break;
  default:
    season = "other";
}

console.log(season);

Grouping Multiple Cases Like an OR Condition Top ↑

The original page grouped grades A, B, and C before one shared assignment. That remains a useful switch pattern.

const grade = "C";
let result;

switch (grade) {
  case "A":
  case "B":
  case "C":
    result = "Pass";
    break;
  case "D":
    result = "Fail";
    break;
  default:
    result = "No matching grade";
}

console.log(result);

Using the default Branch Top ↑

default runs when no case matches. It is optional and can appear in another position, but putting it last is usually easiest to read.

const role = "guest";

switch (role) {
  case "admin":
    console.log("Full access");
    break;
  case "editor":
    console.log("Edit access");
    break;
  default:
    console.log("Read-only access");
}

Using String Values in switch Top ↑

switch works with strings as well as numbers and other values.

const text = "Hello";

switch (text) {
  case "Hello 1":
    console.log("Hello 1");
    break;
  case "Hello 2":
    console.log("Hello 2");
    break;
  case "Hello":
    console.log("Correct text: Hello");
    break;
  default:
    console.log("Default selection");
}

Using switch with Date.getDay() Top ↑

The original page used Date.getDay() to choose a weekday. getDay() returns an integer from 0 (Sunday) through 6 (Saturday).

const today = new Date().getDay();
let dayName;

switch (today) {
  case 0: dayName = "Sunday"; break;
  case 1: dayName = "Monday"; break;
  case 2: dayName = "Tuesday"; break;
  case 3: dayName = "Wednesday"; break;
  case 4: dayName = "Thursday"; break;
  case 5: dayName = "Friday"; break;
  case 6: dayName = "Saturday"; break;
  default: dayName = "Unknown";
}

console.log(dayName);

See getDay() for date-specific details.

let and const Declarations Inside case Clauses Top ↑

All case clauses share the switch block. If different cases declare the same let or const name, wrap each case body in its own block.

const action = "save";

switch (action) {
  case "save": {
    const message = "Saved";
    console.log(message);
    break;
  }
  case "delete": {
    const message = "Deleted";
    console.log(message);
    break;
  }
}

switch Cases Can Use Expressions Top ↑

A case label can be an expression, but the evaluated result still has to match the switch value. Keep case expressions simple so the branch table remains easy to scan.

const code = 20;
const base = 10;

switch (code) {
  case base:
    console.log("10");
    break;
  case base * 2:
    console.log("20");
    break;
}

The switch(true) Pattern Top ↑

Some code uses switch (true) so each case can be a Boolean condition. It works, but an if...else if chain is often more conventional when testing ranges.

const score = 82;
let grade;

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

console.log(grade);

When to Use switch Instead of if...else Top ↑

Use switch when one expression is being matched against several discrete values and the case-list format improves readability. Use if...else when conditions involve ranges, unrelated expressions, or complex Boolean logic.

Common switch Mistakes Top ↑

  • Forgetting break and causing accidental fall-through.
  • Expecting number 2 to match string "2".
  • Repeating the same lexical declaration across case clauses without block braces.
  • Using a large switch when a lookup object, map, or function dispatch table would be simpler.
  • Using switch(true) for ordinary range checks when if...else is clearer.

Continue with if...else, for loops, loop and condition basics, and getDay().

if...else For Loop




Subscribe to our YouTube Channel here



plus2net.com










✖
We use cookies to improve your browsing experience. . Learn more
HTML MySQL PHP JavaScript ASP Photoshop Articles Contact us
© 2000-2026 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer