> ## Documentation Index
> Fetch the complete documentation index at: https://docs.syntblaze.com/llms.txt
> Use this file to discover all available pages before exploring further.
# JavaScript Switch Statement
The `switch` statement is a control flow construct that evaluates a given expression once and executes a specific block of code based on strict equality matching (`===`) against a series of defined `case` clauses.
```javascript theme={"dark"}
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
If a `case` is matched but lacks a `break` statement, the engine will continue executing the statements of subsequent `case` clauses sequentially, regardless of whether those subsequent `case` values match the expression. This behavior is known as "fall-through."
```javascript theme={"dark"}
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)
A `switch` statement establishes a single lexical scope for its entire body, rather than creating individual scopes for each `case` clause. This shared scope introduces two critical behaviors regarding block-scoped variables (`let` and `const`):
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`.
```javascript theme={"dark"}
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;
}
```
To isolate scope within individual `case` clauses and prevent both redeclaration errors and TDZ access issues, wrap the `case` body in a block statement `{}`.
```javascript theme={"dark"}
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;
}
}
```
Tired of Poor JavaScript Skills? Fix That With Deep Grasping!
Learn More
