반응형
함수에 프로퍼티를 추가하는 방법으로 결과(반환 값)를 캐싱하여 다음 호출 시점에 복잡한 연산을 반복하지 않게 하는 패턴을 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] Array.find() (0) | 2020.06.05 |
[JavaScript] Array.reduce() (0) | 2020.06.03 |
[JavaScript] 이벤트 생성 및 트리거 하기 (0) | 2020.05.25 |