Class-Level vs. Instance-Level

Part of the Object Oriented Programming section of Coddy's JavaScript journey — lesson 31 of 56.

In JavaScript classes, there are two distinct levels of properties and methods:

Instance-level: Properties and methods that belong to each individual object created from the class.
Class-level: Properties and methods that belong to the class itself, not to instances.

Let's understand the difference:

First, let's look at instance-level members. Create a regular class with an instance method:

class Car {
  constructor(make) {
    this.make = make;
  }
  
  drive() {
    return `The ${this.make} is driving`;
  }
}

Create an instance of the Car class:

const myCar = new Car("Toyota");

Call the instance method:

console.log(myCar.drive()); // Outputs: "The Toyota is driving"

Notice that each instance gets its own copy of the drive method and can access its own properties using this.

Now, let's look at class-level members. We add a static method to our class. Use the static keyword in front of the method name to create a method that belongs to the class itself, not to instances.

class Car {
  constructor(make) {
    this.make = make;
  }
  
  drive() {
    return `The ${this.make} is driving`;
  }
  
  static compareModels(car1, car2) {
    return `Comparing ${car1.make} with ${car2.make}`;
  }
}

Static methods are useful for utility functions that don't depend on specific instance data. The static method is called on the class itself, not on instances:

const car1 = new Car("Toyota");
const car2 = new Car("Honda");

console.log(Car.compareModels(car1, car2)); // Outputs: "Comparing Toyota with Honda"

Trying to call a static method on an instance will result in an error:

car1.compareModels(car1, car2); // Error: car1.compareModels is not a function

Challenge

You're given a Calculator class with only a constructor. Your task is to add two methods:

1. Instance Method <strong>add(number)</strong>

Adds the given number to the calculator's current value
Updates this.value and returns the new value
*It is called on calculator instances: calc.add(3)

2. Static Method <strong>multiply(num1, num2)</strong>

Takes two numbers and returns their product
Does NOT use this (static methods don't have instance data)
*It is called on the Calculator class itself: Calculator.multiply(4, 6)

Cheat sheet

JavaScript classes have two levels of properties and methods:

Instance-level: Belong to each individual object created from the class
Class-level: Belong to the class itself, not to instances

Instance Methods:

Regular methods that can access instance properties using this:

class Car {
  constructor(make) {
    this.make = make;
  }
  
  drive() {
    return `The ${this.make} is driving`;
  }
}

const myCar = new Car("Toyota");
console.log(myCar.drive()); // "The Toyota is driving"

Static Methods:

Use the static keyword to create methods that belong to the class itself. They are called on the class, not on instances:

class Car {
  static compareModels(car1, car2) {
    return `Comparing ${car1.make} with ${car2.make}`;
  }
}

const car1 = new Car("Toyota");
const car2 = new Car("Honda");

// Call on the class itself
console.log(Car.compareModels(car1, car2)); // "Comparing Toyota with Honda"

// Calling on an instance causes an error
car1.compareModels(car1, car2); // Error: car1.compareModels is not a function

Static methods are useful for utility functions that don't depend on specific instance data.

Try it yourself

import { Calculator } from './calculator.js';


// Don't modify the code below
const calc = new Calculator(5);        // Creates calculator with value = 5
const result1 = calc.add(3);           // Should add 3 → 5 + 3 = 8
const result2 = Calculator.multiply(4, 6); // Should multiply 4 × 6 = 24
console.log(result1);                   // Expected: 8
console.log(result2);                   // Expected: 24