반복 클로저 문제에 대한 var와 let의 차이점

클로저 문제에 대한 var와 let의 차이점(왜 5 5 5 5)

같은 부분

setTimeout()함수가 task Queue에 들어간 다음 call stack에 있는 for문이 끝나면 call stack에 들어와서 실행을 하는데 이때 클로저를 이용하여 i를 참조합니다.

 

 

1. var인 경우

var는 함수형 스코프로 setTimeout()함수가 call stack에 들어와서 실행 할 때 상위 스코프에게 i값을 물어보면 i값은 이미 5값이 되어 있어서 5 5 5 5 5와 같이 출력이 됩니다.

const nums = [0, 1, 2, 3, 4];

for (var i = 0; i < nums.length; i++) {
  setTimeout(function () {
    console.log(`${i}`);
  }, i * 1000);
} 
// 5 5 5 5 5

 

 

2. let인 경우

let는 블록형 스코프로 for문 내에 새로운 scope를 가지기 때문에 반복을 실행 할 때마다 새로운 let이 선언이 됩니다.

setTimeout()함수가 call stack에 들어와서 실행 될 때 상위 스코프를 검색할 때 매 반복마다 선언 및 초기화된 i값을 참조하여 0 1 2 3 4값을 가지게 되는 것입니다.

const nums = [0, 1, 2, 3, 4];

for (let i = 0; i < nums.length; i++) {
  setTimeout(function () {
    console.log(`${i}`);
  }, i * 1000);
} 
// 0 1 2 3 4

 

 

마무리 

js에 있는 scope와 클로저와 동작 원리 모두 매우 밀접한 관계에 있는 것을 알게 되어 다시 한번 공부를 하는 시간을 가져 좋았습니다.

 

 

REF

https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/scope-closures/ch1.md

https://github.com/baeharam/Must-Know-About-Frontend/blob/main/Notes/javascript/closure.md

https://meetup.toast.com/posts/86

자바스크립트의 스코프와 클로저 : NHN Cloud Meetup