var와 let 차이 이해하기

문제점: var를 사용할때 6이 6번 출력된다.

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

Q. 어째서 내가 원하는 0 1 2 3 4 5 가 출력되지 않는걸까?

변수는 scope라는 것을 가진다.

 

var - 함수 스코프

let - 블럭 스코프

 

function b() {
  var a = 1;
}
console.log(a); // ReferenceError: a is not defined

if (true) {
  var a = 1;
}
console.log(a); // 1

var는 함수 스코프라서 function b()를 벗어나면 값을 읽을 수 없다

if문은 함수가 아니기 때문에 a = 1 이 잘 출력된다.

 

if (true) {
  let a = 1;
}
console.log(a); //ReferenceError: a is not defined

let은 블럭 스코프이기 때문에 블럭을 벗어난 변수는 읽을 수 없다. 그러므로 오류가 발생한다.

 

for (var i = 0; i < 6; i++) {

  setTimeout(() => {

    console.log(i);

  }, 1000 * (i+1));

} 

 

setTimeout의 콜백함수 부분(파란색)의 i 와 1000*(i+1)의 i의 실행 시점이 다르다.

1000 * (i + 1)은 for 이 돌때 실행된다.

 

우선 반복문에서 i가 1 -> 2 -> 3 -> 4 -> 5 -> 6 으로 바뀐뒤에 setTimeout 콜백함수가 실행되므로

6 6 6 6 6 6이 출력된다.

 

수정방법: var를 let으로 바꾼다

for (let i = 0; i < 6; i++) {
  setTimeout(() => {
    console.log(i);
  }, 1000 * (i+1));
}
//0 1 2 3 4 5

for문에서 쓰는 let은 하나의 블록마다 i가 고정된다(블록 스코프 특성)

따라서 setTimeout 콜백함수의 i와 setTimeout 호출힐떄의 i도 같은 값이 들어간다.

반복문과 var를 쓸 때 항상 스코프 문제가 생기는것은 아니다

setTimeout같은 비동기 함수와 반복문, var를 쓸 때 이런 문제가 발생한다