자바스크립트의 이벤트 루프는 자바스크립트가 싱글 스레드 기반 언어임에도 불구하고 비동기 작업을 처리할 수 있게 해주는 중요한 메커니즘입니다.

자바스크립트는 기본적으로 한 번에 하나의 작업만 처리할 수 있습니다. 하지만 이벤트 루프가 콜 스택과 태스크 큐를 매개하면서 비동기 작업이 완료되면 그 결과를 처리할 수 있게 도와줍니다. 여기서, 콜 스택은 현재 실행 중인 함수들이 쌓이는 곳이고, 태스크 큐는 비동기 작업이 완료될 때 그 결과를 대기시키는 곳입니다.

이벤트 루프의 동작을 설명하기 위해 간단한 예로 setTimeout(callback, 0)을 들어 보겠습니다. setTimeout(callback, 0)을 호출하면, 이 콜백 함수는 바로 실행되는 것이 아니라 웹 API에 의해 타이머가 설정되고, 그 타이머가 0밀리초 후에 만료되면 콜백 함수가 태스크 큐에 추가됩니다. 그 후 콜 스택이 비어 있는 시점에 이벤트 루프가 태스크 큐에서 대기 중인 callback을 꺼내서 실행합니다.

따라서 setTimeout(callback, 0)을 호출해도 현재 실행 중인 모든 동기 작업들이 완료된 후에야 그 콜백이 실행됩니다. 이 때문에 setTimeout(callback, 0)을 사용하면 코드의 실행을 다음 이벤트 루프 사이클로 미뤄집니다.

이와 같이 이벤트 루프는 자바스크립트의 비동기 작업을 처리하는 데 있어서 매우 중요한 역할을 합니다. 이벤트 루프 덕분에 자바스크립트는 UI 업데이트나 사용자 입력 처리를 수행하면서도, 비동기 작업을 블로킹 없이 효율적으로 처리할 수 있습니다.

앞서 말씀하신 태스크 큐의 종류에는 무엇이 있나요? 🤔

태스크 큐는 매크로태스크 큐와 마이크로태스크 큐로 나뉩니다.

매크로태스크 큐는 setTimeout(), setInterval()과 같은 일반적인 비동기 작업들이 대기하는 큐입니다. 매크로태스크 큐의 작업은 이벤트 루프가 콜 스택과 마이크로태스크 큐의 작업을 모두 처리한 후, 하나씩 처리합니다.

마이크로태스크 큐는 Promise.then()과 같이 중요도가 높은 작업들이 대기하는 큐입니다. 마이크로태스크 큐는 매크로태스크 큐보다 우선순위가 높습니다. 이벤트 루프는 콜 스택이 비어있는 시점에 매크로태스크를 실행하기 이전에 마이크로태스크 큐에 있는 모든 작업들을 먼저 처리합니다.

이처럼 태스크 큐는 크게 마이크로태스크 큐와 매크로태스크 큐로 이뤄져 있으며, 마이크로태스크 큐 작업은 매크로태스크 큐 작업보다 우선적으로 실행됩니다.