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 = "W3Docs";
}
console.log(Book.site); // W3Docs

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

Book.site = "W3Docs";

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.




Do you find this helpful?

Related articles