> ## 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 Named Class Expression

A named class expression is a class definition evaluated as an expression where the class is explicitly assigned an identifier. Unlike an anonymous class expression, this identifier creates a local binding strictly within the class's own lexical scope, dictating how the class references itself internally and defining its internal `[[Name]]` record.

```javascript theme={"dark"}
const VariableBinding = class InternalIdentifier {
  // Class body
};
```

## Technical Characteristics

**Lexical Scoping of the Identifier**
The identifier assigned to the class (`InternalIdentifier`) is only bound within the class body. It is not added to the enclosing lexical environment. Attempting to reference the internal identifier outside of the class body will result in a `ReferenceError`.

**The `name` Property**
When a class expression is named, the JavaScript engine assigns the internal identifier to the class's `name` property. The outer variable binding (`VariableBinding`) does not infer its name onto the class if the internal identifier is present.

**Immutability**
Classes are implicitly executed in strict mode. The internal binding created by the named class expression is immutable. Any attempt to reassign the internal identifier from within the class body will throw a `TypeError`.

**Evaluation and Hoisting**
Named class expressions are evaluated at runtime when the execution context reaches the expression. Unlike class declarations, they are not hoisted. The outer variable binding follows the hoisting rules of its declaration keyword (`const`, `let`, or `var`), but the class itself remains uninitialized until evaluation.

## Behavior Visualization

```javascript theme={"dark"}
const OuterRef = class InnerName {
  constructor() {
    // The internal identifier is accessible within the class body
    console.log(typeof InnerName); // "function"
  }

  static getClassName() {
    return InnerName.name;
  }
  
  static attemptReassignment() {
    // Throws TypeError: Assignment to constant variable.
    InnerName = "NewName"; 
  }
};

// The .name property reflects the internal identifier, not the variable binding
console.log(OuterRef.name); // "InnerName"

// The internal identifier is strictly local to the class body
try {
  console.log(InnerName);
} catch (error) {
  console.log(error.name); // "ReferenceError"
}
```

<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>
