javascript_in_depth_11

디자인 패턴 실용 - 메모이제이션 패턴

메모이제이션 패턴은 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다. 이름대로 '메모'를 하는 것이 특징인데, 이 메모를 하는 대상은 함수 또는 객체이다.

활용

일반적인 프로그래밍 언어에서 캐시를 사용하는 것처럼 활용할 수 있다. 특히 컴퓨팅 자원이 소모되거나 처리 시간이 긴 산술식에 대하여 캐시를 해두는 식으로 활용하면 좋다. 메모이제이션 패턴은 계산이나 요청이 오래 걸리면서 반복적으로 같은 호출이 일어날 때나 재귀 함수 구현시에 메모이제이션 패턴을 설계하여 사용하는 것이 좋은 성능을 보여준다.

예제

// 메모이제이션 패턴을 이용한 캐시 구현
(function () {
    var inputItemId = document.getElementById("itemId");
    function searchItem(id) {
        var xhr;
        if (searchItem.cache.hasOwnProperty(id)) {
            return searchItem.cache[id];
        }
        xhr = new XMLHttpRequest();
        xhr.open("GET", "/searchItem");
        xhr.onload = function () {
            var item = JSON.parse(xhr.responseText);
            searchItem.cache[item.id] = item;
        }
        xhr.send();
    }
    searchItem.cache = {};
    document.getElementById("search").addEventListener("click", function () {
        searchItem(searchItem.value);
    });
}());

Function.prototype 활용

메모이제이션 패턴을 일반적으로 사용할 수 있도록 Function의 프로토타입에 추가해서 사용하면 복잡하지 않고 편리하게 활용할 수 있다.

// Function 기본 함수로 memoize 함수 정의
(function () {
    Function.prototype.memoize = function () {
        var _this = this,
            memo = {};
        return function () {
            var argsString = JSON.stringify(arguments),
                returnValue;
            if (memo.hasOwnProperty(argsString)) {
                return memo[argsString];
            } else {
                returnValue = _this.apply(this, arguments);
                memo[argsString] = returnValue;
                return returnValue;
            }
        }
    };

    function fibonacci(n) {
        if (n === 0 || n === 1) {
            return n;
        } else {
            return fibonacci(n - 1) + fibonacci(n - 2);
        }
    }

    var fibonacciMemo = fibonacci.memoize();

    var testNum = 10, start, end;
    start = Date.now();
    console.log(fibonacciMemo(testNum));
    end = Date.now();
    console.log(`Elapsed time of ${((end-start)/1000).toFixed(2)} seconds for recursive fibonacciMemo(${testNum}) for the first time`);


    start = Date.now();
    console.log(fibonacciMemo(testNum));
    end = Date.now();
    console.log(`Elapsed time of ${((end-start)/1000).toFixed(2)} seconds for recursive fibonacciMemo(${testNum}) for the second time`);
}());