5일차 클로저 실전 응용 2가지

1. 뼈아픈 실수 패턴 : 반복문과 비동기

초보 코더들이 가장 많이 하는 실수 중 하나라는데 우선 아래의 코드를 보고서 결과를 예측해 보세요

//결과를 예측 해보신 후 실습 해보세요
for (var i = 1; i <= 3; i++) {
  setTimeout(function() {
    console.log(i + "초 지났습니다.");
  }, i * 1000);
}

예상으로는 1초 2초 3초 이렇게 출력될 거 같지만 실제 결과는 4초 4초 4초 이렇게 뜹니다

실행 결과 1

왜 이렇게 출력되냐면 var는 함수 스코프라 i가 전역 변수처럼 공유되기 때문입니다. 반복문이 끝난 뒤(i=4)에야 비동기 함수가 실행되면서 이미 4가 되어버린 i를 참조합니다. 

이를 해결하기 위해서는 두 가지 방법이 있는데 아래 코드를 참고하세요 

// 해결 방법 1 
for (var i =1 ; i <=3 ; i++ ){
    (function(lockIndex){ // i를 lockIndex라는 인자로 받아서 가둬둠(Closure)
        setTimeout(function (){
            console.log(lockIndex + "초 지났습니다.");
        }, lockIndex * 1000);
    })(i);
}


// 해결 방법 2 
for(let i = 1; i <= 3; i++){
    setTimeout(function (){
        console.log(i + "초 지났습니다.");
    }, i * 1000);
}

해결 방법 1: 즉시 실행 함수(IIET)와 클로저 사용

해결 방법 2: let 사용 let은 블록 스코프({})마다 새로운 변수를 만들어내므로 클로저처럼 동작합니다.

실행 결과 2

2. 메모이제이션

메모이제이션은 함수를 실행했을 때 결과를 메모리에 저장해 두었다가, 같은 입력값이 다시 들어오면 저장된 값을 바로 반환하여 프로그램의 실행 속도를 높이는 최적화 기술입니다. 성능 최적화의 기본이며, 클로저를 이용해 캐시(cache) 저장소를 은닉합니다.

아주 오래 걸리는 계산 함수가 있다고 예를 들어 봅시다

//그냥 엄청 오래 걸리는 계산이라고 예를 든거임
function expensiveCalculation(n) {
  console.log("🔥 엄청 오래 걸리는 계산 중...");
  return n * 2; // 실제로는 복잡한 로직
}

이제 이걸 클로저로 감싸서 똑같은 질문에는 계산 안 하고 답만 바로 주는 똑똑한 함수로 만들어 보겠습니다.

function memoize(func) {
  const cache = {}; // 클로저 공간에 숨겨진 캐시 저장소

  return function(n) {
    if (cache[n] !== undefined) {
      console.log("⚡ 캐시에서 바로 꺼냄:", n);
      return cache[n]; // 기억해둔 값 리턴
    } else {
      const result = func(n); // 처음 본 값이면 계산 실행
      cache[n] = result; // 결과 기억
      return result;
    }
  };
}

// 사용법
const smartCalc = memoize(expensiveCalculation);

console.log(smartCalc(10)); // "🔥 엄청 오래 걸리는 계산 중..." -> 20
console.log(smartCalc(10)); // "⚡ 캐시에서 바로 꺼냄" -> 20 (계산 안 함!)
console.log(smartCalc(20)); // "🔥 엄청 오래 걸리는 계산 중..." -> 40

실행 결과 3

위 코드를 이해하시면 앞으로 react를 활용한 웹을 만들 때 이해를 하고 코딩할 수 있습니다.