자바스크립트 Observer Pattern

Observer Pattern(옵서버 패턴) 은 객체 간의 일대다(1:N) 관계를 정의하여, 한 객체의 상태가 변경되었을 때 의존 객체들이 자동으로 알림을 받고 갱신되도록 하는 행동(Behavioral) 디자인 패턴입니다.

---

🧱 Observer Pattern이란?

Observer Pattern은 주체(Subject) 와 옵서버(Observer) 로 역할이 나뉘며, 주체는 자신의 상태 변화를 관찰자에게 통보합니다. 자바스크립트에서는 이벤트 시스템이나 상태 관리 로직에 널리 활용됩니다.

class Subject {
    constructor() {
        this.observers = [];
    }
    subscribe(observer) {
        this.observers.push(observer);
    }
    unsubscribe(observer) {
        this.observers = this.observers.filter(obs => obs !== observer);
    }
    notify(data) {
        this.observers.forEach(observer => observer.update(data));
    }
}

class Observer {
    constructor(name) {
        this.name = name;
    }
    update(data) {
        console.log(`${this.name} 수신: ${data}`);
    }
}

const news = new Subject();
const user1 = new Observer("User1");
const user2 = new Observer("User2");

news.subscribe(user1);
news.subscribe(user2);
news.notify("새로운 뉴스가 도착했습니다!");

---

✅ 장점

1. 저결합 구조: 주체와 옵서버 간 의존성이 낮음
2. 확장성 우수: 옵서버를 자유롭게 추가/제거 가능
3. 반응형 시스템 구현: 변화 감지 및 자동 갱신 가능

---

❌ 단점

1. 성능 문제: 옵서버 수가 많아지면 알림 처리 비용 증가
2. 디버깅 어려움: 알림 흐름을 추적하기 어려움
3. 순환 참조 위험: 잘못 설계하면 메모리 누수 발생 가능

---

🛠️ 실전 예시: 채팅방 사용자 알림 시스템

class ChatRoom {
    constructor() {
        this.users = [];
    }
    join(user) {
        this.users.push(user);
    }
    sendMessage(from, message) {
        this.users.forEach(user => {
            if (user.name !== from) {
                user.receiveMessage(from, message);
            }
        });
    }
}

class ChatUser {
    constructor(name) {
        this.name = name;
    }
    receiveMessage(from, message) {
        console.log(`[${this.name}] ${from}의 메시지: ${message}`);
    }
}

const room = new ChatRoom();
const alice = new ChatUser("Alice");
const bob = new ChatUser("Bob");

room.join(alice);
room.join(bob);
room.sendMessage("Alice", "안녕하세요!");

---

🧩 결론

Observer Pattern은 사용자 인터페이스, 이벤트 시스템, 실시간 알림 처리 등에서 널리 쓰이는 실시간 반응형 시스템 구현에 적합한 패턴입니다. 단순하면서도 강력한 구조를 갖고 있어, 상태 변화 전파와 객체 간 관계 관리에 있어 필수적인 설계 방식으로 간주됩니다.