반복문 안에서 var, let

var를 사용한 setTimeout 함수

for (var i = 1; i < 6; i++) {
   setTimeout(() => {
      console.log(i);
   }, 1000)
}

6이 5번 반복해서 출력

// 아래 코드는 이해를 돕기 위함 (실제로 코드가 아래처럼 되는 것은 아님)
var i = 1;
for (; i < 6; i++) {
   setTimeout(() => {
      console.log(i);
   }, 1000)
}

setTimeout 함수는 for문이 끝나면 실행된다. (비동기)
그래서 i는 이미 6이된 상태임으로 6이 5번 출력된다.

---

let을 사용한 setTimeout 함수

for (let i = 1; i < 6; i++) {
   setTimeout(() => {
      console.log(i);
   }, 1000)
}

1 ~ 5가 차례로 출력

// 아래 코드는 이해를 돕기 위함 (실제로 코드가 아래처럼 되는 것은 아님)
let i = 1;
for (; i < 6; i++) {
   let i = i;
   setTimeout(() => {
      console.log(i);
   }, 1000)
}

setTimeout 함수는 for문이 끝나면 실행된다. (비동기)
이 상황은 var를 사용했을 때와 같다.
하지만, let을 사용했기에 유효범위가 블록 스코프다.
즉, 반복문이 작동할 때마다 새로운 스코프가 만들어져서 i값이 저장된다.(i=1, i=2, i=3...)
그래서 1~5가 순서대로 출력된다.

---

렉시컬 환경까지 확실히 배운 후 그림으로 내용을 보충할 계획이다.