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 every instance can call the drive method, which all instances share, and inside it this refers to the instance it was called on, so it reads that instance's own properties.

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 add(number)

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 multiply(num1, num2)

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)

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