Static members & static blocks

Members that belong to the class

A class is a plan for making objects. Each object made from the class is called an instance. For example, one user, one ticket, or one color.

A member is a field (a stored value) or a method (a function) that a class defines. Most members belong to each instance. A static member is different: it belongs to the class itself. You use it with the class name, like ClassName.member. You don't use it with an instance, like instance.member.

Why can a class hold things? In JavaScript, a class is a special kind of function, and a function is an object. So a class can have its own properties, like any object. A static field is one of those properties. A static method is a function stored as one of those properties.

The table compares the two kinds of member. Read each row as a question, then the answer for each kind.

In this lesson you will:

• count objects with one shared field,
• watch class setup code run before any object exists,
• see that a subclass gets the static members of its parent class,
• write methods that make objects, like Temperature.fromFahrenheit(98.6).

To make a static member, write the word static in front of a field or method inside the class. JavaScript then puts that member on the class. It does not copy the member onto the objects you make later.

1class Cart {2  static itemCount = 0;3  constructor(item) {4    this.item = item;5    Cart.itemCount += 1;6  }7}8const tea = new Cart("tea");9const book = new Cart("book");10console.log(Cart.itemCount);11console.log(tea.item);

Line 2 makes one itemCount field on the class Cart. It starts at 0. Line 5 runs every time you write new Cart(...). It adds 1 to that same field. Lines 8 and 9 make two carts, so the count becomes 2.

Line 10 prints Cart.itemCount, which is 2. Line 11 prints tea.item, which is tea. Each cart has its own item, but there is only one itemCount.

The next example adds a static method too. Press Step to walk through it one line at a time.

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);

This is the usual shape. A static field stores a value that all objects share. The constructor or a method changes it. The last line shows something important: ada.summary is undefined. The method summary starts with static, so it lives on Ticket, not on ada.

1class Ticket {2  static summary() {3    return "ready";4  }5}6const ticket = new Ticket();7console.log(ticket.summary());

Line 7 fails with a TypeError. The object ticket has no summary, so ticket.summary is undefined, and you can't call undefined. The fix is to call it on the class: Ticket.summary().

A static method is also handy when you don't need an object at all. JavaScript's own built-in tools work this way:

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

• Math.max finds the biggest number. You never write new Math(); you just use the tool.
• Date.parse turns date text into a number: the milliseconds since 1970.
• Array.from makes a new array from something else, here the letters of "JS".
• Object.fromEntries makes a new object from a list of pairs.

The last two make new values from a different kind of input. Remember that idea; it comes back in factory methods at the end of the lesson.

A static field can hold a simple starting value. Sometimes the setup needs several lines of code, like filling a list. For that, use a static block: the word static followed by curly braces, static { ... }, inside the class.

A static block runs exactly once, while JavaScript is making the class. It finishes before the code after the class runs.

1class Parser {2  static formats = [];3  static {4    Parser.formats.push("json", "text");5  }6}7console.log(Parser.formats.join(", "));

Line 2 makes an empty list, Parser.formats. Lines 3 to 5 are the static block. It adds "json" and "text" to the list. Line 7 prints json, text. If you made a Parser object later, the block would not run again.

Now step through a longer example. Watch for two things: the static block prints before after class definition, and before the constructor prints 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 static blocks run from top to bottom, in the order you wrote them. A block can use the static fields written above it. The clearest code puts the fields first and the block that fills them right after.

A subclass is a class made with extends, like class Admin extends Model. The class it extends, Model, is the parent class.

extends makes two links:

• Each Admin object can use the instance methods of Model.
• The class Admin itself can use the static members of Model.

You can check the second link with Object.getPrototypeOf(Admin) === Model. It gives true. Object.getPrototypeOf(x) returns the object that x falls back to when it doesn't have a property.

1class Model {2  static create(name) {3    return new this(name);4  }5  constructor(name) {6    this.name = name;7  }8}9class Admin extends Model {}10const admin = Admin.create("Asha");11console.log(admin.constructor === Admin);

Line 9 makes Admin with no members of its own. Line 10 calls Admin.create("Asha"). Admin has no create, so JavaScript follows the link and finds it on Model.

Inside a static method, this is the class you called it on. Here that is Admin. So on line 3, new this(name) means new Admin(name). Line 11 prints 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 key is this. When you call User.create("Ada"), the method runs with this set to User, even though it was written in BaseModel. Because the parent's method says new this(name), each subclass gets objects of its own kind.

A class has only one constructor. But you may want to make the same kind of object from different inputs. A factory method is a static method that makes an object and returns it. Its name tells the reader what kind of input it takes.

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);

The constructor on lines 2 to 4 stores a temperature in Celsius. The factory method on lines 5 to 7 takes Fahrenheit, changes it to Celsius, and then calls new Temperature(...). Line 9 uses it, so normal.celsius is 37.

Compare it with new Temperature(98.6). A reader can't tell if 98.6 is Celsius or Fahrenheit. Temperature.fromFahrenheit(98.6) says it clearly. A factory method can also:

• check the input and throw an error if it is wrong,
• tidy the input into the shape the constructor expects,
• pick which subclass to make,
• give back an object it made earlier, instead of a new one.

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 wrong inputs: steelblue, #12, or a number outside 0 to 255. Each factory method throws an error before any Color object is made. The method toString() is a normal instance method, because it reads one color's own red, green, and blue.

1class User {2  constructor(name, role) {3    this.name = name;4    this.role = role;5  }6  static fromJSON(text) {7    const data = JSON.parse(text);8    return new User(data.name, data.role ?? "member");9  }10  label() {11    return this.name + " (" + this.role + ")";12  }13}14console.log(User.fromJSON('{"name":"Asha"}').label());

JSON is a text format for data. On line 7, JSON.parse(text) turns that text into an object. Line 8 makes the user. The text has no role, so data.role is undefined, and ?? "member" uses "member" instead. Line 14 prints Asha (member).

Where you'll use this

Use a static member when the job belongs to the class as a whole, not to one object. Each row of the table is one common job, a real example, and why static fits it.

Use an instance member when the work depends on one object's own data. Use a static member when the question is about the whole class, or when no object exists yet.

Common misconceptions

Do these in order. Guess the answer first, then check it.

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);

Each answer comes with a short reason. Read the reason even when you got it right.

Key takeaways

• Static fields and methods live on the class itself.
• Objects made from the class don't get static members.
• Static fields and static blocks run once, top to bottom, while the class is being made.
• A subclass can use its parent's public static members. Inside a static method, this is the class you called it on.
• Factory methods are static methods with clear names that check their input and make objects.

Up next: Private fields & methods. You'll learn names that start with #, which only code inside the class can use, including private static members.