Understanding Static Properties in JavaScript

<Class InheritancePrivate Properties>

Previously, we mentioned that functions are also objects, and you may set custom properties for them. Also remember that classes are just constructor functions, so technically, you can assign custom properties for classes as well.

javascript
1class User {
2  constructor(name) {
3    this.name = name;
4  }
5}
6
7User.count = 5;
8
9console.log(User.count);
text
15

Static properties

This is what a static property is. It is a property assigned directly to the class, not to the object it will create when executed with the keyword new.

JavaScript offers another way of creating static properties, using the keyword static.

javascript
1class User {
2  constructor(name) {
3    this.name = name;
4  }
5
6  static count = 5;
7}
8
9console.log(User.count);
text
15

This property does not exist in the object instance that User will create when executed with new.

javascript
1let user = new User("John Doe");
2
3console.log(user);
4console.log(user.count); // -> undefined
text
1User { name: 'John Doe' }
2undefined

Static methods

Methods can also be static. For instance:

javascript
1class User {
2  constructor(name) {
3    this.name = name;
4  }
5
6  static example(name) {
7    . . .
8  }
9}

You can access this static method through User.example() but not user.example().

javascript
1let user = new User("John Doe");
2
3console.log(User.example);
4console.log(user.example);
text
1[Function: createToday]
2undefined

Why use static methods and properties?

So why do we need these static properties and methods? You can think of them as helper functions that operate on the entire class, not the object instance. For example, if you want to add a createAt field in the user object, instead of passing the date manually, this is what you can do:

javascript
1class User {
2  constructor(name, date) {
3    this.name = name;
4    this.createdAt = date;
5  }
6
7  static createToday(name) {
8    return new this(name, new Date());
9  }
10}

When User.createToday() is called, it will return a new constructor, which is assigned to the variable user.

Meaning this:

javascript
1let user = User.createToday("John Doe");

Is equivalent to this:

javascript
1let user = new this(name, new Date());

In this case, this() refers to User, and Date() is a built-in constructor that returns today's date.

javascript
1let user = User.createToday("John Doe");
2
3console.log(user);
text
1User { name: 'John Doe', createdAt: 2024-03-12T06:10:45.231Z }

Static methods and properties are inherited

Even though the static properties and methods are not part of the object that the class will construct, they will still be inherited when you use the keyword extends.

javascript
1class User {
2  constructor(name, date) {
3    this.name = name;
4    this.createdAt = date;
5  }
6
7  static count = 5;
8
9  static createToday(name) {
10    return new this(name, new Date());
11  }
12}
13
14class Profile extends User {}
15
16console.log(Profile.count);
17console.log(Profile.createToday);
text
15
2[Function: createToday]
<Class InheritancePrivate Properties>