class

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

The class declaration creates a binding of a new class to a given name.

You can also define classes using the class expression.

Try it

Syntax

js
class name {
  // class body
}
class name extends otherName {
  // class body
}

Description

The class body of a class declaration is executed in strict mode. The class declaration is very similar to let:

  • class declarations are scoped to blocks as well as functions.
  • class declarations can only be accessed after the place of declaration is reached (see temporal dead zone). For this reason, class declarations are commonly regarded as non-hoisted (unlike function declarations).
  • class declarations do not create properties on globalThis when declared at the top level of a script (unlike function declarations).
  • class declarations cannot be redeclared by any other declaration in the same scope.

Outside the class body, class declarations can be re-assigned like let, but you should avoid doing so. Within the class body, the binding is constant like const.

js
class Foo {
  static {
    Foo = 1; // TypeError: Assignment to constant variable.
  }
}

class Foo2 {
  bar = (Foo2 = 1); // TypeError: Assignment to constant variable.
}

class Foo3 {}
Foo3 = 1;
console.log(Foo3); // 1

Examples

A class declaration

In the following example, we first define a class named Rectangle, then extend it to create a class named FilledRectangle.

Note that super(), used in the constructor, can only be used in constructors, and must be called before the this keyword can be used.

js
class Rectangle {
  constructor(height, width) {
    this.name = "Rectangle";
    this.height = height;
    this.width = width;
  }
}

class FilledRectangle extends Rectangle {
  constructor(height, width, color) {
    super(height, width);
    this.name = "Filled rectangle";
    this.color = color;
  }
}

Specifications

Specification
ECMAScript Language Specification
# sec-class-definitions

Browser compatibility

BCD tables only load in the browser

See also