자바스크립트 Observers를 활용한 데이터 필터링 방법

08 Nov 2023

javascript

개요

이번 포스트에서는 자바스크립트 Observers를 활용하여 데이터 필터링하는 방법에 대해 알아보겠습니다. Observers는 객체의 상태 변화를 감지하고 이에 따라 특정 동작을 수행할 수 있는 기능을 제공합니다. 데이터 필터링은 특정 조건에 맞는 데이터만 선택적으로 출력하는 기능으로, Observers를 활용하여 이를 구현할 수 있습니다.

Observers 패턴

Observers 패턴은 한 객체가 변경될 때, 이를 감지하고 다른 객체에게 변경 사항을 알려주는 디자인 패턴입니다. Observers 패턴은 객체 간의 결합도를 낮추고 확장성을 높일 수 있는 장점이 있습니다. 자바스크립트에서 Observers 패턴을 구현하려면 addEventListener 메서드를 이용하여 객체에 이벤트를 등록하고, 이벤트가 발생할 때 동작할 함수를 등록해야 합니다.

데이터 필터링 방법

1. 데이터 객체 생성

가장 먼저, 데이터 객체를 생성합니다. 데이터 객체에는 원본 데이터와 데이터 변화를 감지할 Observers 함수를 포함시켜야 합니다.

class DataObject {
   constructor() {
      this.data = [];
      this.observers = [];
   }
   
   addObserver(observer) {
      this.observers.push(observer);
   }
   
   removeObserver(observer) {
      const index = this.observers.indexOf(observer);
      if (index !== -1) {
         this.observers.splice(index, 1);
      }
   }
   
   notifyObservers() {
      for (const observer of this.observers) {
         observer.update(this.data);
      }
   }
   
   setData(newData) {
      this.data = newData;
      this.notifyObservers();
   }
}

2. Observer 객체 구성

데이터 변화를 감지하여 특정 조건에 맞는 데이터를 필터링할 Observer 객체를 구성합니다.

class FilterObserver {
   constructor(filterCondition) {
      this.filterCondition = filterCondition;
   }
   
   update(data) {
      const filteredData = data.filter(this.filterCondition);
      console.log("Filtered Data:", filteredData);
   }
}

3. 데이터 필터링 실행

마지막으로, 데이터 객체와 Observer 객체를 생성하고 이들을 연결하여 데이터 필터링을 실행합니다.

const dataObject = new DataObject();

// 데이터 객체에 Observer 객체 등록
const filterObserver = new FilterObserver(item => item.age > 30 && item.gender === 'male');
dataObject.addObserver(filterObserver);

// 데이터 추가 및 필터링
dataObject.setData([
   { name: "John", age: 25, gender: "male" },
   { name: "Emily", age: 40, gender: "female" },
   { name: "Alex", age: 35, gender: "male" }
]);

실행 결과는 다음과 같습니다.

Filtered Data: [
   { name: "Alex", age: 35, gender: "male" }
]

결론

자바스크립트 Observers를 활용하여 데이터 필터링하는 방법을 알아보았습니다. Observers 패턴은 객체 간의 결합도를 낮추고 상태 변화를 감지하여 필요한 동작을 수행할 수 있는 강력한 기능을 제공합니다. 이를 활용하여 데이터 필터링 등 다양한 기능을 구현할 수 있습니다.

#javascript #Observers