먼저 전역 콘텍스트인 anonymous가 호출 스택에 들어갑니다. 그 뒤 setTimeout이 호출 스택에 들어갑니다.

호출 스택에 들어간 순서와 반대로 실행되므로, setTimeout이 먼저 실행됩니다. setTimeout이 실행되면 타이머와 함께 run 콜백을 백그라운드로 보내고, setTimeout은 호출 스택에서 빠집니다. 그다음으로 anonymous가 호출 스택에서 빠집니다. 백그라운드에서는 3초를 센 후 run 함수를 태스크 큐로 보냅니다. 3초를 세었다는 것은 백그라운드에 맡겨진 작업이 완료되었다는 것으로 이해해도 됩니다.

그림으로는 태스크 큐가 하나의 큐처럼 보이지만 실제로는 여러 개의 큐로 이뤄져 있습니다. 이벤트 루프는 정해진 규칙에 따라 콜백 함수들을 호출 스택으로 부릅니다. 이와 관련해 더 자세히 공부하고 싶다면 1.5절의 이벤트 루프 설명을 참조하세요.

그림 1-7은 호출 스택에서 anonymous까지 실행이 완료되어 호출 스택이 비어 있는 상황입니다. 이벤트 루프는 호출 스택이 비어 있으면 태스크 큐에서 하나씩 함수를 가져와 호출 스택에 넣고 실행합니다.

▲ 그림 1-7 이벤트 루프 2

그림 1-8은 이벤트 루프가 run 콜백을 태스크 큐에서 꺼내 호출 스택으로 올린 상황입니다. 호출 스택으로 올려진 run은 실행되고, 실행 완료 후 호출 스택에서 제거됩니다. 이벤트 루프는 태스크 큐에 콜백 함수가 들어올 때까지 계속 대기합니다.

▲ 그림 1-8 이벤트 루프 3

만약 호출 스택에 함수가 너무 많이 들어 있으면 3초가 지난 후에도 run 함수가 실행되지 않을 수 있습니다. 이벤트 루프는 호출 스택이 비어 있을 때만 태스크 큐에 있는 run 함수를 호출 스택으로 가져오니까요. 이것이 setTimeout의 시간이 정확하지 않을 수도 있는 이유입니다.