자바스크립트에서 여러 개의 인자를 받는 데코레이터 함수 적용하기

오늘도 지난 시간에 이어서 여러 개의 인자를 받는 데코레이터(래핑) 함수에 대해서 알아보도록 하겠습니다. 예시가 조금 더 어려워져서 이해했다고 생각했던 부분이 다시 헷갈리기 시작했습니다.

let worker = {
  slow(min, max) {
    console.log(`slow(${min},${max})을/를 호출함`);
    return min + max;
  },
};

function cachingDecorator(func, hash) {
  let cache = new Map();
  return function () {
    let key = hash(arguments); // (*)
    if (cache.has(key)) {
      return cache.get(key);
    }

    let result = func.call(this, ...arguments); // (**)

    cache.set(key, result);
    return result;
  };
}

function hash(args) {
  return args[0] + ',' + args[1];
}

worker.slow = cachingDecorator(worker.slow, hash);

console.log(worker.slow(3, 5)); // 제대로 동작합니다.
console.log('다시 호출: ' + worker.slow(3, 5)); // 동일한 결과 출력(캐시된 결과)

이것은 예시 코드입니다. 제가 헷갈렸던 부분은 또 다시 함수의 재할당 부분입니다. 다른 분들도 이 글을 보고 도움이 되었으면 좋겠습니다.

worker.slow = cachingDecorator(worker.slow, hash);

위의 함수가 재할당 된 이후에, 아래의 콘솔이 실행됩니다.

console.log(worker.slow(3, 5));

worker.slow는 분명 cachingDecorator로 재할당 됐으니 cachingDecorater(func, hash)로 인자를 받아야하는 것이 아닌가 생각했습니다. 하지만 함수만 worker.slow라는 함수만 cachingDecorater로 래핑되었을 뿐, 실제로 받는 인자는 worker.slow에 해당하는 (min, max)입니다. 

 

cachingDecorater(func, hash)의 hash는 새로 정의된 함수

function hash(args) {
  return args[0] + ',' + args[1];
}

여기에서 가져온 함수의 이름 hash가 들어가게 되는 것입니다. 저번에도 살펴보았듯이, 자바스크립트는 함수의 이름을 바로 변수로 사용할 수 있기 때문입니다.