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

The `const` declaration creates a block-scoped, read-only reference to a value. It establishes an immutable binding, meaning the variable identifier cannot be reassigned to a new value, nor can it be redeclared within the same lexical scope.

```javascript theme={"dark"}
const name1 = value1 [, name2 = value2 [, ...]];
```

## Initialization Requirement

Because the binding cannot be altered after creation, a `const` declaration requires an immediate initializer. Declaring a `const` without an assignment throws a `SyntaxError` during the parsing phase.

```javascript theme={"dark"}
const MAX_RETRIES = 5; // Valid
```

```javascript theme={"dark"}
const TIMEOUT; // SyntaxError: Missing initializer in const declaration
```

## Reassignment and Redeclaration

Attempting to reassign a `const` identifier throws a runtime `TypeError`.

```javascript theme={"dark"}
const API_URL = "https://api.example.com";
API_URL = "https://api.v2.example.com"; // TypeError: Assignment to constant variable.
```

Attempting to redeclare an identifier that already exists in the same lexical scope throws a parse-time `SyntaxError`.

```javascript theme={"dark"}
const MAX_USERS = 100;
const MAX_USERS = 200; // SyntaxError: Identifier 'MAX_USERS' has already been declared
```

## Immutable Binding vs. Immutable Value

The `const` keyword guarantees an immutable *binding*, not an immutable *value*. If the assigned value is a reference type (such as an Object or an Array), the underlying data structure is not frozen. The properties or elements of that structure can be mutated, provided the variable identifier itself is not reassigned to a new memory address.

```javascript theme={"dark"}
const config = { port: 8080 };
config.port = 3000; // Valid: Mutating the object's property

const ports = [80, 443];
ports.push(8080);   // Valid: Mutating the array
```

```javascript theme={"dark"}
const config = { port: 8080 };
config = { port: 3000 }; // TypeError: Assignment to constant variable.
```

## Block Scope and the Temporal Dead Zone (TDZ)

`const` declarations are block-scoped, meaning their visibility is limited to the nearest enclosing block `{ ... }`.

```javascript theme={"dark"}
{
  const limit = 50;
}
console.log(limit); // ReferenceError: limit is not defined
```

During execution context creation, `const` declarations are hoisted to the top of their block scope but remain uninitialized. The period between entering the scope and the actual lexical declaration is known as the Temporal Dead Zone (TDZ). Accessing the identifier within the TDZ throws a `ReferenceError`.

```javascript theme={"dark"}
{
  // TDZ starts for 'threshold'
  console.log(threshold); // ReferenceError: Cannot access 'threshold' before initialization
  const threshold = 10;   // TDZ ends, binding is initialized
}
```

## Global Object Context

When executed in a global script context (such as a standard `<script>` tag in a browser), `const` declarations do not create properties on the global object (e.g., `window`). This contrasts with `var`, which does append its identifier to the global environment record.

*(Note: In Node.js, top-level declarations are scoped to the module wrapper by default, meaning neither `var` nor `const` creates a property on the `global` object.)*

```javascript theme={"dark"}
// Executed in a browser's global script scope
var legacyVersion = "0.9.0";
const version = "1.0.0";

console.log(window.legacyVersion); // "0.9.0"
console.log(window.version);       // 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>
