JavaScript Static Methods and Properties

In JavaScript, classes support different kinds of properties and methods: instance properties, static methods, and class-level properties. Understanding how and when to use them is essential for writing scalable object-oriented code.

What are Static and Instance Properties/Methods?

In JavaScript classes, you can define two types of members: instance and static. These define how data and behavior are organized and accessed.

  • Instance Property – A variable that belongs to an individual object. Defined using this inside the constructor.
  • Instance Method – A function that operates on a specific object’s data. Defined inside the class without the static keyword.
  • Static Property – A variable that belongs to the class itself, not to any object. Defined with the static keyword.
  • Static Method – A function that belongs to the class, not to its instances. Defined using the static keyword. Useful for utility functions or class-level logic.

🧠 Think of instance members as data and actions that are unique to each object, while static members are shared and accessed directly from the class.

Instance Properties

An instance property is a variable that belongs to a specific object created from a class. You define these properties using the this keyword inside the constructor method.

Here's a simple example:

javascript
class Animal {
  constructor(type, sound) {
    this.type = type;   // instance property
    this.sound = sound; // instance property
  }

  speak() {
    console.log(`${this.type} says ${this.sound}`);
  }
}

Let’s break it down:

  • this.type and this.sound are instance properties. Each object gets its own copy.
  • These are set when the object is created using the constructor.
  • You access them with this, which refers to the current object.

Now let’s create an object from this class:

javascript
const dog = new Animal("Dog", "Woof");
dog.speak(); // Output: Dog says Woof

In this case:

  • dog is an object with its own type and sound values.
  • When we call dog.speak(), it uses those properties to output a message.

🧠 Instance properties are key to storing object-specific data like a user’s name, a car’s model, or a product’s price.

Class Properties

A class property is a variable that belongs to the class itself, not to any specific object. It is shared by all instances and is defined using the static keyword.

Here’s an example:

javascript
class Animal {
  static category = "Living Thing"; // class property

  constructor(name) {
    this.name = name; // instance property
  }

  describe() {
    console.log(`${this.name} is a ${Animal.category}`);
  }
}

Let’s break it down:

  • category is a class property, defined with static.
  • It is not tied to any specific object and is accessed using the class name: Animal.category.
  • All objects created from the class share the same category value.

Here's how you use it:

javascript
const cat = new Animal("Cat");
cat.describe(); // Output: Cat is a Living Thing

console.log(Animal.category); // Output: Living Thing

In this case:

  • Animal.category returns the shared class-level value.
  • Even though we created an object (cat), the class property remains tied to Animal, not cat.

🧠 Class properties are useful when you want to store constants or shared values that apply to all instances, like a category, type, or version number.

Instance Methods and Static Methods

Methods in a class define the behavior of objects. JavaScript supports two kinds of methods: instance methods (used by objects) and static methods (used by the class itself).

Instance Methods

An instance method is a function inside a class that operates on individual objects. It’s defined without the static keyword and is accessed using an object.

javascript
class User {
  constructor(name) {
    this.name = name; // instance property
  }

  greet() { // instance method
    console.log(`Hello, my name is ${this.name}`);
  }
}

const user1 = new User("Jane");
user1.greet(); // Output: Hello, my name is Jane
  • greet() is an instance method used by individual objects like user1.
  • It uses this.name to access the object’s specific data.
  • Each object can call this method independently.

🧠 Use instance methods to define behaviors that depend on object-specific values.

Static Methods

A static method belongs to the class itself, not any object. It’s defined using the static keyword and is called using the class name.

javascript
class MathHelper {
  static square(number) {
    return number * number;
  }
}

console.log(MathHelper.square(5)); // Output: 25
  • square() is a static method defined with the static keyword.
  • It is called on the class directly: MathHelper.square(5).
  • It cannot access instance properties using this because it doesn’t operate on any object.

🧠 Use static methods for utilities, calculations, or logic that doesn’t depend on a specific object.

Real-World Example 1: User Management

Let’s explore how to use both class (static) properties and methods as well as instance properties and methods in a simple User management example.

javascript
class User {
  // Static property to keep track of total users
  static userCount = 0;

