[scope & closure] 다음 문제의 답과 풀이 과정을 알려주세요

[jum0]

for문 안에 setTimeout 함수가 있고, 그 안에 i를 호출하는 함수가 있습니다. 어떤 결과가 나오게 될까요? 설명도 해주세요~~

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

[shinsehantan]

• 답
  • 10이 10번 출력됩니다.
• 풀이과정
  • for문을 돌면서 setTimeout이 콜스택에 쌓이고, 타이머 생성과 함께 console.log(i)를 실행하는 익명함수는 Web APIs에서 대기하게 됨.
  • 타이머 10초가 지나면, console.log(i)를 실행하는 익명함수는 콜백 큐로 이동함.
  • 이 작업이 10번 반복되고 11번째가 오기 전, for 루프는 종료됨. 현재 콜백 큐에는 10개의 익명함수가 차례로 쌓인 상태
  • for 루프가 종료되어, 현재 콜스택이 비었기 때문에 콜백 큐의 console.log(i)들이 하나씩 콜스택으로 올라감
  • console.log(i)가 10차례 차례로 실행됨.
  • 이때 이제 실행되면서 콘솔에 i를 찍어야하는데 자신이 속한 스코프에는 i가 없음. 그럼 undefined가 나올 것 같지만, 스코프 체인으로 전역 스코프를 참조할 수 있음.
  • 그런데 참조하고 있는 i가 이미 for문을 모두 돌고 끝난 후의 10이기 때문에 10이 10번 출력됨.

[Tanney-102]

{ // 1번 블록

    for(var i = 0; i < 10; i++) { // 2~11번 블록
        setTimeout(function() {
          console.log(i);  
        }, 10);
    }

}

• 10만 10번 찍힌다.
• setTimeout에 의해 모든 console.log는 for문이 종료된 후 실행된다.
• console.log에서 참조하는 i가 동일한 스코프내에 없기때문에 렉시컬 스코프를 따라 익명함수가 선언될 당시의 스코프를 참조한다.
• 상위 스코프의 i는 var 키워드로 선언되었으므로 1번 블록을 스코프로한다.(함수레벨 스코프를 따르기 때문)
• 따라서 ++ 연산에 의해 변화된 i를 모두 동일하게 참조한다.