- call stack: All operations to be executed in a JS code is pushed, in a sequence, onto the call stack. As each operation(block of code) gets executed, they are popped from the call stack
- browser API: Consists of DOM API’s, AJAX API’s and Timeout API’s(like setTimeout()). The relevant browser API is called whenever an async function is invoked from code. The execution of the async code is outsourced to the corresponding browser API.
- Event Loop: Monitors the event/message queue for pending events and pushes them on to the call stack when time is allotted by the call stack. Event Loop synchronizes the call stack with the event/message queue.
- Whenever an async function is invoked, assuming a callback function is defined which is triggered on async code completion, the corresponding browser API is called and now, the browser/runtime manages that piece of code.So, the async code is popped from the call stack, thus allowing other code snippets to execute without getting blocked.
- When computation of async code happens, it gets stored in the event queue/message queue.
- The message queue/event-queue is a medium(acts as a sort of to-do list) where the browser/runtime registers any async code(callback function, promises, etc) to be executed once it has time for it.
- Once the call stack allows us time, the callback function/promise which was registered in the event/message queue, is pushed into the call stack. This synchronization of the call stack with the event/message queue is done using the Event Loop.
- The Event Loop monitors the message queue for pending callbacks and pushes it onto the call stack when it has time(or call stack is empty).
- Once the async code snippets complete their execution, they are popped from the call stack.