  constructor(name, email) {
    // Instance properties unique to each user
    this.name = name;
    this.email = email;

    // Increment total user count whenever a new user is created
    User.userCount++;
  }

  // Instance method to display user info
  getDetails() {
    return `${this.name} (<${this.email}>)`;
  }

  // Static method to get the total number of users
  static getUserCount() {
    return User.userCount;
  }
}

// Creating instances of User
const user1 = new User("Jane", "Jane@example.com");
const user2 = new User("Bob", "bob@example.com");

// Calling instance methods on objects
console.log(user1.getDetails()); // Jane (<Jane@example.com>)
console.log(user2.getDetails()); // Bob (<bob@example.com>)

// Calling static method on the class
console.log(User.getUserCount()); // 2

// Accessing static property directly
console.log(User.userCount); // 2

How It Works:

  • userCount is a static property shared by the entire User class, tracking total users created.
  • getUserCount() is a static method called on the class to retrieve the total user count.
  • name and email are instance properties unique to each user object.
  • getDetails() is an instance method that returns information about a specific user.
  • Instance methods and properties are accessed on individual objects (user1.getDetails()), while static ones are accessed on the class (User.getUserCount()).

Output

Jane (<Jane@example.com>)
Bob (<bob@example.com>)
2
2

🧠 Use instance properties and methods for data and behavior unique to each object, and static properties and methods for data or functions shared across all instances.

Real-World Example 2: Product Catalog with Discounts

This example shows how a Product class can use both instance properties and methods to store product details, while static properties and methods handle shared data and utility logic — such as applying a discount rate to products.

javascript
class Product {
  // Static property to hold the global discount rate (shared across all products)
  static discountRate = 0.1; // 10% discount

  constructor(name, price) {
    // Instance properties unique to each product
    this.name = name;
    this.price = price;
  }

  // Instance method to calculate price after discount
  getDiscountedPrice() {
    return this.price * (1 - Product.discountRate);
  }

  // Static method to update the discount rate
  static setDiscountRate(newRate) {
    if (newRate >= 0 && newRate <= 1) {
      Product.discountRate = newRate;
      console.log(`Discount rate updated to ${newRate * 100}%`);
    } else {
      console.log("Invalid discount rate. Must be between 0 and 1.");
    }
  }
}

// Create product instances
const phone = new Product("Smartphone", 999);
const laptop = new Product("Laptop", 1500);

// Use instance method to get discounted prices
console.log(phone.getDiscountedPrice());  // 899.1
console.log(laptop.getDiscountedPrice()); // 1350

// Change discount rate using static method
Product.setDiscountRate(0.2); // Discount rate updated to 20%

// New discounted prices after changing the discount rate
console.log(phone.getDiscountedPrice());  // 799.2
console.log(laptop.getDiscountedPrice()); // 1200

How It Works:

  • discountRate is a static property shared by the Product class to represent the global discount.
  • setDiscountRate() is a static method to update the discount rate safely.
  • name and price are instance properties storing product-specific details.
  • getDiscountedPrice() is an instance method that calculates the discounted price using the current static discount rate.
  • This setup allows easy control of global discount logic while keeping individual product data separate.

Output

899.1
1350
Discount rate updated to 20%
799.2
1200

🧠 Use static properties and methods for global or shared settings, and instance methods for behaviors that depend on specific object data.

Frequently Asked Questions

What is a static method in JavaScript?

A static method is a function that belongs to a class but is not accessible through instances of the class. It is called directly on the class itself using the class name.

How is a static method different from an instance method?

Static methods are called on the class, while instance methods are called on objects created from the class. Static methods do not have access to instance-specific data unless it's passed explicitly.

When should I use static properties or methods?

Use static methods and properties for functionality or data that’s common to the class itself rather than individual objects, such as utility functions or constants.

Can static methods access this?

Yes, but in a static method, this refers to the class itself, not an instance. You cannot access instance properties unless you explicitly pass an instance to the method.

Can I override static methods in JavaScript?

Yes, subclasses can override static methods defined in a parent class. However, they must also be declared static in the child class to behave as expected.

What's Next?

Up next, you'll learn about inheritance in JavaScript. Inheritance is a way to make your code more organized and reusable by allowing one object to use properties and methods from another. It helps you write less code and keep things simple as your programs grow.