javascript : var 키워드의 비동기 함수 문제

for (var i = 0; i < 3; ++i) {
    // 1초(1000밀리 초) * i 초후에 i를 출력
    setTimeout(() => {
        console.log(i);
    }, 1000 * i);
}

아무 생각없이 출력결과를 생각해본다면 0 1 2 가 찍힐것 같다.

 

하지만

3
3
3

 

var값은 말그대로 전역에 있는 값이다. setTimeout이 1초후에 var i를 접근한다 그때 값이 3이라서 이런 결과가 나온다.

 

for (let i = 0; i < 3; ++i) {
    // 1초(1000밀리 초) * i 초후에 i를 출력
    setTimeout(() => {
        console.log(i);
    }, 1000 * i);
}

let을 사용하면 원하는 결과가 나온다. (이런 동기 비동기를 주의 해야한다.)

0
1
2