[JavaScript] 메모라이제이션(Memorization)

- JavaScript 메모라이제이션 이란?

자바스크립트의 간단한 로컬캐쉬(Cache) 기술 중 하나이다.

메모리에 특정 정보를 기록해두고 필요 할때 마다 정보를 가져와 활용하는 기법이다.

로컬 캐쉬를 사용하는 성능 개선이 주 목적이다.

예를 들어 복잡한 연산의 반복 계산이 필요한 경우 큰 수를 계속해서 랜덤하게 곱해 나간다고 할 때 이미 했던 계산을 반복 연산하는 것은 불필요한 리소스 낭비이다.

이를 활용하여 이미 계산해 두었던 값을 사용하여 원하는 값을 출력하는 것이 메모라이제이션 이라고 할 수 있다.

- JavaScript 메모라이제이션 예제

아래 예제는 찾으려고 시도했던 숫자를 기억해두는 간단한 예제이다.

한번 찾은 숫자는 이미 찾았으므로 'Cached' 라고 출력하고 처음 찾은 숫자는 'New' 라고 출력한다.

<script>
    getNumber = (function () {
        var memo = [];
        return function f(no) {
            if(memo.indexOf(no) !== -1){
                console.log('Cached');
            }else{
                memo.push(no);
                console.log('New');
            }
        };
    });
 
    chkNum = getNumber();
    chkNum(1);
    chkNum(2);
    chkNum(2);
    chkNum(3);
</script>

memo 는 빈 배열로 앞으로 찾게될 값을 저장하는 용도로 사용된다.

이 변수는 Private 값 처럼 변경되지 않고 스코프내에 계속해서 유지할 수 있도록 클로저(Closure)를 사용하도록 한다.

하단에 익명 함수를 사용하여 memo 값에 접근하여 업데이트가 이루어지도록 한다.

* 함수실행 결과

'New'
'New'
'Cached'
'New'

위 예제에서 chkNum(2)가 두번 실행 되었으므로 'Cached' 가 출력되는 것을 알 수 있다.

- JavaScript 메모라이제이션의 장점

메모라이제이션은 로컬 캐쉬를 사용하여 이미 했던 불필요한 반복 연산을 피할 수 있다.

이를 저장하기 위해서 위와 같이 간단한 변수에 값을 저장해두고, 새롭게 시도할 값이 이 저장된 값에 있는지 여부만 확인하면 된다.

만약 엄청난 수의 연산과정이라면 이처럼 반복 사용되는 경우에 캐쉬 성능은 매우 크게 다가올 것이다.

물론 메모리를 그 만큼 사용하기 때문에 캐싱은 꼭 필요한 부분만 사용하는 것이 필요하다.

출처 : https://webisfree.com/2018-05-15/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%A9%94%EB%AA%A8%EB%9D%BC%EC%9D%B4%EC%A0%9C%EC%9D%B4%EC%85%98(memorization)-%EC%98%88%EC%A0%9C%EB%B3%B4%EA%B8%B0