자바스크립트 Observers와 객체 지향 프로그래밍의 관계

08 Nov 2023

javascript

자바스크립트는 객체 지향 프로그래밍(OOP) 언어로서, 코드를 구성하는 객체와 객체 간의 관계를 중심으로 개발을 진행할 수 있습니다. 이러한 객체 지향 프로그래밍은 코드를 모듈화하고 재사용성을 높이는 등 많은 이점을 제공합니다.

자바스크립트에서는 이 객체 지향 프로그래밍 패러다임을 Observers 패턴을 통해 구현할 수 있습니다. Observers 패턴은 객체 간의 상호 작용을 위해 이벤트 발생과 처리를 추상화하는 방법입니다. 이 패턴은 한 객체가 다른 객체의 상태 변화를 감지하고 이에 따른 알림을 받을 수 있도록 합니다.

자바스크립트에서 Observers 패턴을 구현하는 가장 일반적인 방법은 “이벤트 리스닝”입니다. 이벤트 리스닝은 한 객체가 다른 객체에서 발생한 이벤트를 감지하고 그에 따른 콜백 함수를 실행하는 것을 의미합니다.

// 이벤트 리스닝 예시
class Subject {
  constructor() {
    this.observers = [];
  }

  addObserver(observer) {
    this.observers.push(observer);
  }

  removeObserver(observer) {
    const index = this.observers.indexOf(observer);
    if (index !== -1) {
      this.observers.splice(index, 1);
    }
  }

  notify(event) {
    this.observers.forEach((observer) => {
      observer.update(event);
    });
  }
}

class Observer {
  update(event) {
    console.log('이벤트 발생:', event);
    // 이벤트 처리 로직 구현
  }
}

const subject = new Subject();
const observer1 = new Observer();
const observer2 = new Observer();

subject.addObserver(observer1);
subject.addObserver(observer2);

subject.notify('click');

위 코드에서 Subject는 상태 변화를 감지하고 Observer는 이벤트 발생에 대한 알림을 받은 후 이에 따른 로직을 실행합니다. 따라서 Subject는 여러 Observer를 가질 수 있고, 이를 통해 여러 객체 간에 유연한 상호 작용이 가능해집니다.

Observing 패턴을 사용하면 자바스크립트 객체에 대한 상태 변화를 감지하고 이에 따른 로직을 자유롭게 수행할 수 있으며, 이를 통해 객체 지향 프로그래밍에서의 모듈성과 재사용성을 높일 수 있습니다.

이러한 자바스크립트 Observers와 객체 지향 프로그래밍의 관계는 코드의 유지 보수성과 확장성을 개선하는 데 많은 도움을 줄 수 있습니다.

#참고자료

JavaScript Observer Design Pattern