memoize 함수로 함수 결과 캐싱하기 (TypeScript)

https://x.com/KaraBharat/status/1917449808174100762/photo/1

함수 결과를 캐싱해서 같은 입력에 대해 계산을 생략하고 빠르게 결과를 반환하는 memoize 패턴을 TypeScript로 구현해본 예제입니다.

🔁 `memoize` 함수 설명

function memoize<T extends (...args: any[]) => any>(fn: T): T {
  const cache = new Map<string, ReturnType<T>>();

  return ((...args: Parameters<T>) => {
    const key = JSON.stringify(args);
    if (cache.has(key)) {
      return cache.get(key) as ReturnType<T>;
    }
    const result = fn(...args);
    cache.set(key, result);
    return result;
  }) as T;
}

✅ 주요 포인트

Map<string, ReturnType<T>>: 입력값을 문자열(JSON)로 변환하여 캐시 키로 사용
Parameters<T> / ReturnType<T>: TypeScript의 유틸리티 타입으로 함수 인자 및 반환 타입을 추론
as T: 반환 타입을 원래 함수와 같게 맞춰줌

🧪 예제: 고비용 계산 함수 캐싱

const expensiveCalculation = (a: number, b: number) => {
  console.log("Calculating...");
  return a + b;
};

const memoizedCalculation = memoize(expensiveCalculation);

🔍 실행 결과

console.log(memoizedCalculation(2, 3)); // "Calculating..." -> 5
console.log(memoizedCalculation(2, 3)); // Returns from cache -> 5
console.log(memoizedCalculation(4, 5)); // "Calculating..." -> 9

💡 정리

항목	설명
성능 향상	동일한 입력에 대해 함수 실행을 생략하고 캐시에서 반환
사용 시점	고비용 계산, API 호출 결과 등을 캐싱하고 싶을 때
JSON.stringify	단순한 인자 비교에는 유용하지만, 복잡한 객체에는 주의 필요
타입 안전	TypeScript 유틸리티 타입을 통해 원본 함수 타입 유지

🔁 memoize 함수 설명

✅ 주요 포인트

🧪 예제: 고비용 계산 함수 캐싱

🔍 실행 결과

💡 정리

🧠 기억해두기

🔁 `memoize` 함수 설명