클래스 레벨 vs 인스턴스 레벨

Coddy JavaScript 여정의 객체 지향 프로그래밍 섹션에 포함된 레슨 — 56개 중 31번째.

JavaScript 클래스에는 두 가지 고유한 수준의 속성과 메서드가 있습니다:

인스턴스 수준: 클래스에서 생성된 각 개별 객체에 속하는 속성과 메서드입니다.
클래스 수준: 인스턴스가 아닌 클래스 자체에 속하는 속성과 메서드입니다.

차이점을 알아봅시다:

먼저, 인스턴스 레벨 멤버들을 살펴보겠습니다. 인스턴스 메서드를 가진 일반 클래스를 생성합니다:

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

Car 클래스의 인스턴스를 생성합니다:

const myCar = new Car("Toyota");

인스턴스 메서드를 호출합니다:

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

각 인스턴스는 drive 메서드의 자체 복사본을 가지며, this를 사용하여 자신의 속성에 접근할 수 있다는 점에 유의하세요.

이제 클래스 레벨 멤버에 대해 살펴보겠습니다. 클래스에 정적 메서드(static method)를 추가합니다. 메서드 이름 앞에 static 키워드를 사용하여 인스턴스가 아닌 클래스 자체에 속하는 메서드를 생성합니다.

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}`;
  }
}

정적 메서드는 특정 인스턴스 데이터에 의존하지 않는 유틸리티 함수에 유용합니다. 정적 메서드는 인스턴스가 아닌 클래스 자체에서 호출됩니다:

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

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

인스턴스에서 정적 메서드를 호출하려고 하면 오류가 발생합니다:

car1.compareModels(car1, car2); // 오류: car1.compareModels는 함수가 아닙니다

챌린지

생성자만 있는 Calculator 클래스가 주어집니다. 여러분의 작업은 다음 두 가지 메서드를 추가하는 것입니다:

1. 인스턴스 메서드 <strong>add(number)</strong>

주어진 숫자를 계산기의 현재 값에 더합니다.
this.value를 업데이트하고 새로운 값을 반환합니다.
*이 메서드는 계산기 인스턴스에서 호출됩니다: calc.add(3)

2. 정적 메서드 <strong>multiply(num1, num2)</strong>

두 개의 숫자를 받아 그 곱을 반환합니다.
this를 사용하지 않습니다 (정적 메서드는 인스턴스 데이터를 가지지 않습니다).
*이 메서드는 Calculator 클래스 자체에서 호출됩니다: Calculator.multiply(4, 6)

치트 시트

JavaScript 클래스에는 두 가지 수준의 속성과 메서드가 있습니다:

인스턴스 수준: 클래스에서 생성된 각 개별 객체에 속함
클래스 수준: 인스턴스가 아닌 클래스 자체에 속함

인스턴스 메서드:

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 키워드를 사용하여 클래스 자체에 속하는 메서드를 생성합니다. 이 메서드들은 인스턴스가 아닌 클래스에서 호출됩니다:

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

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

// 클래스 자체에서 호출
console.log(Car.compareModels(car1, car2)); // "Comparing Toyota with Honda"

// 인스턴스에서 호출하면 오류가 발생함
car1.compareModels(car1, car2); // Error: car1.compareModels is not a function

정적 메서드는 특정 인스턴스 데이터에 의존하지 않는 유틸리티 함수에 유용합니다.

직접 해보기

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


// 아래 코드를 수정하지 마세요
const calc = new Calculator(5);        // 값이 5인 계산기를 생성합니다
const result1 = calc.add(3);           // 3을 더해야 함 → 5 + 3 = 8
const result2 = Calculator.multiply(4, 6); // 4 × 6 = 24를 곱해야 함
console.log(result1);                   // 예상 결과: 8
console.log(result2);                   // 예상 결과: 24