setTimeout으로 알아보는 var와 let의 차이

for(var i=0; i<6; i++){
    setTimeout(function(){
        console.log(i);
    });
}


for(let i=0; i<6; i++){
    setTimeout(function(){
        console.log(i);
    });
}

var와 let의 차이가 극명하게 드러나는 시점이라고 할 수 있습니다.
전자의 경우 6이 6번,
후자의 경우 0,1,2,3,4,5가 출력됩니다.

1. 자바스크립트 엔진은 setTimeout을 API에게 처리하도록 맡깁니다. 그리고 for문을 먼저 돌립니다. 이는 자바스크립트의 비동기 처리 방식 때문입니다 ㅎㅎ 따라서 for문이 먼저동작 => 다음이 setTimeout이 되겠습니다.

2. var는 함수스코프입니다. 그러므로 var를 쓰면 for문 안에서 빠르게 돌다가 조건문인 i<6을 만나면 i=6에서 멈춰서 문서의 최상단으로 올라가서 멈춰있습니다.

3. API를 거쳐 이벤트 루프를 거쳐 뒤늦게 나타난 setTimeout은... for문으로 들어가지만 for문에는 var가 없습니다. 그래서 문서의 최상단으로 올라갑니다. 그리고 for문이 빠르게 돈 후에 변화한 변수를 만나게 됩니다.(i=6) 그러므로 6이 6번 동작하게 됩니다.

4. 위는 var를 사용했을때이고, let을 사용할때는 경우가 다릅니다.
   let은 블록스코프입니다. 따라서 i는 매 루프마다 재생산되고, setTimeout은 항상 재생산된 변수에 접근합니다.

+) 추가

for (var i = 0; i < 5; i++) {
    setTimeout(function () {
        console.log('가');
    })
}
console.log(i);

var는 i를 전역변수화하므로, 콘솔은 5를 찍습니다.
그다음으로 for문 다음에 setTimeout이 실행되므로 가가 다섯번 콘솔에 찍힙니다.