[JavaScript] for문에서 setTimeout() 호출 시 var, let 차이

변수를 선언하는 var, let 키워드는 서로 다른 스코프를 가지고 있다는 점에서 차이가 있다. 이 때문에 같은 코드를 실행했더라도 다른 결과를 출력하는 모습을 볼 수 있다. 내가 의도한 것은 1초 후에 0, 1, 2, ... 9 가 출력되는 것이었다. 왜 의도한대로 되지 않는지, 변수에 무슨 차이가 있는지 정리해보았다.

 

728x90

 

---

 

var

다음과 같이 코드를 짰을 때, 함수 스코프를 가지는 var 키워드의 경우에는 10을 10번 출력한다. 

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

for문이 시작하고 하위 setTimeout 함수도 1초 후에 시작되는데, 이 때 for문은 무척 빠른 속도로 돌기 때문에 setTimeout은 이미 다 돌아버리고 난  후의 i를 만나게 된다.  즉, for문이 다 돌고 setTimeout를 실행한다. 그렇기 때문에 마지막 i++까지 거쳐 10이 되고 나서야 console.log(10)을 찍는 것으로 볼 수 있다.

 

let

let 키워드는 블록 스코프를 가지며, 아래와 같이 0~9까지 출력된다.

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

var와 마찬가지로 for문이 다 돌고 setTimeout를 실행한다. 하지만 let 키워드로 변수를 선언 했기 때문에, for문을 한번 돌 때마다 i=0인 스코프, i=1인 스코프, ..., i=9인 스코프를 생성하게 된다. 그리고 각각 setTimeout함수가 실행되면서 i를 for문의 스코프 안에서 찾기 때문에 순서대로 0, 1, ..., 9까지 출력이 되는 것이다.