Static members & static blocks

Class-level members

A class usually teaches JavaScript how to build instances: one article, one color, one user, one ticket. A static member is different. It belongs to the class itself. You use it as ClassName.member, not as instance.member.

This connects back to Functions are objects: a class is a special kind of function, and functions can have properties. A static field is a property on that class function. A static method is a function stored there. The Class basics & extends lesson gives you the instance side; this lesson gives you the class side.

In this lesson you will watch class setup run, count instances with a shared field, prove statics are inherited, and build named factory methods like Temperature.fromFahrenheit(98.6).

Add the static keyword inside a class body to create a class-level field or method. The name is read from the class: Ticket.sold and Ticket.summary(). It is not copied onto ada or lin when you create tickets.

1class Ticket {2  static sold = 0;Run3  constructor(name) {4    this.name = name;5    Ticket.sold += 1;6  }7  static summary() {8    return Ticket.sold + " tickets sold";9  }10}11const ada = new Ticket("Ada");12const lin = new Ticket("Lin");13console.log(Ticket.summary());14console.log(ada.summary);

The counter example shows the usual shape: a static field stores shared state, and a constructor or method updates it. The output also proves a common gotcha: ada.summary is undefined. If the member starts with static, call it on the class.

Static methods are also useful when no instance is needed. JavaScript’s built-ins use this style all the time:

1Math.max(3, 10);2Date.parse("2026-09-25");3Array.from("JS");4Object.fromEntries([["role", "admin"]]);

Math.max is a Math-like utility: you never write new Math(). Array.from and Object.fromEntries are named entrances that create values from other shapes of data. That naming pattern becomes important when we reach factory methods.

Static fields handle simple setup. A static block handles setup that needs several statements: fill a registry, validate a table, connect related static fields, or choose a fallback. It runs while the class definition is evaluated, exactly once, before code after the class continues.

Step through this recording slowly. Notice that the static block logs before after class definition, and before the constructor logs Ada #1.

1class Workshop {2  static nextId = 1;Run3  static setupLog = [];4  static {5    Workshop.setupLog.push("factory setup");6    console.log("static block ran");7  }8  constructor(name) {9    this.name = name;10    this.id = Workshop.nextId++;11    console.log(name + " #" + this.id);12  }13}14console.log("after class definition");15const first = new Workshop("Ada");16console.log(Workshop.setupLog.length);

Static fields and blocks run in the order they appear. A block can read earlier static fields and write later static fields once they exist, but the cleanest code puts fields first, then the block that prepares them. Avoid doing reader-specific work during render. If setup depends on window, locale formatting, random numbers, or time, compute it on the client after the page mounts or on a user action.

extends links two sides at once. Instances of Sub can find methods from Base.prototype, and the subclass constructor Sub can find static members on Base. That is why Object.getPrototypeOf(Sub) === Base is true.

1class BaseModel {2  static create(name) {3    console.log(this.name);4    return new this(name);5  }6  constructor(name) {7    this.name = name;8  }9}10class User extends BaseModel {}Run11console.log(Object.getPrototypeOf(User) === BaseModel);12const user = User.create("Ada");13console.log(user instanceof User);

The important part is this. Inside a static method, this is the class used for the call. When you call User.create("Ada"), the inherited method runs with this === User. That lets the base method return new this(name), so subclasses get instances of themselves.

JavaScript does not support multiple constructors with different names. A class has one constructor. Static factory methods give you named entrances instead. The name tells readers what kind of input they are handing over.

1class Temperature {2  constructor(celsius) {3    this.celsius = celsius;4  }5  static fromFahrenheit(value) {6    return new Temperature((value - 32) * 5 / 9);7  }8}9const normal = Temperature.fromFahrenheit(98.6);

new Temperature(98.6) is ambiguous: is that Celsius or Fahrenheit? Temperature.fromFahrenheit(98.6) says exactly what the input means. Factories can validate input, normalize data, choose a subclass, use a cache, or return an existing instance.

