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.
1class User {
2 constructor(name) {
3 this.name = name;
4 }
5}
6
7User.count = 5;
8
9console.log(User.count);15Static 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.
1class User {
2 constructor(name) {
3 this.name = name;
4 }
5
6 static count = 5;
7}
8
9console.log(User.count);15This property does not exist in the object instance that User will create when executed with new.
1let user = new User("John Doe");
2
3console.log(user);
4console.log(user.count); // -> undefined1User { name: 'John Doe' }
2undefinedStatic methods
Methods can also be static. For instance:
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().
1let user = new User("John Doe");
2
3console.log(User.example);
4console.log(user.example);1[Function: createToday]
2undefinedWhy 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:
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:
1let user = User.createToday("John Doe");Is equivalent to this:
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.
1let user = User.createToday("John Doe");
2
3console.log(user);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.
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);15
2[Function: createToday]