JavaScript Static Variables Guide

JavaScript static variables are properties shared across all instances of a class. They belong to the class itself, not to any single object. This guide explains how to create and use them effectively.

Static variables are useful for counters, configuration values, or shared data. They help you keep track of class-level information without duplicating it in every object.

What is a Static Variable?

A static variable is defined on the class using the static keyword. It is accessed directly from the class, not from an instance. This makes it perfect for constants or shared state.

In JavaScript, static variables are also called static properties. They were introduced in ES6 with the class syntax. Before that, you had to attach properties directly to the constructor function.

Static variables are not inherited by instances. Each instance sees the same value unless you change it on the class itself.

How to Declare Static Variables

You declare a static variable inside a class using the static keyword. It follows the same naming rules as regular variables. For more on naming, see our JavaScript Variable Naming Rules guide.

Here is a basic example:

class Counter {
  static count = 0; // static variable

  increment() {
    Counter.count++; // access via class name
  }
}

let c1 = new Counter();
let c2 = new Counter();
c1.increment();
c2.increment();
console.log(Counter.count); // 2

The output shows that both instances share the same count variable.

2

Accessing Static Variables

Access static variables using the class name, not this. Inside a static method, you can use this to refer to the class itself. But inside an instance method, you must use the class name.

Here is an example with a static method:

class Config {
  static appName = "MyApp";
  static version = "1.0";

  static getInfo() {
    return `${this.appName} version ${this.version}`;
  }
}

console.log(Config.getInfo()); // MyApp version 1.0

MyApp version 1.0

Notice that inside getInfo, this refers to the Config class. This works only in static methods.

Static Variables vs Instance Variables

Instance variables belong to each object. Static variables belong to the class. This difference is important for memory and behavior.

Consider this example:

class User {
  static totalUsers = 0; // static
  constructor(name) {
    this.name = name; // instance variable
    User.totalUsers++;
  }
}

let u1 = new User("Alice");
let u2 = new User("Bob");
console.log(User.totalUsers); // 2
console.log(u1.name); // Alice
console.log(u2.name); // Bob

The totalUsers is shared. The name is unique per instance.

If you try to access a static variable from an instance, you get undefined. This is a common mistake for beginners. Learn more about JavaScript Variable Scope Explained to avoid confusion.

Using Static Variables for Constants

Static variables are ideal for constants that apply to all instances. You can use them for configuration values or fixed settings.

Here is an example:

class MathHelper {
  static PI = 3.14159;
  static E = 2.71828;

  static circleArea(radius) {
    return this.PI * radius * radius;
  }
}

console.log(MathHelper.circleArea(5)); // 78.53975

78.53975

Notice that PI and E are static. They are accessed directly from the class.

Static Variables with Inheritance

Static variables are inherited by subclasses. But they are still shared. If you change a static variable in a subclass, it affects the parent class too.

Here is an example:

class Animal {
  static kingdom = "Animalia";
}

class Dog extends Animal {
  static breed = "Canine";
}

console.log(Dog.kingdom); // Animalia (inherited)
console.log(Animal.kingdom); // Animalia
Dog.kingdom = "Mammalia";
console.log(Animal.kingdom); // Mammalia (changed!)

This behavior can be surprising. If you want separate static variables, re-declare them in the subclass.

For more on how variables interact, see our JavaScript Variable Shadowing guide.

Common Mistakes

Beginners often try to access static variables with this inside instance methods. This does not work because this refers to the instance, not the class.

Another mistake is forgetting that static variables are shared. Changing them in one place affects all code. Use them carefully for shared state.

Finally, remember that static variables are not available on instances. Always use the class name.

Practical Example: Counter with Reset

Here is a complete example that uses a static variable for a counter and a static method to reset it.

class Task {
  static taskCount = 0;
  constructor(title) {
    this.title = title;
    Task.taskCount++;
  }

  static resetCount() {
    Task.taskCount = 0;
  }
}

let t1 = new Task("Learn JS");
let t2 = new Task("Build app");
console.log(Task.taskCount); // 2
Task.resetCount();
console.log(Task.taskCount); // 0

2
0

This pattern is useful for tracking how many objects have been created.

Conclusion

JavaScript static variables are powerful for class-level data. They are declared with the static keyword and accessed via the class name. Use them for counters, constants, and shared configuration.

Remember that static variables are shared across all instances. They are not available on individual objects. Always access them from the class itself.

Practice with examples to master this concept. For more on variable types, check our Types of JavaScript Variables guide. Happy coding!