> ## 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 Class Expression
A class expression is a syntax for defining a class in JavaScript where the class is evaluated as an expression rather than a statement. Like function expressions, class expressions can be named or anonymous and are treated as first-class citizens, meaning they can be assigned to variables, passed as arguments, or returned from functions.
## Syntax
Class expressions utilize the `class` keyword followed by an optional binding identifier, an optional `extends` clause for inheritance, and the class body.
```javascript theme={"dark"}
class [className] [extends BaseClass] {
// class body
}
```
**Anonymous Class Expression:**
```javascript theme={"dark"}
const Rectangle = class {
constructor(height, width) {
this.height = height;
this.width = width;
}
};
```
**Named Class Expression with `extends`:**
```javascript theme={"dark"}
const Square = class SquareClass extends Rectangle {
constructor(side) {
super(side, side);
}
getClassName() {
// The internal name is accessible within the class body
return SquareClass.name;
}
};
```
## Technical Characteristics
**Binding and Scope**
In a named class expression, the identifier following the `class` keyword (e.g., `SquareClass`) is local to the class body's scope. It cannot be referenced from the enclosing lexical scope. The external variable (e.g., `Square`) holds the actual reference to the class object.
Crucially, this internal binding is immutable. Because class bodies execute in strict mode, attempting to reassign the internal name within the class body will throw a `TypeError`.
```javascript theme={"dark"}
const MyClass = class InnerClass {
constructor() {
InnerClass = {}; // Throws TypeError: Assignment to constant variable.
}
};
```
**The `name` Property**
The `name` property of a class expression is determined by its binding identifier. If the expression is anonymous, the JavaScript engine infers the `name` property from the variable it is assigned to. If it is named, the `name` property strictly matches the internal identifier.
```javascript theme={"dark"}
const AnonymousClass = class {};
console.log(AnonymousClass.name); // Output: "AnonymousClass"
const NamedClass = class InnerName {};
console.log(NamedClass.name); // Output: "InnerName"
```
**Hoisting and the Temporal Dead Zone (TDZ)**
Class expressions are not hoisted. The variable holding the class expression is subject to the hoisting rules of its declaration keyword (`let`, `const`, or `var`):
* **`let` and `const`:** The variable resides in the Temporal Dead Zone (TDZ) until the lexical binding is evaluated. Attempting to instantiate the class before the expression is evaluated will throw a `ReferenceError`.
* **`var`:** The variable is hoisted and initialized to `undefined`. Attempting to instantiate the class before the expression is evaluated will throw a `TypeError` (e.g., `AnonymousClass is not a constructor`) because the engine is attempting to invoke `undefined`.
**Execution Context**
The code within the body of a class expression is implicitly executed in strict mode (`'use strict'`). This applies to the constructor, static methods, and prototype methods, enforcing stricter parsing and error handling rules (such as prohibiting undeclared variables) regardless of the enclosing execution context.
Tired of Poor JavaScript Skills? Fix That With Deep Grasping!
Learn More
