클로저 사용시 주의사항

var arr = [];

for(var i=0; i<5; i++){

     arr[i] = function(){

           return function(){

                  console.log(i);

           }

     }();

}

 

for(var index in arr) {

   console.log(arr[index]());

}

 

 위 예제는 배열 안에 외부 함수 안에 있는 내부 함수를 리턴합니다.

리턴한 함수는 i값을 콘솔에 출력하게 되는데 결과는 5가 5번 출력이 됩니다.

 

 그 이유는 i는 전역 변수로 선언이 되었기 때문입니다. 그렇기 때문에 for문을 다 돌고 나면 5가 되고 밑에서 

호출하게 되면 i는 전역 변수로 마지막으로 저장된 5가 출력이 되는 것입니다.

 

 해당 문제를 해결하는 방법은 여러 가지가 있습니다.

간단한 방법으로는 외부 함수 안에 새로운 변수를 선언하고 i값을 저장시키는 방법이 있고 

매개변수로 받아서 리턴하는 방법이 있습니다.

 

arr[];

 

 for(var i=0; i<5; i++){

     arr[i] = function(id){

         return function(){

               return id;

         } 

     }(i);

 }

 

for(var index in arr) {

   console.log(arr[index]());

}

 

 강의에서 매개변수로 받는 방법을 알려주었고 해당 방법이 더 깔끔하다고 생각하여 매개변수를 이용한 방법만

적겠습니다.

 

 위 예제를 보면 배열 안에 저장할 때 즉시 실행 함수로 i값을 인자로 넘겨 id 매개변수로 받게 되면 id라는 매개변수는

외부 함수의 지역변수가 됩니다. 그렇게 되면 리턴하는 내부함수는 외부함수의 지역변수인 id에 접근이 가능하게 되고

결과 적으로 0~4까지 출력이 되는 함수를 반환받게 됩니다.