프로토타입 prototype 패턴 - 자바스크립트 예제

프로토타입 (Prototype) 패턴 요약

프로토타입 (Prototype) 패턴

프로토타입 패턴은 기존 객체를 복제하여 새로운 객체를 생성하는 디자인 패턴입니다. new 키워드를 사용하여 클래스로부터 객체를 만드는 대신, 원본(prototype) 객체를 복사하여 필요한 부분을 수정한 뒤 사용하는 방식입니다. 특히 객체 생성 비용이 비싸거나, 클래스로부터 객체를 만드는 과정이 복잡할 때 유용합니다.

자바스크립트는 프로토타입 기반 언어이기 때문에 이 패턴을 매우 자연스럽게 활용할 수 있습니다.

기본 구조

게임 캐릭터를 생성하는 예시를 통해 알아보겠습니다. 모든 캐릭터는 기본 능력치(체력, 공격력)를 공유하지만, 각자 다른 이름과 직업을 가질 수 있습니다.

// Prototype (원본 객체)
const characterPrototype = {
  hp: 100,
  mp: 50,
  attack(target) {
    console.log(`${this.name}이(가) ${target}을(를) 공격합니다! ⚔️`);
  },
  // 객체를 복제하는 메서드
  clone() {
    // Object.create()를 사용해 프로토타입을 기반으로 새 객체를 만듭니다. 🧬
    return Object.create(this);
  },
};

// 프로토타입을 복제하여 새로운 객체 생성 ✨
const warrior = characterPrototype.clone();
warrior.name = "강한 전사";
warrior.job = "Warrior";
warrior.hp = 150; // 기본값에서 변경

const mage = characterPrototype.clone();
mage.name = "현명한 마법사";
mage.job = "Mage";
mage.mp = 120; // 기본값에서 변경

warrior.attack("오크"); // 강한 전사이(가) 오크을(를) 공격합니다! ⚔️
mage.attack("고블린"); // 현명한 마법사이(가) 고블린을(를) 공격합니다! ⚔️

console.log(warrior.hp); // 150 💪
console.log(mage.hp); // 100 (원본 프로토타입의 값을 그대로 사용) ✅

Object.create()는 지정된 프로토타입 객체를 사용하여 새 객체를 만듭니다. 이렇게 생성된 객체는 원본의 속성과 메서드를 상속받으면서, 자신만의 고유한 상태를 가질 수 있습니다.

언제 필요할까?

• 객체 생성 비용이 클 때: 데이터베이스에서 무거운 데이터를 조회하여 객체를 만들어야 할 경우, 매번 생성하는 대신 한 번 만든 객체를 복제하여 사용하면 성능상 이점을 얻을 수 있습니다.
• 다양한 종류의 객체를 생성해야 할 때: 팩토리 메서드 패턴처럼 하위 클래스를 많이 만들지 않고도, 프로토타입 객체 몇 개만으로 다양한 변형 객체를 쉽게 만들 수 있습니다.

자바스크립트에서는 Object.create()나 전개 구문({...original, ...overrides})을 통해 프로토타입 패턴을 간단하게 구현할 수 있습니다.

프로토타입 패턴 중요 키워드

• 원본 객체를 복제하여 새 객체를 생성한다.

• new 키워드 없이 객체를 만들 수 있다.

• 객체 생성 비용이 비쌀 때 효과적이다.

정처기 기출 문제

정처기 실기 대비 실전 문제