Event Loop in JavaScript — JavaScript Interview Questions & Answers — Part 6
Understanding how the event loop works is essential to mastering JavaScript. In this article, we will deep dive into the event loop, different types of tasks in JavaScript.
Event Loop manages the execution of asynchronous callbacks.
console.log("start");
setTimeout(function (){
console.log("timer");
}, 5000);
fetch("https://api.netflix.com")
.then(() => {
console.log("netflix");
});
console.log("end");First, start is printed because console.log(“start”) executes synchronously.
Next, setTimeout() is executed. Its callback is registered with the Web API environment, and the 5-second timer starts. JavaScript does not wait for those 5 seconds; it immediately moves to the next line.
Then fetch() is executed. The browser handles the network request through the Web API environment and waits for the response from the server. JavaScript again does not wait for the response and moves to the next line. Finally, end is printed.
Suppose the Netflix server responds after 1 second. The callback attached to the fetch() promise becomes a micro-task and is placed into the micro-task queue. The micro-task queue has higher priority than the callback/task queue. Therefore, after all synchronous JavaScript code has finished executing and when call stack is empty, the event loop first processes the micro-task queue before processing tasks from the callback queue. So, after 1 second, the fetch() callback executes and prints Netflix.
After 5 seconds, the setTimeout() callback becomes ready and is placed into the callback/task queue. When call stack is empty and the micro-task queue has no pending tasks, the event loop moves the setTimeout() callback to the call stack, where it executes and prints timer.
Micro-task Queue vs Callback Queue
The micro-task queue has higher priority than the callback queue (task queue). Callbacks associated with Promises, such as .then(), .catch(), and .finally() are placed into the micro-task queue. MutationObserver callbacks are also handled as micro-tasks.
Callbacks from APIs such as setTimeout(), setInterval(), and DOM event listeners are placed into the callback/task queue.
When the call stack becomes empty, the event loop first processes the pending micro-tasks. It continues processing micro-tasks until the micro-task queue becomes empty. Only then it takes a task from the callback/task queue and put it onto the call stack. For example, if there are three pending micro-tasks, the event loop processes all three micro-tasks before taking the next task from the callback queue.
Get Beyond Coding’s stories in your inbox
Join Medium for free to get updates from this writer.
When does the Event loop starts?
The event loop is continuously running as part of the JavaScript runtime environment. It is responsible for checking whether there are pending tasks in the queues and whether the call stack is empty.
Are only asynchronous web API callbacks are registered in the web API environment?
Yes, only callbacks associated with asynchronous operations go through the runtime environment and queues. Synchronous callbacks, such as callbacks passed to map(), filter(), and reduce(), are not registered in the Web API environment.
Blocking the Main Thread:
Every piece of JavaScript code runs on the call stack. If some operation blocks the call stack, it is known as blocking the main thread. For example, suppose function x() takes a very long time to execute. JavaScript won’t be able to execute other JavaScript code on that thread until x() finishes because JavaScript has only one main thread. That is why we should avoid blocking the main thread with long-running synchronous operations. We should use asynchronous APIs for operations that involve waiting, such as: Timers, File operations in Node.JS
Web APIs:
setTimeout(), DOM APIs such as document.getElementById(), fetch(), localStorage, and console are not part of the JavaScript language itself. They are APIs provided by the browser environment and are commonly referred as Web APIs. The browser provides a JavaScript engine to execute JavaScript code. In addition to the JavaScript engine, the browser provides Web APIs that JavaScript can interact with. In the browser, window is the global object. Browser-provided APIs and global properties are exposed through the window object.
