Why might you want to create static class members in JavaScript?

TL;DR

Static class members (properties/methods) has a static keyword prepended. Such members cannot be directly accessed on instances of the class. Instead, they're accessed on the class itself.

class Car {
  static noOfWheels = 4;
  static compare() {
    return 'Static method has been called.';
  }
}

console.log(Car.noOfWheels); // 4

Static members are useful under the following scenarios:

• Namespace organization: Static properties can be used to define constants or configuration values that are specific to a class. This helps organize related data within the class namespace and prevents naming conflicts with other variables. Examples include Math.PI, Math.SQRT2.
• Helper functions: Static methods can be used as helper functions that operate on the class itself or its instances. This can improve code readability and maintainability by separating utility logic from the core functionality of the class. Examples of frequently used static methods include Object.assign(), Math.max().
• Singleton pattern: In some rare cases, static properties and methods can be used to implement a singleton pattern, where only one instance of a class ever exists. However, this pattern can be tricky to manage and is generally discouraged in favor of more modern dependency injection techniques.

Static class members

Static class members (properties/methods) are not tied to a specific instance of a class and have the same value regardless of which instance is referring to it. Static properties are typically configuration variables and static methods are usually pure utility functions which do not depend on the state of the instance. Such properties has a static keyword prepended.

class Car {
  static noOfWheels = 4;
  static compare() {
    return 'static method has been called.';
  }
}

console.log(Car.noOfWheels); // Output: 4
console.log(Car.compare()); // Output: static method has been called.

Static members are not accessible by specific instance of class.

class Car {
  static noOfWheels = 4;
  static compare() {
    return 'static method has been called.';
  }
}

const car = new Car();
console.log(car.noOfWheels); // Output: undefined
console.log(car.compare()); // Error: TypeError: car.compare is not a function

The Math class in JavaScript is a good example of a common library that uses static members. The Math class in JavaScript is a built-in object that provides a collection of mathematical constants and functions. It is a static class, meaning that all of its properties and methods are static. Here's an example of how the Math class uses static members:

console.log(Math.PI); // Output: 3.141592653589793
console.log(Math.abs(-5)); // Output: 5
console.log(Math.max(1, 2, 3)); // Output: 3

In this example, Math.PI, Math.abs(), and Math.max() are all static members of the Math class. They can be accessed directly on the Math object without the need to create an instance of the class.

Reasons to use static class members

Utility functions

Static class members can be useful for defining utility functions that don't require any instance-specific (don't use this) data or behavior. For example, you might have a Arithmetic class with static methods for common mathematical operations.

class Arithmetic {
  static add(a, b) {
    return a + b;
  }
  static subtract(a, b) {
    return a - b;
  }
}

console.log(Arithmetic.add(2, 3)); // Output: 5
console.log(Arithmetic.subtract(5, 2)); // Output: 3

Singletons

Static class members can be used to implement the Singleton pattern, where you want to ensure that only one instance of a class exists throughout your application.

class Singleton {
  static instance;

  static getInstance() {
    if (!this.instance) {
      this.instance = new Singleton();
    }
    return this.instance;
  }
}

const singleton1 = Singleton.getInstance();
const singleton2 = Singleton.getInstance();

console.log(singleton1 === singleton2); // Output: true

Configurations

Static class members can be used to store configuration or settings that are shared across all instances of a class. This can be useful for things like API keys, feature flags, or other global settings.

class Config {
  static API_KEY = 'your-api-key';
  static FEATURE_FLAG = true;
}

console.log(Config.API_KEY); // Output: 'your-api-key'
console.log(Config.FEATURE_FLAG); // Output: true

Performance

In some cases, using static class members can improve performance by reducing the amount of memory used by your application. This is because static class members are shared across all instances of a class, rather than being duplicated for each instance.

Further Reading

• Static methods and properties | MDN
• Static properties and methods | Javascript.info