JavaScript

[JavaScript Patterns] Memoization(메모이제이션)

JayLee 2020. 7. 18. 22:11
반응형

함수에 프로퍼티를 추가하는 방법으로 결과(반환 값)를 캐싱하여 다음 호출 시점에 복잡한 연산을 반복하지 않게 하는 패턴을 Memoization(메이모제이션) 패턴이라고 한다.

 

var func = function(param) {
    if (!func.cache[param]) {
        console.log(param + ' is not cached!');
   
        func.cache[param] = Math.pow(2, param);
    } else {
	    console.log(param + ' is cached!');
    }
  
    return func.cache[param];
}

func.cache = {};

func(2);  // 2 is not cached!
func(4);  // 4 is not cached!
func(2);  // 2 is cached!

 

 

위 예제는 func 함수에 cache 프로퍼티를 추가하여 메모이제이션 패턴을 사용한 예제이다. cache 프로퍼티는 func 함수에서 입력받은 param 매개변수를 키로하여 Math.pow 계산 결과를 값으로 저장한다.

 

처음 func(2) 실행시점에는 키 2에 대한 값이 캐시되지 않아 직접 계산하여 결과를 반환했다. func(4)도 동일하게 키 4에 대한 값이 캐시되지 않아 직접 계산하여 결과를 반환했다. 그런데, 마지막 func(2) 실행시점에는 이전에 키 2에 대한 값이 캐시되어 있어 계산 없이 캐시된 계산을 반환했다.

 

이전 계산 결과를 저장하기 위해 메모리 사용은 필요하지만, 계산 자체가 비용이 크고 반복적으로 같은 계산을 많이 한다면 성능상 이점을 가져다 줄 수 있는 패턴으로 보인다.

 

참고:

도서 "자바스크립트 코딩 기법과 핵심 패턴", 스토얀 스테파노프 저 | 김준기 외 1명 역 | 인사이트 

반응형

'JavaScript' 카테고리의 다른 글

[ES6 JavaScript] Class  (0) 2020.09.26
[ES6 JavaScript] arrow 함수  (0) 2020.09.23
[JavaScript Patterns] Memoization(메모이제이션)  (0) 2020.07.18
[JavaScript] Array.find()  (0) 2020.06.05
[JavaScript] Array.reduce()  (0) 2020.06.03
[JavaScript] 이벤트 생성 및 트리거 하기  (0) 2020.05.25