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

class Polygon {
  constructor(height, width) {
    this.area = height * width;
  }
}

console.log(new Polygon(4, 3).area);
// Expected output: 12

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® 2027 Language Specification
# sec-class-definitions

Browser compatibility

desktop mobile server
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Bun
Deno
Node.js
class
Chrome – No support
Chrome 42 – 48 (Release date: 2015-04-14)
footnote Strict mode is required.
Chrome – Full support
Chrome 49 (Release date: 2016-03-02)
footnote Full support
Edge – Full support
Edge 13 (Release date: 2015-11-12)
footnote Full support
Firefox – Full support
Firefox 45 (Release date: 2016-03-08)
footnote Full support
Opera – No support
Opera 29 – 35 (Release date: 2015-04-28)
footnote Strict mode is required.
Opera – Full support
Opera 36 (Release date: 2016-03-15)
footnote Full support
Safari – Full support
Safari 10.1 (Release date: 2017-03-27)
footnote Full support
Chrome Android – No support
Chrome Android 42 – 48 (Release date: 2015-04-15)
footnote Strict mode is required.
Chrome Android – Full support
Chrome Android 49 (Release date: 2016-03-09)
footnote Full support
Firefox for Android – Full support
Firefox for Android 45 (Release date: 2016-03-08)
footnote Full support
Opera Android – No support
Opera Android 29 – 35 (Release date: 2015-04-28)
footnote Strict mode is required.
Opera Android – Full support
Opera Android 36 (Release date: 2016-03-31)
footnote Full support
Safari on iOS – Full support
Safari on iOS 10.3 (Release date: 2017-03-27)
footnote Full support
Samsung Internet – No support
Samsung Internet 4 – 4.2 (Release date: 2016-03-11)
footnote Strict mode is required.
Samsung Internet – Full support
Samsung Internet 5 (Release date: 2016-12-15)
footnote Full support
WebView Android – No support
WebView Android 42 – 48 (Release date: 2015-04-15)
footnote Strict mode is required.
WebView Android – Full support
WebView Android 49 (Release date: 2016-03-09)
footnote Full support
WebView on iOS – Full support
WebView on iOS 10.3 (Release date: 2017-03-27)
footnote Full support
Bun – Full support
Bun 1 (Release date: 2023-09-08)
footnote Full support
Deno – Full support
Deno 1 (Release date: 2020-05-13)
footnote Full support
Node.js – Full support
Node.js 6 (Release date: 2016-04-26)
footnote Full support

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Has more compatibility info.

See also