Class vs. static method in JavaScript

javascript

instance-methods

static-methods

javascript-classes

byAnton Shumikhin·Feb 2, 2025

In simple terms, use a class method when you need to access instance properties, and a static method when the functionality is related to the class itself but does not depend on the characteristics of any specific instances.

Example:

class Vehicle {
  constructor(brand) {
    this.brand = brand; // Let's give our vehicle a brand!
  }
  
  // Class method using `this` for some "method" to our madness...
  displayBrand() {
    return `Vehicle brand: ${this.brand}`;
  }
  
  // Static method not using `this`, because it doesn't care 
  // about your instances (what an independent method, right?)
  static identifyClass() {
    return 'I am the Vehicle class';
  }
}

let car = new Vehicle('Toyota'); // Congrats, you have a new Toyota!
console.log(car.displayBrand());   // Outputs: Vehicle brand: Toyota
console.log(Vehicle.identifyClass()); // Outputs: I am the Vehicle class

Instance method (displayBrand): Flourishes on object car, and says it loud and proud: Vehicle brand: Toyota.
Static method (identifyClass): Claims its identity without any object, channeling healthy self-esteem into Vehicle.

Prototypes: The Ghosts in JavaScript's Machine

In JavaScript, our friendly neighborhood prototype underpins both classes and static methods. Despite appearances, JavaScript is not a class-based language, but a prototype-based one. Thus, JavaScript’s tryst with inheritance happens through prototypes, not classes. Understanding this inner mechanic is a key milestone on your path towards conquering JavaScript classes and dissecting the juicy bits of instance and static methods.

Dance of the Instance and Static Methods

Instance methods are as inherent to an object as coffee is to a caffeine addict. They create and handle behavior based on instance properties and purpose.

class Coffee {
  // Our coffee needs its caffeine content!
  constructor(caffeineContent) {
    this.caffeineContent = caffeineContent;
  }

  // When called, our coffee shares its secret...
  shareCaffeineContent() {
    return `I contain ${this.caffeineContent}mg of caffeine.`;
  }
}

let espresso = new Coffee(63); // An espresso contains approximately 63mg of caffeine.
console.log(espresso.shareCaffeineContent()); // Outputs: I contain 63mg of caffeine.

On the flip side, static methods, are nonchalantly independent of any instance. They focus on utility functions at a class or global level and don't rely on instance-specific values.

class Barista {
  // No constructor here - the barista doesn't need any specific information.

  // Static method working independently like an espresso shot!
  static makeAnnouncement() {
    return 'We serve the best coffee in town!';
  }
}

console.log(Barista.makeAnnouncement()); // No object required to make this claim.

Code Organization: The Unsung Hero

Using classes and static methods helps to keep your code neatly categorized and user-friendly. Boldly claim readability, manageability, and scalability by correctly using both instance-specific and utility functions. Remember, mixups between calling instance methods statically or vice versa can cause unintended pits of confusion and bugs.

explain-codes / Javascript / Class vs. static method in JavaScript

Linked

What techniques can be used to define a class in JavaScript and their trade-offs?



Use of 'prototype' vs. 'this' in JavaScript?



Advantages of using prototype, vs defining methods straight in the constructor?



Static variables in JavaScript



Class with single method -- best approach?

