옵저버 observer 패턴 - 자바스크립트 예제

// Observer: 구독자 인터페이스
class Subscriber {
  update(article) {
    throw new Error("update() 메서드는 반드시 구현되어야 합니다.");
  }
}

// Subject: 뉴스 발행사
class NewsPublisher {
  constructor() {
    this.subscribers = []; // 옵저버(구독자) 목록
    this.latestArticle = null;
  }

  // 옵저버 등록
  register(subscriber) {
    this.subscribers.push(subscriber);
    console.log(`${subscriber.name}님이 구독을 시작했습니다.`);
  }

  // 옵저버 제거
  unregister(subscriber) {
    this.subscribers = this.subscribers.filter((sub) => sub !== subscriber);
    console.log(`${subscriber.name}님이 구독을 취소했습니다.`);
  }

  // 모든 옵저버에게 알림
  notify() {
    console.log("\n--- 새로운 기사 발행! 모든 구독자에게 알림 전송 ---");
    this.subscribers.forEach((subscriber) => {
      subscriber.update(this.latestArticle);
    });
  }

  // 새로운 기사 발행 (상태 변경)
  publishNewArticle(article) {
    this.latestArticle = article;
    this.notify();
  }
}

// ConcreteObserver: 이메일 구독자
class EmailSubscriber extends Subscriber {
  constructor(name) {
    super();
    this.name = name;
  }

  update(article) {
    console.log(
      `[${this.name}님에게 이메일 전송] 새로운 기사: "${article.title}"`
    );
  }
}

// 클라이언트 코드
const publisher = new NewsPublisher();

const sub1 = new EmailSubscriber("김재현");
const sub2 = new EmailSubscriber("이영희");

publisher.register(sub1); // 김재현님 구독 시작
publisher.register(sub2); // 이영희님 구독 시작

publisher.publishNewArticle({
  title: "AI, 인간의 일자리를 대체할까?",
  content: "...",
});
// 출력:
// --- 새로운 기사 발행! 모든 구독자에게 알림 전송 ---
// [김재현님에게 이메일 전송] 새로운 기사: "AI, 인간의 일자리를 대체할까?"
// [이영희님에게 이메일 전송] 새로운 기사: "AI, 인간의 일자리를 대체할까?"

publisher.unregister(sub2); // 이영희님 구독 취소

publisher.publishNewArticle({
  title: "2025년 기술 트렌드 전망",
  content: "...",
});
// 출력:
// --- 새로운 기사 발행! 모든 구독자에게 알림 전송 ---
// [김재현님에게 이메일 전송] 새로운 기사: "2025년 기술 트렌드 전망"