웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > js

자바스크립트 메모라이제이션(memorization) 예제보기

Last Modified : 2018-05-15 / Created : 2018-05-15
6,037
View Count

자바스크립트의 고급 기술 중 하나인 메모라이제이션(Memorization)에 대하여 알아보도록 하겠습니다.

자바스크립트의 고급 기술이라고 얘기한 이유는 사용 빈도가 아주 높은 것은 아니지만 자바스크립트의 성능에 큰 영향을 줄 수 있는 스킬 중 하나이기 때문입니다. 먼저 메모라이제이션이란 무엇일까요???




# 자바스크립트의 메모라이제이션(Memorization)이란

자바스크립트의 메모라이제이션 간단한 로컬 캐쉬(Cache) 기술 중 하나입니다. 메모리에 특정 정보를 기록해두고(메모하여) 필요할때마다 정보를 가져와 활용하는 기법이죠. 이를 사용하는 이유는 로컬 캐쉬를 사용하는 성능 개선이 주 목적이라 하겠습니다.

예를 들자면 복잡한 연산의 반복 계산이 필요한 경우를 생각해볼 수 있습니다. 매우 큰 수를 계속해서 랜덤하게 곱해 나간다고 가정해볼때... 이미 했던 계산을 반복 연산하는 것은 불필요한 리소스 낭비입니다. 이전에 계산해두었다면? 그 값을 사용할 수 있기 때문입니다... 예를들어 이번에 10 x 10의 값이 필요한데 이미 계산한 적이 있는 경우 이를 기록해서 나중에 사용할 수 있도록 하는 것이 바로 메모라이제이션이라고합니다. 그렇다면 아래에서는 간단한 예제를 만들어보고 어떻게 동작하는지 설명해보겠습니다.



# 자바스크립트 메모라이제이션 예제보기

이제 예제를 통해서 알아봅니다. 아래 예제는 찾으려고 시도했던 숫자를 기억해두는 간단한 예제입니다. 한번 찾은 숫자는 이미 찾았으므로 'Cached'라고 출력하고 처음 찾는 숫자는 'New'라고 출력하면 좋겠죠? 그럼 아래 코드를 봐주세요.
@ find.js
getNumber = (function () {
  var memo = [];
  return function f(no) {
    if (memo.indexOf(no) !== -1) {
      console.log('Cached');
    }
    else {
      memo.push(no);
      console.log('New');
    }
  };
});

위와 같이 함수 getNumber()를 만들었습니다. 보시면 아래와 같은 코드를 볼 수 있습니다.
var memo = [];

memo는 빈 배열로 앞으로 찾게될 값을 저장하는 용도로 사용됩니다... 이 변수는 Private 값처럼 변경되지 않고 스코프내에 계속해서 유지할 수 있도록 클로저(Closure)를 사용하도록 합니다. 하단에 익명함수를 사용하여 mem o값에 접근... 업데이트가 이루어지도록 하였습니다.

이제 getNumber를 사용하여 또 다른 함수 chkNum()라는 함수를 만들것입니다. 아래와 같이 말이죠.
chkNum = getNumber();

이처럼 chkNum()에 파라미터를 전달하여 아래와 같이 입력해봅니다. 각각 실행된 결과는 어떻게될까요?
chkNum(1);
chkNum(2);
chkNum(2);
chkNum(3);

아래와 같이 순서대로 결과가 나타나게될 것입니다.
'New'
'New'
'Cached'
'New'

여기서 chkNum(2)이 두 번 사용된 것을 알 수 있습니다. 이미 실행한 적이 있기때문에 'Cache'라고 출력할 수 있겠죠... 나머지들은 처음 시도되었으므로 당연히 'New'가 출력됩니다.


! 메모라이제이션의 장점

이처럼 메모라이제이션은 로컬 캐쉬를 사용하여 이미 했던 불필요한 반복 연산을 피할 수 있습니다. 이를 저장하기 위해서 위와같이 간단한 변수에 값을 저장해두고 ... 새롭게 시도할 값이 이 저장된 값에 있는지의 여부만 확인하면 됩니다. 만약 엄청난 수의 연산과정이라면 이처럼 반복 사용되는 경우에 캐쉬 성능은 매우 크게 다가오겠죠. 물론 메모리를 그 만큼 사용하기 때문에 캐싱은 꼭 필요한 부분만 사용하는 것이 필요할 것입니다.



# 메모라이제이션과 클로저(Closure)

위 기법은 클로저(Closure)가 사용되었습니다. 클로저를 사용하였기 때문에 외부에서 배열값으로 사용된 내부변수 memo에 직접 접근하기 어렵습니다. 또한 전역변수를 사용하지 않아 혹시라도 변경되거나 충돌될 위험에서 벗어날 수 있을 것입니다.

이처럼 클로저를 사용하는 다양한 기법들이 존재합니다. 그 중에서도 메모라이제이션은 클로저를 이용하는 대표적인 방법 중 하나라고 할 수 있습니다. 클로저는 꼭 이해하고 알아두어야하겠습니다.

Previous

자바스크립트에서 AJAX 비동기 방식으로 Excel 파일 다운로드 받는 방법

Previous

자바스크립트 DOM 확장(DOM Extension)