> ## 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 let Declaration

The `let` statement declares a block-scoped local variable, optionally initializing it to a value. It binds the variable to the lexical environment of the nearest enclosing block or statement, rather than the execution context of the enclosing function or global scope. Lexical declarations cannot be scoped to an expression. Consequently, using `let` in a single-statement context without a block (e.g., `if (true) let x = 1;`) results in a `SyntaxError`.

## Syntax

```text theme={"dark"}
let name1;
let name1 = value1;
let name1 = value1, name2 = value2;
```

## Scope Mechanics

Variables declared with `let` are scoped strictly to the block (`{ ... }`) in which they are defined, including any nested sub-blocks. This contrasts with `var`, which is scoped to the nearest enclosing function or global execution context.

```javascript theme={"dark"}
{
  let blockScopedVar = 10;
}
// console.log(blockScopedVar); // ReferenceError: blockScopedVar is not defined
```

## Loop Iteration Bindings

When declared within the head of a `for`, `for...in`, or `for...of` loop, `let` creates a new lexical environment for *each iteration* of the loop. A fresh binding is instantiated per loop execution, rather than a single binding for the entire loop structure. This distinct per-iteration binding ensures that closures created within the loop body capture the specific value of that exact iteration.

```javascript theme={"dark"}
for (let i = 0; i < 3; i++) {
  // A new lexical binding for 'i' is created for iterations 0, 1, and 2
  setTimeout(() => console.log(i), 10);
}
// Output: 0, 1, 2
```

## Hoisting and the Temporal Dead Zone (TDZ)

During the compilation phase, `let` declarations are hoisted to the top of their enclosing block. However, unlike `var`, they are not initialized with `undefined`. Instead, the variable enters a state known as the Temporal Dead Zone (TDZ). The TDZ lasts from the beginning of the block's execution until the JavaScript engine evaluates the `let` declaration. Accessing the identifier within the TDZ throws a `ReferenceError`.

```javascript theme={"dark"}
{
  // TDZ starts for 'x'
  // console.log(x); // ReferenceError: Cannot access 'x' before initialization
  let x = 5;      // TDZ ends for 'x', initialization occurs
}
```

## Re-declaration Rules

`let` prohibits re-declaring an identifier within the same lexical scope. Attempting to do so results in a `SyntaxError` during the parsing phase, preventing code execution.

```javascript theme={"dark"}
let y = 1;
// let y = 2; // SyntaxError: Identifier 'y' has already been declared
```

However, identifier shadowing is permitted if the declaration occurs within a nested block, as the nested block creates a distinct lexical environment.

```javascript theme={"dark"}
let z = 1;
{
  let z = 2; // Valid: shadows the outer 'z' within this specific block
}
```

## Global Object Binding

When declared at the top level of a script, `let` does not create a property on the global object. The variable is instead stored in the declarative environment record of the global scope, meaning it cannot be accessed as a property of `globalThis`.

```javascript theme={"dark"}
let topLevelVar = "data";
console.log(globalThis.topLevelVar); // undefined
```

<div
  style={{ 
display: "flex", 
justifyContent: "space-between", 
alignItems: "center", 
maxWidth: "754px", 
padding: "1rem 0",
marginBottom: "24px"
}}
>
  <span style={{ fontWeight: "bold", fontSize: "1.25rem", color: "var(--tw-prose-headings)", fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif" }}>Tired of Poor JavaScript Skills? Fix That With Deep Grasping!</span>

  <a
    href="https://syntblaze.com"
    target="_blank"
    style={{ 
  marginLeft: "24px",
  textDecoration: "none", 
  backgroundColor: "#007AFF",
  color: "#ffffff", 
  padding: "6px 16px", 
  borderRadius: "16px",
  fontSize: "0.9rem",
  fontWeight: "600",
  textAlign: "center",
  transition: "background-color 0.2s ease"
}}
  >
    Learn More
  </a>
</div>

<div style={{ display: "flex", gap: "12px", flexWrap: "wrap" }}>
  <img src="https://mintcdn.com/syntblazellc/-L0ums_2lctDSZ1l/images/skill-tracking.png?fit=max&auto=format&n=-L0ums_2lctDSZ1l&q=85&s=b9b0305c93bb501c9e767b5c76c88835" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/skill-tracking.png" />

  <img src="https://mintcdn.com/syntblazellc/23tyuOzaWS88qFlc/images/nuggets.png?fit=max&auto=format&n=23tyuOzaWS88qFlc&q=85&s=c86c80197299762989e9b882419b2109" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/nuggets.png" />

  <img src="https://mintcdn.com/syntblazellc/-L0ums_2lctDSZ1l/images/bite-sized-exercises.png?fit=max&auto=format&n=-L0ums_2lctDSZ1l&q=85&s=a65f9a38c37ff28ab73ed783c53c60e3" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/bite-sized-exercises.png" />
</div>

<div style={{ display: "flex", gap: "12px", flexWrap: "wrap", marginTop: "12px" }}>
  <img src="https://mintcdn.com/syntblazellc/-L0ums_2lctDSZ1l/images/mastery-chain.png?fit=max&auto=format&n=-L0ums_2lctDSZ1l&q=85&s=748a1763454713e679260fbb95f154a2" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/mastery-chain.png" />

  <img src="https://mintcdn.com/syntblazellc/-L0ums_2lctDSZ1l/images/element-previews.png?fit=max&auto=format&n=-L0ums_2lctDSZ1l&q=85&s=242f61448ff5dd6deaaab2dccc13b507" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/element-previews.png" />

  <img src="https://mintcdn.com/syntblazellc/-L0ums_2lctDSZ1l/images/element-explanations.png?fit=max&auto=format&n=-L0ums_2lctDSZ1l&q=85&s=cf0fc1c31f9cd0fc26716781be05fbc9" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/element-explanations.png" />
</div>
