출처: https://twitter.com/BusyRich/status/494959181871316992

이벤트 루프의 작동방식

이벤트루프의 작동방식은 굉장히 재미있다.
예를 들어 setTimeout같은 방식의 js의 내장함수를 사용하게 되면?

왜 이렇게 되는 것일까?

js의 기본 처리방식은 런타임이 실행되면 콜스택에 호출한 오브젝트가 실행이 된다.
js는 기본이 싱글스레드인 동기형 프로그램언어이다.
그것을 보조하기 위해 wepAPI가 보조를 하는데
기존의 동기순서를 지켜주는 콜스택에
console.log('A')가 들어간다.
그리고 다음순서로 setTimeout의 인자들이 실행되기 위해 들어가는데
이친구들은 시간이 카운트되기까지 기다려야하는게 동기의 방식이지만
여기서 테스크큐(콜백 큐)와 이벤트루프가 콜스택에 관여를 한다.

|__| 콜스택
|__|
|__|
|B |
|A |

이러한 방식으로 되는데 여기서 B는 일정 시간이 지난뒤에 콜스택에서 실행이 되어야 하는게 정상이다. 하지만 뒤에서 기다리는 함수들이 있기에 일단은 콜스택에서 B를 뺀다.
그리고 해당 setTimeout을 태스크큐라는 콜스택과 비슷한 실행영역으로 옮겨진다.
그리고 카운트(1000 <- 1초)를 실행한다.
그러면 다음에 들어올 C도 같은 방식을 가지게 된다. 이제 콜스택에는 A만 덩그러니
남게 되는데 B,C는 테스크큐로 옮겨졌으니 D가 들어오게 된다.
그리고 여기서 정말 중요한데 테스크큐에서 setTimeout들이 카운트가 실행되고
먼저 카운트가 끝난 함수부터 이벤트루프가 관장하는 콜백함수에 들어가게 된다.
그리고 이벤트 루프는 콜스택의 자리에 아무것도 남게되지 않을시(A,D가 실행된후) 비어있는 콜스택에 자신의 콜백함수에 잠깐 머물고 있던 B,C를 먼저 등록된 순서대로
넣는다. 그리고 콜스택을 다시 해결하고 나면 A D C B 순서대로 출력이 되게 된다.

이러한 방식으로 이벤트루프는 동기처리방식의 js의 비동기방식을 해결하게끔 도와주는 것이다.