Closure

우리는 보통 함수의 흐름이 return시엔 모든 게 끝나는 걸로 알고 있다.(사실은 그렇진 않고 실행이 끝난 후 GC가 메모리를 수거해가는 형태)

많은 언어들이 지역변수는 함수가 처리되는 동안에만 사용가능하도록 설계되어있다.

function counter() {
  var count = 0;
  return function() {
    count++;
    console.log("Counter is ", count);
  }
}

var cnt = counter();

cnt();
cnt();

하지만 이 코드는 수거됐을 법한 count의 값을 정상적으로 처리해서 출력해준다. (화려한 부활?)

그건 아니고 클로저 안에 정의된 함수는 만들어진 환경을 ‘기억한다’. 따라서 안에서 활성화된 변수를 자유 변수라고 하고, 함수와 함께 기억되는 것이다.

var arr = [];

for (var i = 0; i < 5; i++) {
  arr[i] = function () {
    return i;
  };
}

for (var j = 0; j < arr.length; j++) {
  console.log(arr[j]()); //5 5 5 5 5
}

순서대로 잘 작동할 것 같지만,

첫번째 반복문에서 i가 자유변수가 되므로, 값을 저장하는데, 이미 반복문을 다 돌아버려서 5라는 값이 있으므로, 

arr[0]=function(){return 5;}
arr[1]=function(){return 5;}
arr[2]=function(){return 5;}
arr[3]=function(){return 5;}
arr[4]=function(){return 5;}

메모리에 이렇게 저장된다.

이것을 방지하기 위해선 의외로 간단하다.

i를 let을 사용하여 지역변수로 만들면 된다. (자유변수 탈출)