Skip to main content

JavaScript Classes

JavaScript Static Members

Written by Published

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

  • static puts 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, this is 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.