var & let 차이점

https://velog.io/@adultlee/당신은-풀-수-있으신가요

링크텍스트

for (var i = 0; i<3; ++i) {
    setTimeout(() => {
        console.log(i);
    }, 1000);
}
for (let i = 0; i<3; ++i) {
    setTimeout(() => {
        console.log(i);
    }, 1000);

출력 결과:

3
3
3
0
1
2

JavaScript의 setTimeout 함수는 코드 실행을 일시 중지하지 않고 나중에 실행할 함수를 예약합니다. 따라서 var를 사용하는 for 루프가 실행될 때 세 개의 함수가 1000밀리초 후에 실행되도록 예약합니다. 그러나 setTimeout 호출이 차례가 실행되기를 기다리는 동안 루프는 계속 실행되고 i가 증가합니다.

var는 함수 범위(이 경우 범위는 전체 스크립트임)이기 때문에 전체 루프에 대해 하나의 i만 있습니다. 루프가 실행된 후 i의 값은 3이고(0, 1, 2, 3의 각 반복마다 증가했기 때문에) setTimeout 함수가 실행되기 시작하면 모두 i를 3으로 간주합니다.

반면에 let은 블록 범위이므로 루프의 모든 반복이 자체 i 변수를 갖습니다. 따라서 setTimeout에 의해 예약된 각 함수에는 루프가 계속될 때 변경되지 않는 자체 i가 있습니다.

결과는 var를 사용하면 setTimeout 함수가 실행될 때까지 i가 3이므로 모두 3을 기록합니다. let을 사용하면 각 setTimeout 함수는 자체 루프 반복에서 i를 가져오므로 각각 0, 1, 2를 기록합니다.