JavaScript Object-Oriented Programming: Static Methods

JavaScript Object-Oriented Programming: Static Methods

By /

In JavaScript’s object-oriented programming world, classes are blueprints for creating objects with shared properties and behaviors. Typically, methods defined inside classes operate on instances—these are individual objects created from the class blueprint. However, there is a special category of methods called static methods that belong to the class itself, rather than any object created from it. Static methods provide a way to group functions that relate to a class but do not depend on the state of any particular instance.

Static methods are especially useful for utility functions, factory methods, or any behavior tied to the class conceptually rather than a single object. Understanding how to define, call, and use static methods allows you to write more organized and readable code in JavaScript’s class-based structure.

Defining Static Methods in ES6 Classes

To define a static method in a JavaScript class, you simply place the static keyword before the method name inside the class body. This indicates that the method belongs to the class itself.

Here’s a simple example with a class named MathUtils. It has a static method that calculates the square of a number.

class MathUtils {

  static square(number) {
    return number * number;
  }

}

In this example, the square method does not depend on any instance-specific data. Instead, it’s a utility function related to the class’s purpose. You call static methods directly on the class, like this:

console.log(MathUtils.square(5)); // Output: 25

If you try to call this method from an instance of the class, it will not work, as static methods are not part of object instances.

Accessing Static Methods and Difference from Instance Methods

Static methods are accessed directly on the class, not on the objects created from it. To highlight this difference, let’s add an instance method to the MathUtils class:

class MathUtils {

  static square(number) {
    return number * number;
  }

  cube(number) {
    return number * number * number;
  }

}

const mathInstance = new MathUtils();

console.log(MathUtils.square(3));    // 9 - static method called on class
console.log(mathInstance.cube(3));   // 27 - instance method called on object

// This will cause an error:
// console.log(mathInstance.square(3));

In this code, square is static and is called on the class MathUtils, while cube is an instance method and must be called on an object created by the class. Trying to call a static method on an instance results in an error, since it does not exist there.

Using Static Methods for Factory Patterns

Static methods can also act as factory methods. These are special functions that create and return instances of the class, often with customized parameters or setup logic.

Consider a class Wizard that has a static factory method to create a new wizard from a name string:

class Wizard {

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

  static createFromName(name) {
    const power = name.length * 10; // Example power calculation
    return new Wizard(name, power);
  }

}

const harry = Wizard.createFromName("Harry");
console.log(harry); // Wizard { name: 'Harry', power: 50 }

The static method createFromName takes a simple input and returns a fully constructed Wizard instance with some logic applied to the properties. This pattern keeps the construction logic tied to the class but outside individual instances.

Static Methods and Inheritance

Static methods are inherited by subclasses just like instance methods. However, subclasses can override static methods to provide specialized behavior. You can also call the parent class’s static methods using the super keyword inside subclass static methods.

For example, imagine a base class Character and a subclass Knight:

class Character {

  static describe() {
    return "A character in the game.";
  }

}

class Knight extends Character {

  static describe() {
    return super.describe() + " This one is a brave knight.";
  }

}

console.log(Character.describe()); // A character in the game.
console.log(Knight.describe());    // A character in the game. This one is a brave knight.

The Knight class overrides the describe static method, and calls the original via super.describe() to extend its behavior.

Combining Static and Instance Methods in a Real-World Scenario

To see static methods and instance methods working together in an engaging example, let’s create a BasketballPlayer class. We want to keep track of how many players have been created (a class-level count), and also store individual player stats.

class BasketballPlayer {

  constructor(name, points) {
    this.name = name;
    this.points = points;
    BasketballPlayer.incrementPlayerCount();
  }

  static playerCount = 0;

  static incrementPlayerCount() {
    BasketballPlayer.playerCount++;
  }

  static getTotalPlayers() {
    return BasketballPlayer.playerCount;
  }

  showStats() {
    return `${this.name} scored ${this.points} points.`;
  }

}

const player1 = new BasketballPlayer("Sirius", 30);
const player2 = new BasketballPlayer("Fred", 22);

console.log(BasketballPlayer.getTotalPlayers()); // 2
console.log(player1.showStats());                 // Sirius scored 30 points.
console.log(player2.showStats());                 // Fred scored 22 points.

Here, the static methods handle the total number of players, while the instance method showStats displays individual player information. This clear separation shows how static and instance methods serve different roles in class design.

Overriding Built-in Static Methods

JavaScript classes come with some built-in static methods, such as toString. You can override these to provide custom behavior at the class level.

Here’s how to override the static toString method to return a descriptive string for a class:

class Potion {

  static toString() {
    return "Potion Class: Used for magical effects.";
  }

}

console.log(Potion.toString()); // Potion Class: Used for magical effects.

Calling Potion.toString() now gives a meaningful description rather than the default class string representation.

Conclusion

Static methods in JavaScript provide a powerful way to group class-level functionality that doesn’t rely on instances. From utility functions to factory methods, inheritance, and even overriding built-in static behaviors, they help organize code around the class concept itself. By clearly separating static methods from instance methods, your JavaScript classes become more modular and expressive, making your programs easier to understand and maintain.

References

If you want to explore more about JavaScript static methods and class features, these resources are excellent starting points:

Related Posts

Scroll to Top