프로토타입 메서드와 정적 메서드

빈·2025년 9월 30일

목록 보기

6/6

저번 포스팅에서 다뤘던 배열 메소드 fill()과 from()
fill은 왜 Array.prototype.fill()이고 from은 Array.from()일까요?
이 차이는 프로토타입 메서드와 정적 메서드이기 때문에 나타납니다.

프로토타입 메서드란?

프로토타입 메서드는 클래스의 인스턴스에서 호출할 수 있는 메서드입니다. (JS는 프로토타입이지만.. 쉽게 설명하기 위해😉)
각 인스턴스는 프로토타입 체인을 통해 해당 메서드를 공유하고, this는 메서드를 호출한 인스턴스를 가리킵니다.

인스턴스?

instance의 뜻을 찾아보면 사례, 경우라고 합니다.
예를 들어, 클래스는 자동차라는 일반적인 개념, 틀과 같습니다.
인스턴스는 myCar라는 객체, 즉, 일반적인 개념을 바탕으로 '실재하는 구체적인 한가지 사례'가 됩니다.

프로토타입 메서드 특징

인스턴스 데이터에 접근 가능

프로토타입 메서드는 this를 통해 인스턴스의 프로퍼티에 접근할 수 있습니다. 각 인스턴스마다 고유한 데이터를 가지고 있고 메서드는 그 데이터를 활용해 동작합니다.

메모리 효율성

프로토타입 메서드는 프로토타입 객체에 한 번만 정의되고 모든 인스턴스가 공유합니다. 인스턴스를 100개 만들어도 메서드는 메모리에 딱 한 번만 저장됩니다.

인스턴스 생성 필수

프로토타입 메서드를 사용하려면 반드시 new 키워드로 인스턴스를 생성해야 합니다.

정적 메서드란?

정적 메서드는 클래스 자체에서 호출할 수 있는 메서드입니다. static 키워드를 붙여 정의하며 인스턴스 생성 없이 클래스명으로 직접 호출합니다. this는 클래스 자체를 가리킵니다.

정적 메서드 특징

인스턴스 데이터에 접근 불가
정적 메서드는 특정 인스턴스에 속하지 않기 때문에 인스턴스의 프로퍼티나 프로토타입 메서드에 접근할 수 없습니다.

class Calculator {
  constructor(value) {
    this.value = value;
  }

  static double(num) {
    // ❌ this.value에 접근 불가
    // return this.value * 2;
    
    // ✅ 매개변수로 받은 값만 사용 가능
    return num * 2;
  }
}

유틸리티 함수에 적합
정적 메서드는 클래스와 관련은 있지만 특정 인스턴스에 의존하지 않는 기능을 구현할 때 유용합니다. 예를 들어, 데이터 변환, 검증 등이 있습니다.
인스턴스에서 호출 불가
정적 메서드는 클래스명으로만 호출할 수 있고 인스턴스에서는 호출할 수 없습니다.

const calc = new Calculator(10);

// ❌ 
calc.double(5); // TypeError: calc.double is not a function

// ✅ 
Calculator.double(5); // 10

일상에서 만나는 정적 메서드

사실 이미 정적 메서드를 아주 흔하게 사용하고 계실 것 같습니다.

Math.max(...);
Array.isArray(...);
Object.keys(obj);
Promise.all();
Number.isNaN(NaN);
JSON.parse(jsonStr);

정적 메서드와 인스턴스 메서드 만들어보기

class를 안쓰고 만들어보면 차이점이 확실히 보입니다.

// 1. 생성자 함수 정의
function Car(name) {
  // 인스턴스의 고유한 속성
  this.name = name;
}

// 2. 프로토타입 메서드 정의
// 이렇게 정의된 메서드는 모든 Car 인스턴스가 공유합니다.
Car.prototype.drive = function() {
  console.log(`${this.name}이(가) 달립니다!`);
};

// 3. 정적 메서드 정의
// 이 메서드는 인스턴스가 아닌, Car라는 생성자 자체에 속합니다.
Car.drive = function(carName) {
  console.log(`${carName}이(가) 달립니다!`);
};


// 프로토타입 메서드 사용
const myCar = new Car('Tesla'); 
myCar.drive(); // "Tesla이(가) 달립니다!"

// 정적 메서드 사용
const yourCar = Car.drive('Hyundai');