JavaScript 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:

Javascript static properties

class Car { static staticMethod() { console.log(this === Car); } } Car.staticMethod(); // true

Run > Reset

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

Javascript static properties

class Car {} Car.staticMethod = function () { console.log(this === Car); }; Car.staticMethod(); // true

Run > Reset

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:

Javascript static properties

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

Run > Reset

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:

Javascript static properties

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

Run > Reset

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:

Javascript static properties

class Book { static site = "W3Docs"; } console.log(Book.site); // W3Docs

Run > Reset

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:

Javascript static methods and properties inherited

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

Run > Reset

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:

Javascript static methods and properties inherited

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

Run > Reset

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.