자바스크립트는 단일 스레드 언어이기 때문에 한 번에 하나의 작업만 실행할 수 있다.
JS가 실행되는 과정에서 함수가 호출되면 해당 함수가 콜스택에 올라갔다가 실행이 끝나면 바로 빠져나간다. 만약 오래 걸리는 작업이 콜스택에서 실행되고 있다면, 단일 스레드로 동작하는 JS는 그 시간 동안 다른 이벤트나 렌더링을 처리할 수 없기 때문에 화면이 얼어버리거나 사용자 이벤트가 즉시 처리되지 않는 문제가 발생한다.
이를 해결하기 위해 브라우저는 JS 엔진과 함께 비동기 처리 구조를 제공한다.
-
사용자가 버튼 클릭이나 스크롤 같은 이벤트를 발생시키면, 해당 이벤트를 처리하는 함수가 콜스택에 올라가 실행된다.
-
이 과정에서 setTimeout 같은 비동기 함수가 호출되면 JS 엔진이 직접 기다리는 것이 아니라 브라우저(Web API)에게 작업을 위임한다.
-
브라우저는 넘겨받은 작업을 백그라운드에서 처리한 뒤,
작업이 완료되면 실행 준비가 된 콜백 함수를 콜백 큐에 넣어 대기시킨다. -
그리고 이벤트 루프가 콜스택이 비어 있는지 지속적으로 감시하다가,
콜스택이 비어 있는 순간 콜백 큐에 있는 함수를 콜스택으로 이동시켜 실행한다.
여기서 콜백 큐는 큐니까 FIFO가 기본적으로 맞지만, 자바스크립트에는 큐가 하나가 아니라 여러 종류가 있다. 예를 들어 Promise.then, catch처럼 마이크로태스크 큐, setTimeout처럼 매크로태스크 큐가 따로 존재한다.
따라서, 콜스택이 비면 이벤트 루프는 먼저 마이크로태스크 큐를 전부 FIFO로 처리한 뒤, 그 다음 매크로태스크 큐에서 FIFO로 하나씩 가져와 실행한다.
이 구조 덕분에 자바스크립트는 단일 스레드임에도 긴 작업으로 인해 전체 실행이 막히지 않고, UI 또한 멈추지 않고 부드럽게 동작할 수 있다.
