Using classes

Overview of classes

If you have some hands-on experience with JavaScript, or have followed along with the guide, you probably have already used classes, even if you haven't created one. For example, this may seem familiar to you:

const bigDay = new Date(2019, 6, 19);
console.log(bigDay.toLocaleDateString());
if (bigDay.getTime() < Date.now()) {
  console.log("Once upon a time...");
}

On the first line, we created an instance of the class Date, and called it bigDay. On the second line, we called a method toLocaleDateString() on the bigDay instance, which returns a string. Then, we compared two numbers: one returned from the getTime() method, the other directly called from the Date class itself, as Date.now().

Date is a built-in class of JavaScript. From this example, we can get some basic ideas of what classes do:

• Classes create objects through the new operator.
• Each object has some properties (data or method) added by the class.
• The class stores some properties (data or method) itself, which are usually used to interact with instances.

These correspond to the three key features of classes:

• Constructor;
• Instance methods and instance fields;
• Static methods and static fields.

Declaring a class

Classes are usually created with class declarations.

class MyClass {
  // class body...
}

Within a class body, there are a range of features available.

class MyClass {
  // Constructor
  constructor() {
    // Constructor body
  }
  // Instance field
  myField = "foo";
  // Instance method
  myMethod() {
    // myMethod body
  }
  // Static field
  static myStaticField = "bar";
  // Static method
  static myStaticMethod() {
    // myStaticMethod body
  }
  // Static block
  static {
    // Static initialization code
  }
  // Fields, methods, static fields, and static methods all have
  // "private" forms
  #myPrivateField = "bar";
}

If you came from a pre-ES6 world, you may be more familiar with using functions as constructors. The pattern above would roughly translate to the following with function constructors:

function MyClass() {
  this.myField = "foo";
  // Constructor body
}
MyClass.myStaticField = "bar";
MyClass.myStaticMethod = function () {
  // myStaticMethod body
};
MyClass.prototype.myMethod = function () {
  // myMethod body
};

(function () {
  // Static initialization code
})();

Constructing a class

After a class has been declared, you can create instances of it using the new operator.

const myInstance = new MyClass();
console.log(myInstance.myField); // 'foo'
myInstance.myMethod();

Typical function constructors can both be constructed with new and called without new. However, attempting to "call" a class without new will result in an error.

const myInstance = MyClass(); // TypeError: Class constructor MyClass cannot be invoked without 'new'

Class declaration hoisting

Unlike function declarations, class declarations are not hoisted (or, in some interpretations, hoisted but with the temporal dead zone restriction), which means you cannot use a class before it is declared.

new MyClass(); // ReferenceError: Cannot access 'MyClass' before initialization

class MyClass {}

This behavior is similar to variables declared with let and const.

Class expressions

Similar to functions, class declarations also have their expression counterparts.

const MyClass = class {
  // Class body...
};

Class expressions can have names as well. The expression's name is only visible to the class's body.

const MyClass = class MyClassLongerName {
  // Class body. Here MyClass and MyClassLongerName point to the same class.
};
new MyClassLongerName(); // ReferenceError: MyClassLongerName is not defined

Constructor

Perhaps the most important job of a class is to act as a "factory" for objects. For example, when we use the Date constructor, we expect it to give a new object which represents the date data we passed in — which we can then manipulate with other methods the instance exposes. In classes, the instance creation is done by the constructor.

As an example, we would create a class called Color, which represents a specific color. Users create colors through passing in an RGB triplet.

class Color {
  constructor(r, g, b) {
    // Assign the RGB values as a property of `this`.
    this.values = [r, g, b];
  }
}

Open your browser's devtools, paste the above code into the console, and then create an instance:

const red = new Color(255, 0, 0);
console.log(red);

You should see some output like this:

Object { values: (3) […] }
  values: Array(3) [ 255, 0, 0 ]

You have successfully created a Color instance, and the instance has a values property, which is an array of the RGB values you passed in. That is pretty much equivalent to the following:

function createColor(r, g, b) {
  return {
    values: [r, g, b],
  };
}

The constructor's syntax is exactly the same as a normal function — which means you can use other syntaxes, like rest parameters:

class Color {
  constructor(...values) {
    this.values = values;
  }
}

const red = new Color(255, 0, 0);
// Creates an instance with the same shape as above.

Each time you call new, a different instance is created.

const red = new Color(255, 0, 0);
const anotherRed = new Color(255, 0, 0);
console.log(red === anotherRed); // false

Within a class constructor, the value of this points to the newly created instance. You can assign properties to it, or read existing properties (especially methods — which we will cover next).

The this value will be automatically returned as the result of new. You are advised to not return any value from the constructor — because if you return a non-primitive value, it will become the value of the new expression, and the value of this is dropped. (You can read more about what new does in its description.)

class MyClass {
  constructor() {
    this.myField = "foo";
    return {};
  }
}

console.log(new MyClass().myField); // undefined

Instance methods

If a class only has a constructor, it is not much different from a createX factory function which just creates plain objects. However, the power of classes is that they can be used as "templates" which automatically assign methods to instances.

For example, for