[JavaScript]이벤트 루프란?

JavaScript는 싱글 쓰레드 기반 언어이다.
하지만 JavaScript가 사용되는 환경을 생각해보면 많은 작업이 동시에 처리되고 있는 것을 알 수 있다.
예를 들면, Node.js기반의 웹 서버에서는 동시에 여러개의 http요청을 처리하는 것을 볼 수 있다.

---

위 그림은 이벤트 루프를 설명할 때 자주 쓰이는 그림이다.

JavaScript는 이벤트 루프를 이용해서 비동기 방식으로, 동시성을 지원한다.

이벤트 루프에서는 이벤트가 발생 시 호출되는 콜백 함수들을 태스크 큐에 전달하고
태스크 큐에 담겨있는 콜백 함수들을 콜스택에 넘겨준다.

이벤트 루프가 태스크 큐에서 콜스택으로 콜백 함수를 넘겨주는 작업은 콜스택에 쌓여있는 함수가 없을 때만 수행된다.

태스크 큐에서는 web api에서 비동기 작업들이 실행된 후 호출되는 콜백함수들이 대기하는 공간이며 이벤트 루프가 정해준 순서로 들어가 있다.(FIFO 방식)

Web API는 브라우저에서 자체 지원하는 api이다.
Web API는 DOM이벤트, AJAX, setTimeout 등의 비동기 작업 등을 수행할 수 있도록 api를 지원하는 것이다.

런타임 환경에서 JavaScript 코드가 실행 될 때 Web API가 지원하는 비동기 작업을 수행하는 코드는

코드가 호출 스택에 쌓인 후 실행되며 JavaScript 엔진은 비동기 작업을 Web API에 위임한다.
Web API는 해당 비동기 작업을 수행하고, 콜백 함수를 이벤트 루프를 통해서 태스크 큐에 넘겨주게 된다.
이벤트 루프는 콜스택이 비어있는지 확인하고 비어있을 때 태스크 큐에서 대기하고 있던 콜백 함수를 콜스택으로 넘겨준다.
콜스택에 쌓인 콜백함수가 실행되고 콜스택에서 제거된다.