자바스크립트 Observers를 이용한 메모이제이션 패턴 구현

08 Nov 2023

javascript

메모이제이션 패턴은 함수의 반환 값을 캐시하여 재사용하는 기법입니다. 이를 통해 함수의 성능을 향상시킬 수 있습니다. 자바스크립트 Observers를 이용하여 메모이제이션 패턴을 구현하는 방법을 알아보겠습니다.

Observers란?

Observers는 객체의 상태를 관찰하고 변화가 있을 때 콜백 함수를 호출하는 패턴입니다. 이 패턴을 이용하면 객체의 상태 변화에 따라 콜백 함수를 실행할 수 있습니다.

메모이제이션 패턴 구현하기

메모이제이션 패턴을 구현하기 위해 다음과 같은 단계를 따릅니다.

Observer 객체 생성
Observer 객체에 상태 변화를 감지할 함수 등록
메모이제이션을 담당할 캐시 변수 초기화
함수 호출 시 캐시 변수를 확인하여 결과 반환

const myFunction = function() {
  // 캐시 변수
  let cache = {};

  // Observer 객체 생성
  const observer = new Observers();

  // Observer 객체에 상태 변화를 감지할 함수 등록
  observer.subscribe('inputChange', function(data) {
    // 상태 변화가 있을 때 캐시 초기화
    cache = {};
  });

  return function(arg) {
    // 캐시 확인
    if (cache[arg]) {
      return cache[arg];
    } else {
      // 캐시에 없을 경우 계산 수행
      const result = doCalculations(arg);

      // 캐시에 결과 저장
      cache[arg] = result;

      return result;
    }
  };
};

// 예시 함수
function doCalculations(arg) {
  // 계산 수행
  return arg * 2;
}

// 메모이제이션 패턴을 적용한 함수 생성
const memoizedFunction = myFunction();

// 메모이제이션 패턴 적용된 함수 사용 예시
console.log(memoizedFunction(5)); // 출력: 10
console.log(memoizedFunction(5)); // 출력: 10 (캐시 사용)
console.log(memoizedFunction(10)); // 출력: 20 (상태 변화, 캐시 초기화)
console.log(memoizedFunction(10)); // 출력: 20 (캐시 사용)

위 예시 코드에서는 Observer 객체를 생성하여 입력 값이 변화할 때마다 캐시를 초기화하는 콜백 함수를 등록합니다. 함수 호출 시 캐시 변수를 확인하여 결과를 반환하며, 캐시에 결과가 없는 경우 계산을 수행한 뒤 캐시에 저장합니다.

결론

자바스크립트 Observers를 이용하여 메모이제이션 패턴을 구현하는 방법을 알아보았습니다. 메모이제이션을 활용하면 함수의 성능을 향상시킬 수 있으므로, 적절한 상황에서 이 패턴을 적용해보는 것이 좋습니다.

#자바스크립트 #메모이제이션