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.

class [className] [extends BaseClass] {
  // class body
}

Anonymous Class Expression:

const Rectangle = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};

Named Class Expression with extends:

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.

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.

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.

Master JavaScript with Deep Grasping Methodology!

Learn More