1class Color {2  constructor(red, green, blue) {3    this.red = red;4    this.green = green;5    this.blue = blue;6  }7  static fromHex(hex) {8    if (!/^#[0-9a-f]{6}$/i.test(hex)) throw new Error("Use #RRGGBB");9    return new Color(10      parseInt(hex.slice(1, 3), 16),11      parseInt(hex.slice(3, 5), 16),12      parseInt(hex.slice(5, 7), 16)13    );14  }15  static fromRGB(red, green, blue) {16    for (const value of [red, green, blue]) {17      if (!Number.isInteger(value) || value < 0 || value > 255) throw new Error("RGB values are 0-255");18    }19    return new Color(red, green, blue);20  }21  toString() {22    return "rgb(" + this.red + ", " + this.green + ", " + this.blue + ")";23  }24}

Try invalid values: steelblue, #12, or RGB values outside 0–255. The factory rejects them before an invalid Color object is created. The ordinary instance method toString() still belongs on each color object because it reads that object’s red, green, and blue fields.

Where you’ll use this

Static members are common whenever the class itself has a job, not just each instance. Professional code uses them for utilities, caches, registries, parsers, and creation helpers.

Use instance members for behavior that depends on one object’s fields. Use static members when the question starts with “the whole class,” “before an instance exists,” or “which entrance should construct this?”

Common misconceptions

Try these in order. Predict first, then check against real JavaScript.

class Session {
  static count = 0;
  constructor() {
    Session.count += 1;
  }
}
new Session();
new Session();
new Session();
console.log(Session.count);

class Session {
  static count = 0;
  constructor() {
    Session.count += 1;
  }
}
new Session();
new Session();
new Session();
console.log(Session.count);

class Model {
  static create(name) {
    console.log(this.name);
    return new this(name);
  }
  constructor(name) {
    this.name = name;
  }
}
class Admin extends Model {}
console.log(Object.getPrototypeOf(Admin) === Model);
const admin = Admin.create("Ada");
console.log(admin instanceof Admin);

class User {
  constructor(name, role) {
    this.name = name;
    this.role = role;
  }
  static fromJSON(text) {
    const data = JSON.parse(text);
    return new User(data.name, data.role ?? "member");
  }
  label() {
    return this.name + " (" + this.role + ")";
  }
}
const user = User.fromJSON('{"name":"Ada","role":"admin"}');
console.log(user.label());

class User {
  constructor(name, role) {
    this.name = name;
    this.role = role;
  }
  static fromJSON(text) {
    const data = JSON.parse(text);
    return new User(data.name, data.role ?? "member");
  }
  label() {
    return this.name + " (" + this.role + ")";
  }
}
const user = User.fromJSON('{"name":"Ada","role":"admin"}');
console.log(user.label());

class Settings {
  static loaded = 0;
  static cache;
  static {
    Settings.loaded += 1;
    Settings.cache = { mode: "safe" };
    console.log("read config once");
  }
}
new Settings();
new Settings();
console.log(Settings.loaded);

class Settings {
  static loaded = 0;
  static cache;
  static {
    Settings.loaded += 1;
    Settings.cache = { mode: "safe" };
    console.log("read config once");
  }
}
new Settings();
new Settings();
console.log(Settings.loaded);

class User {
  static create(name) {
    return new User(name);
  }
  constructor(name) {
    this.name = name;
  }
}
const user = User.create("Ada");
console.log(user.name);

Every answer explains itself. Read the explanations even when you get the first try right.

Key takeaways

• Static fields and methods belong to the class constructor function.
• Instances do not automatically receive static members.
• Static blocks run once, in order with static fields, while the class is defined.
• Subclasses inherit public statics; inside a static method, this is the class used for the call.
• Factory methods are named entrances that validate and explain different ways to create instances.

Up next: Private fields & methods, including private instance fields and private statics with # names.