[JAVASCRIPT] 캐싱 함수 만들기 / 데코레이터(decorator)

JAVASCRIPT

---

캐싱 함수(Caching function)

로직이 무겁고 호출이 잦은 함수는 캐싱기능을 활용하면 성능을 높일 수 있습니다.

단, 캐싱기능을 구현하려는 함수는 퓨어(pure) 해야 합니다.

= input에 따른 output이 항상 일정함.
= side effect가 없음.

 

예시

함수 someFunc는 비용이 높은 연산을 수행하고, 파라미터(num)에 따른 항상 동일한 값(num+1)을 반환한다고 가정하겠습니다.

function someFunc(num) {
  console.log("Expensive");
  // ... expensive code block
  return num + 1;
}

 

함수를 실행시켜 보면

someFunc(1); // Expensive
someFunc(1); // Expensive

첫 번째와 두 번째 모두 함수블록 전체를 실행하며 Expensive라는 문자열을 출력했습니다.

 

위 함수는 퓨어하므로 두 번째 실행부터는 input이 같을 때에는 굳이 함수 블록 전체를 재실행할 필요가 없습니다. 이런 경우에는 결과값을 저장(caching)하여 재사용하는 것이 바람직합니다.

 

데코레이터 함수 작성

someFunc 함수 내부에 캐싱기능을 구현할 수도 있지만, 데코레이터 함수를 구현해 놓으면 가독성이 좋아지고, 다른 함수에서도 재사용이 가능합니다. 데코레이터 함수란 파라미터로 받은 함수에 기능을 추가해서 새로운 함수를 반환해 주는 함수입니다.

 

데코레이터 함수는 아래와 같이 someFunc를 인수로 받아서 새로운 함수를 반환해 줍니다.

const cachedFunc = decorator(someFunc);

 

데코레이터 함수 적용

function decorator(func) {
  let cache = new Map();
  return function (num) {
    if (cache.has(num)) {
      console.log("return cache");
      return cache.get(num);
    } else {
      console.log("save cache");
      const result = func(num);
      cache.set(num, result);
      return result;
    }
  };
}

데코레이터 함수에서는 파라미터로 받은 func에 캐싱 기능을 추가하여 wrapper function을 반환합니다.

 

wrapper function에서는 인자로 전달된 값이

1) map에 저장되어 있으면 key를 통해 해당 값을 얻어 반환하고 return cache를 출력합니다.

2) map에 없는 새로운 값이면 해당 key와 value를 map에 저장한 뒤 result를 반환하고 save cache를 출력합니다.

 

실행

function someFunc(num) {
  console.log("Expensive");
  // ... expensive code block
  return num + 1;
}

function decorator(func) {
  let cache = new Map();
  return function (num) {
    if (cache.has(num)) {
      console.log("return cache");
      return cache.get(num);
    } else {
      console.log("save cache");
      const result = func(num);
      cache.set(num, result);
      return result;
    }
  };
}

const cachedFunc = decorator(someFunc);

cachedFunc(1);
cachedFunc(1);
cachedFunc(1);
cachedFunc(2);
cachedFunc(2);

 

결과

/*
save cache
Expensive
return cache
return cache
save cache
Expensive
return cache
*/

 

파라미터로 각각 1과 2가 새로 전달될 때에만 save cache가 출력되었고 두 번째 호출부터는 return cache가 출력됩니다.