Static Properties and Methods

The keyword static describes a static method for a class. So, it’s likely to assign a method to the class function and not to its "prototype". Methods like this are generally known as static.

In a class, they start with the static keyword, as follows:

class Car {

  static staticMethod() {

    console.log(this === Car);

  }

}

Car.staticMethod(); // true

So, it’s the same as directly assigning it as a property:

class Car {}

Car.staticMethod = function () {

  console.log(this === Car);

};

Car.staticMethod(); // true

The class constructor Car is the value of this in Car.staticMethod() call. It’s according to the “object before dot” rule.

As a rule, developers use static methods for implementing functions that belong to the class and not to any specific object of it.

For example, you have Book objects, and a function is required to compare them. Adding Book.compare method might be a natural solution. Here is an example:

class Book {

  constructor(title, date) {

    this.title = title;

    this.date = date;

  }

  static compare(bookA, bookB) {

    return bookA.date - bookB.date;

  }

}

// usage

let books = [

  new Book("HTML", new Date(2020, 1, 1)),

  new Book("CSS", new Date(2020, 0, 1)),

  new Book("JavaScript", new Date(2020, 2, 1)),

  new Book("Git", new Date(2019, 11, 1))

];

books.sort(Book.compare);

console.log(books[0].title); // Git

In this example, Book.compare stands “above” articles, as a means of distinguishing them. It’s not an article method, but the method of the whole class.

Another solution is the so-called “factory” method. Let’s see that few ways are necessary for creating an article:

• To create it by specific parameters (date, title, and more).
• To create an empty article, including today’s date.
• Somehow in another way.

You can implement the first way by the constructor. For the second one, you are recommended to make a static method of the class.

Like Book.createBookToday() in the following example:

class Book {

  constructor(title, date) {

    this.title = title;

    this.date = date;

  }

  static createBookToday() {

    // remember, this = Book

    return new this("Javascript", new Date());

  }

}

let book = Book.createBookToday();

console.log(book.title); // Javascript

So, anytime you need to create the summary of today, you need to call Book.createBookToday().

Also, you have the option of using static methods in database-related classes for searching/saving/removing entities from the database, like here:

// assuming Book is a special class for managing articles
// static method to remove the article:
Book.remove({
  id: 123
});

Static Properties¶

Before starting to learn, note that this is a recent addition to the language, and its examples work in the latest Chrome.

Static properties look like ordinary class properties, but starting with static, like this:

class Book {

  static site = "Web";

}

console.log(Book.site); // Web

So, it’s the same as a direct assignment to Book, like this:

Book.site = "Web";

Inheritance of Static Properties and Methods¶

Static methods and properties are inherited.

Let’s take a look at here:

class Car {

  static planet = "Earth";

  constructor(name, speed) {

    this.speed = speed;

    this.name = name;

  }

  drive(speed = 0) {

    this.speed += speed;

    console.log(`${this.name} drives with speed ${this.speed}.`);

  }

  static compare(carA, carB) {

    return carA.speed - carB.speed;

  }

}

// Inherit from Car

class MyCar extends Car {

  parked() {

    console.log(`${this.name} is parked!`);

  }

}

let cars = [

  new MyCar("White car", 60),

  new MyCar("Black car", 80)

];

cars.sort(MyCar.compare);

cars[0].drive(); // White car drives with speed 60.

console.log(MyCar.planet); // Earth

So, at the time, we call MyCar.compare, the inherited Car.compare is called. It works as demonstrated in the picture below:

So, MyCar extends Car generates two [[Prototype]] references. They are the following:

• The MyCar function inherits from the Car function.
• The MyCar.prototype inherits from the Car.prototype.

Consequently, inheritance operates for regular, as well as static methods.

Let’s check it:

class Car {}

class MyCar extends Car {}

// for statics

console.log(MyCar.__proto__ === Car); // true

// for regular methods

console.log(MyCar.prototype.__proto__ === Car.prototype); // true

Summary¶

In general, developers use static methods for the functionality that belongs to the whole class. That doesn’t relate to a specific class instance.

For instance, a method for comparison Book.compare(book1, book2) or a so-called factory method Book.createBookToday().

Static properties are applied when it’s necessary to store class-level data, not bound to an instance.

Static methods and properties are considered inherited.