JavaScript Switch Statement

const statusCode = 200;
let statusMessage = "";

switch (statusCode) {
  case 200:
    statusMessage = "OK";
    break;
  case 404:
    statusMessage = "Not Found";
    break;
  default:
    statusMessage = "Unknown Status";
}

console.log(statusMessage); // Outputs: "OK"

​

Core Mechanics

• Single Evaluation: The expression provided to the switch statement is evaluated exactly once before any comparison begins.
• Strict Equality (===): JavaScript compares the evaluated expression against each case value using strict equality. Both the value and the data type must match. No implicit type coercion occurs.
• The break Directive: When the JavaScript engine encounters a break statement, it terminates the switch block and transfers control to the statement immediately following the switch.
• The default Clause: This is an optional fallback clause. If no case matches the evaluated expression, the engine executes the statements within the default clause. While conventionally placed at the end of the switch block, it can syntactically appear anywhere.

​

Fall-Through Behavior

const tier = "Silver";
let accessLevel = 0;

switch (tier) {
  case "Gold":
    accessLevel += 10;
    // Missing break; execution falls through
  case "Silver":
    accessLevel += 5;
    // Missing break; execution falls through
  case "Bronze":
    accessLevel += 1;
    break;
  default:
    accessLevel = 0;
}

console.log(accessLevel); // Outputs: 6

​

Lexical Scoping and the Temporal Dead Zone (TDZ)

1. Redeclaration Errors: Declaring block-scoped variables with the same identifier in multiple case clauses without explicit block statements will result in a SyntaxError.
2. The Temporal Dead Zone (TDZ): Because the scope is shared, a let or const declaration in one case is hoisted to the top of the switch block. If the evaluated expression matches a different case, execution bypasses the variable’s initialization. The variable exists in scope but remains uninitialized in the TDZ. Attempting to access it will throw a ReferenceError.

const action = "READ";

switch (action) {
  case "CREATE":
    let payload = "Data"; // Hoisted to the switch block scope
    break;
  case "READ":
    // 'payload' is in scope but uninitialized (in the TDZ)
    // console.log(payload); // Uncommenting this throws ReferenceError
    break;
}

const mode = "DARK";

switch (mode) {
  case "LIGHT": {
    let themeColor = "#FFFFFF";
    console.log(themeColor);
    break;
  }
  case "DARK": {
    let themeColor = "#000000"; // Valid: isolated lexical scope
    console.log(themeColor); // Outputs: "#000000"
    break;
  }
}