for문 안에 setTimeout 걸면 어떻게 동작할까

 

 

 

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

 

반복문이 한번 돌 때마다 let i는 블록 스코프를 가짐

각 반복마다 i는 새로 선언된 것처럼 동작함

 

풀어서 쓰면 이런식으로 동작하는 듯

function num(n) {
  setTimeout(() => {
    console.log(n);
  }, 2000);
}

function timer() {
  num(0); // 첫 번째 호출
  num(1); // 두 번째 호출
  num(2); // 세 번째 호출
}

timer();

 

 

1. for 루프는 동기이기 때문에 setTimeout을 빠르게 3번 설정하고 종료됨
2. 2초후 각 콜백 함수는 캡처된 고유의 값을 가지고 순서대로 실행함

3. 0 1 2 순서대로 출력됨. 이 코드는 순서 보장이 됨

4. 근데 실제 api 호출 같은 비동기 작업은 응답 순서가 보장이 안됨

 

 

 

 

 

var는 좀 다름

var는 함수 스코프를 가지기 때문에 for 루프에서 매 반복마다 새로운 스코프가 생성이 안됨

 

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

var i;

i = 0;
setTimeout(() => console.log(i), 2000); // 이때 i는 0이지만, 함수가 실행될 때는 3

i = 1;
setTimeout(() => console.log(i), 2000); // 이때 i는 1이지만, 함수가 실행될 때는 3

i = 2;
setTimeout(() => console.log(i), 2000); // 이때 i는 2이지만, 함수가 실행될 때는 3

 

스코프가 없으니까 i를 공유하게 됨

 

 

 

 

극단적인 상황

for (var i = 0; i < 20000000000; i++) {
  setTimeout(() => {
    console.log(i);
  }, 3000);
}

 

 

var i =0;

var i=1;

....

var i=20000....

 

할당은 동기임

setTimeout은 비동기임

 

이벤트 루프는 콜 스택이 비워진 후에 테스크 큐에 있는 setTimout 콜백을 실행함

그러니까 동기가 끝나야 비동기를 시작함

i = 2000000000 일때 setTimeout이 실행되는 거임

 

그러니까 3초후에 2000000000 를 2000000000번 콘솔 찍는 결과를 낳게 됨