- Home
- /
- Tutorials
- /
- JavaScript Tutorial
- /
- JavaScript Static Members
JavaScript Classes
JavaScript Static Members
Static members belong to the class itself rather than to any instance.
You call them on the class name, not on an object built from it.
Math.max and Array.from are static methods you already use.
Example
Example
javascript
class MathHelper {
static double(n) {
return n * 2;
}
}
console.log(MathHelper.double(5));No instance was created; the method belongs to the class.
Static Methods and Properties
static before a method puts it on the class.
It is called as ClassName.method().
Instances cannot see static members, and static members cannot see instance properties.
Syntax
Syntax
javascript
class Name {
static method() {}
static property = value;
}Call them on the class, never on an instance.
Instances Cannot See Them
This is the most common surprise.
Example
Example
javascript
class Helper {
static help() {
return "helping";
}
}
const instance = new Helper();
console.log(typeof instance.help);
console.log(typeof Helper.help);The output is undefined then function.
Static Properties
A static property is shared by the whole class.
Example
Example
javascript
class Config {
static version = "1.0";
}
console.log(Config.version);There is one value, not one per instance.
Counting Instances
A static property is the natural place to keep a running total.
Example
Example
javascript
class User {
static count = 0;
constructor() {
User.count++;
}
}
new User();
new User();
console.log(User.count);The output is 2.
Factory Methods
A static method can build and return an instance.
This is how you work around having only one constructor.
Example
Example
javascript
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
static origin() {
return new Point(0, 0);
}
static fromArray(pair) {
return new Point(pair[0], pair[1]);
}
}
console.log(Point.origin().x + " " + Point.fromArray([3, 4]).y);The output is 0 4.
this in a Static Method
Inside a static method, this is the class itself.
Example
Example
javascript
class Registry {
static items = [];
static add(item) {
this.items.push(item);
return this.items.length;
}
}
console.log(Registry.add("first"));this.items here means Registry.items.
Complete Example
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Static Members</title>
</head>
<body>
<h1>Static Members</h1>
<p id="out"></p>
<script>
class User {
static count = 0;
constructor(name) {
this.name = name;
User.count++;
}
static describe() {
return User.count + " users created";
}
}
new User("Ada");
new User("Grace");
new User("Alan");
document.getElementById("out").textContent = User.describe();
</script>
</body>
</html>Try It Yourself
Run the above example in the Try It Editor.
Try calling it on an instance:
Try ada.describe() and see that static methods are not there.
Important Points
staticputs a member on the class itself.- Call it as
ClassName.member. - Instances cannot see static members.
- Static properties are shared across the whole class.
- Inside a static method,
thisis the class.
Conclusion
Static members are for behaviour that belongs to the type, not to one object.
Factory methods are the most useful pattern they enable.
If a method never touches this, it probably wants to be static.
