Front-end/JavaScript

[JavaScript] 데코레이터 ((미완))

Nave 2022. 5. 9. 14:46

Decorator

새 함수를 반환하여 전달 된 함수 또는 메서드의 동작을 수정하는 함수,가장 단순하게는 코드의 한 부분을 다른 코드로 감싸는 방법을 말한다.

Target, Property, Descriptor

--> 데코레이터 함수는 target, property, descriptor 3개의 변수를 인자로 받는다.

  • target은 데코레이터가 적용될 객체에 해당한다.
  • property는 데코레이터가 적용될 객체의 프로퍼티 이름을 의미한다.
  • descriptor는 해당 객체의 프로퍼티에 대한 세부 정보(ex, writable, value)를 담고 있다.
function slow(x) {
  // CPU 집약적인 작업이 여기에 올 수 있습니다.
  alert(`slow(${x})을/를 호출함`);
  return x;
}

function cachingDecorator(func) {
  let cache = new Map();

  return function(x) {
    if (cache.has(x)) {    // cache에 해당 키가 있으면
      return cache.get(x); // 대응하는 값을 cache에서 읽어옵니다.
    }

    let result = func(x);  // 그렇지 않은 경우엔 func를 호출하고,

    cache.set(x, result);  // 그 결과를 캐싱(저장)합니다.
    return result;
  };
}

slow = cachingDecorator(slow);