클로저 문제 해결

자바스크립트 클로저 문제는 유명하다.

 

예를 들어 아래와 같은 코드가 있다고 하자.

//클로저 문제
for(var i =0; i <100; i+=1){
    setTimeout(function(){
        console.log(i);
    },i*1000);
}

컴퓨터는 for문을 도는데 i가 100이 되는 때 까지 approximately 0.000001? 초가 걸린다. 매우 빠르다.

 

따라서 i가 따라서 100이 되고 익명함수 function() 안에서 console.log는 계속 100이 찍히게 될 것이다.

 

익명 함수 바깥인 i*1000은 정상적으로 1*1000 , 2*1000 ..... 으로 될 것이다.

 

이 문제가 클로저 문제이다.

 

이를 해결하기 위해서는 반복문 내부에 클로저 함수를 선언하고 이를 매개변수에 i값을 넣어서 전달하면 된다.

 

해결 코드를 보자.

//위를 해결
for(var i=0; i<100; i+=1){
    function 클로저(j){
        setTimeout(function(){
            console.log(j);
        },j*1000);
    }
    클로저(i);
}

또는 즉시실행함수로 

//위를 해결
for(var i=0; i<100; i+=1){
    function 클로저(j){
        setTimeout(function(){
            console.log(j);
        },j*1000);
    })(i);
}