자바스크립트 런타임 환경에서는 자바스크립트만으로는 할 수 있는 것이 너무 한정적입니다. 하지만 Web APIs 를 이용하게 되면 많은 것을 할 수 있게 해 주는데, Web APIs 는 브라우저에서 제공하는 API이기 때문에 브라우저의 멀티쓰레딩을 이용해서 조금 더 다양한 일들을 동시에 실행할 수가 있습니다. 그 중에 대표적으로 fetch를 이용해서 백엔드에서 데이터를 받아 온다든지 setTimeout 을 이용해서 일정 기간의 시간이 지난 다음에 우리가 등록한 콜백 함수를 실행하는 등 기능을 제공해 준다.
자바스크립트 런타임 환경에서 코드를 한 줄 한 줄 읽으며 JavaScript 코드 수행 시
자바스크립트 엔진은 Call Stack에 등록되어 LIFO(Last In First Out) 방식으로 코드를 실행하게 되며,
코드에서 Web API 호출 시 브라우저 런타임 환경에서 Web APIs에 등록되어 있다가 Task Queue에 등록되어 FIFO(First In First Out) 방식으로 Call Stack으로 이동하게 되고 Web API의 콜벡 함수를 실행하게 됩니다.
단 Call Stack으로 이동을 하려면 Call Stack이 모두 수행되어 비어있어야 Task Queue에서 Call Stack 으로 이동이 가능합니다.
그리고 Call Stack 이 비어있는지 실시간으로 확인을 해 주어야 하는데 이렇게 Task Queue 와 Call Stack 을 관찰하는 아이가 하나 있는데 바로 Event Loop 입니다. 이 Event Loop 는 계속 빙글빙글 돌면서 Call Stack 과 Task Queue를 관찰하는 아이입니다.
[ Call Stack ]
→ Event Loop 는 Call Stack 안에서 실행 중인 작업이 있다면 해당 작업이 완료가 될 때까지 기다리고 있다가 완료가 되어야 다시 Loop를 돌기 시작합니다.
[ Task Queue ]
→ Call Stack 안이 비어있으면 Task Queue 안에 여러 Web API 콜벡 함수가 존재하여도 Event Loop 가 돌면서 Call Stack으로 하나씩 Web API 콜벡 함수가 이동하게 되어 콜벡 함수가 실행이 되고, 다음 Task Queue 의 Web API는 다음 번 Event Loop가 돌면서 Call Stack안이 비어있으면 똑같이 콜벡함수를 Call Stack 으로 이동시켜 수행하게 된다.
[ Microtask Queue ]
→ Micro task는 이벤트루프가 한번 Micro queue에 방문하면 그 큐에 있는 모든 아이들을 하나씩 꺼내와서 다 실행할때까지 계속 머물러요. 한번 돌때마다 하나씩만 Task Queue를 꺼내오는 Call Stack과 이것이 다른점 입니다.
[ Event Loop ]