자바스크립트 함수 메모이제이션으로 최적화하기

Beginner

This tutorial is from open-source community. Access the source code

소개

이 랩에서는 JavaScript 에서 메모이제이션 (memoization) 의 개념을 탐구해 보겠습니다. 메모이제이션은 비용이 많이 드는 함수 호출의 결과를 캐싱하고 동일한 입력이 다시 발생할 때 캐시된 결과를 반환하여 함수 성능을 최적화하는 기술입니다. 이 랩을 통해 Map 객체를 사용하여 JavaScript 에서 메모이제이션을 구현하는 방법을 배우게 됩니다.

이것은 가이드 실험입니다. 학습과 실습을 돕기 위한 단계별 지침을 제공합니다.각 단계를 완료하고 실무 경험을 쌓기 위해 지침을 주의 깊게 따르세요. 과거 데이터에 따르면, 이것은 초급 레벨의 실험이며 완료율은 100%입니다.학습자들로부터 92%의 긍정적인 리뷰율을 받았습니다.

메모이제이션 함수 (Memoize Function)

코딩을 시작하려면 터미널/SSH 를 열고 node를 입력하세요. 이 함수는 메모이제이션된 (캐시된) 함수를 반환합니다. 이 함수를 사용하는 단계는 다음과 같습니다.

  1. 빈 캐시를 생성하기 위해 새로운 Map 객체를 인스턴스화합니다.
  2. 메모이제이션된 함수에 제공될 단일 인수를 받는 함수를 반환합니다. 함수를 실행하기 전에 해당 특정 입력 값에 대한 출력이 이미 캐시되어 있는지 확인합니다. 캐시되어 있다면 캐시된 출력을 반환하고, 그렇지 않으면 저장하고 반환합니다.
  3. 필요한 경우 메모이제이션된 함수가 this 컨텍스트를 변경할 수 있도록 function 키워드를 사용합니다.
  4. 반환된 함수에 cache를 속성으로 설정하여 접근할 수 있도록 합니다.

다음은 메모이제이션 함수를 구현하는 코드입니다.

const memoize = (fn) => {
  const cache = new Map();
  const cached = function (val) {
    return cache.has(val)
      ? cache.get(val)
      : cache.set(val, fn.call(this, val)) && cache.get(val);
  };
  cached.cache = cache;
  return cached;
};

이 함수가 어떻게 작동하는지 확인하려면 anagrams 함수와 함께 사용할 수 있습니다. 다음은 예시입니다.

const anagramsCached = memoize(anagrams);
anagramsCached("javascript"); // takes a long time
anagramsCached("javascript"); // returns virtually instantly since it's cached
console.log(anagramsCached.cache); // The cached anagrams map

요약

축하합니다! 메모이제이션 함수 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 실력을 향상시킬 수 있습니다.