JavaScript Class Variable Guide

JavaScript class variables store data inside a class. They help organize code. You can share data across methods. This guide covers all types.

Classes in JavaScript are blueprints for objects. Variables inside classes hold state. They make your code reusable and clean.

What is a Class Variable?

A class variable belongs to a class. It holds data for instances or the class itself. You define it inside the class body.

There are three main types: instance variables, static variables, and private fields. Each has a different use case.

For a deeper look at variable types, see our Types of JavaScript Variables guide.

Instance Variables in Classes

Instance variables belong to each object created from the class. Every object gets its own copy. You define them in the constructor.

Use this to set instance variables. The constructor runs when you create a new object.

 
class Person {
  constructor(name, age) {
    this.name = name;  // instance variable
    this.age = age;    // instance variable
  }
}

Now create an object and access its variables:

 
const person1 = new Person("Alice", 30);
console.log(person1.name); // Alice
console.log(person1.age);  // 30

Alice
30

Each instance has its own values. This keeps data separate.

Static Variables in Classes

Static variables belong to the class itself. All instances share the same value. Use the static keyword.

Access static variables with the class name. They are great for constants or shared counters.

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

  constructor() {
    Counter.totalCount++;  // increment shared counter
  }
}

const c1 = new Counter();
const c2 = new Counter();
console.log(Counter.totalCount); // 2

2

Static variables do not require an instance. They save memory and simplify shared state.

Private Fields in Classes

Private fields start with #. They are only accessible inside the class. This provides true encapsulation.

Private fields protect data from outside modification. Use them for sensitive or internal values.

 
class BankAccount {
  #balance = 0;  // private field

  deposit(amount) {
    this.#balance += amount;
  }

  getBalance() {
    return this.#balance;
  }
}

const account = new BankAccount();
account.deposit(100);
console.log(account.getBalance()); // 100
// console.log(account.#balance); // SyntaxError

100

Private fields enforce data integrity. They are a modern JavaScript feature.

To learn more about variable scoping rules, check our JavaScript Variable Scope Explained article.

Class Field Declarations

You can declare class fields outside the constructor. This makes code cleaner. Fields can have default values.

 
class User {
  role = "guest";   // class field with default
  #id = 0;          // private field

  constructor(name) {
    this.name = name;
  }
}

const user = new User("Bob");
console.log(user.role); // guest
console.log(user.name); // Bob

guest
Bob

Class fields reduce boilerplate. They are supported in modern browsers and Node.js.

Using Variables with Methods

Class variables work with methods. Methods can read and modify variables. This creates dynamic behavior.

 
class Rectangle {
  constructor(width, height) {
    this.width = width;
    this.height = height;
  }

  area() {
    return this.width * this.height;  // uses instance variables
  }
}

const rect = new Rectangle(5, 10);
console.log(rect.area()); // 50

50

Methods keep logic close to data. This is the essence of object-oriented programming.

Common Mistakes to Avoid

Beginners often forget this inside methods. Without this, the variable is undefined. Always use this for instance variables.

Another mistake is modifying static variables on instances. Use the class name instead.

 
class Config {
  static appName = "MyApp";
}

const config = new Config();
// console.log(config.appName); // works but not recommended
console.log(Config.appName);   // correct way

Private fields can cause errors if accessed outside. Always use getter methods.

For a complete overview of variable declarations, see our JavaScript Variable Declaration Guide.

Conclusion

JavaScript class variables are powerful. Use instance variables for per-object data. Use static variables for shared values. Use private fields for encapsulation.

Always use this inside methods. Declare fields cleanly. Practice with examples to master them.

Class variables make your code organized and scalable. Start using them today.