Programing/javascript

자바스크립트 Prototype Pattern

Dongkkase 2025. 4. 19. 08:49
반응형

Prototype Pattern(프로토타입 패턴) 은 기존 객체를 복제하여 새로운 객체를 생성하는 구조의 디자인 패턴입니다. 자바스크립트는 본래 프로토타입 기반 언어이기 때문에, 이 패턴을 매우 자연스럽게 구현할 수 있습니다.


🧱 Prototype Pattern이란?

Prototype Pattern은 기존 객체를 복제(clone)하여 새로운 객체를 생성하고, 해당 객체를 기반으로 기능을 확장하는 방식입니다. 객체 간 상속보다 복제와 덮어쓰기를 통한 유연한 설계가 가능하며, 메모리 효율이 높습니다.

const animal = {
    type: '동물',
    speak() {
        console.log(`${this.name}가 소리를 냅니다.`);
    }
};

const dog = Object.create(animal);
dog.name = '강아지';
dog.speak(); // 강아지가 소리를 냅니다.

✅ 장점

  1. 메모리 효율: 공통 속성과 메서드를 공유하므로 메모리 낭비가 없음
  2. 객체 간 동적 확장: 객체를 유연하게 확장하거나 오버라이드 가능
  3. 구현이 간결함: Object.create() 등 내장 함수로 간단하게 구현 가능

❌ 단점

  1. 상속 구조 파악이 어려움: 깊은 prototype chain은 디버깅을 어렵게 만듦
  2. 초보자에게 직관적이지 않음: 클래스 기반 OOP에 익숙한 개발자에게는 개념이 생소할 수 있음
  3. 모든 브라우저에서 완전 동일하게 작동하지 않을 수 있음 (구버전 호환성 이슈)

🛠️ 실전 예시: 프로토타입 기반 메시지 객체

const messageTemplate = {
    type: 'info',
    send(content) {
        console.log(`[${this.type.toUpperCase()}] ${content}`);
    }
};

const errorMessage = Object.create(messageTemplate);
errorMessage.type = 'error';
errorMessage.send('서버 오류가 발생했습니다.'); // [ERROR] 서버 오류가 발생했습니다.

const successMessage = Object.create(messageTemplate);
successMessage.type = 'success';
successMessage.send('저장이 완료되었습니다.'); // [SUCCESS] 저장이 완료되었습니다.

🧩 결론

Prototype Pattern은 자바스크립트의 언어적 특성과 매우 잘 맞는 구조로, 객체 복제와 동적 확장이 필요한 상황에서 강력한 도구가 됩니다. 단, 프로토타입 체인에 대한 개념이 익숙하지 않다면 디버깅이나 유지보수에 어려움을 겪을 수 있으므로, 명확한 구조와 일관성 있는 사용이 중요합니다.

반응형