Table of contents
- The Basics: Call Stack and JavaScript Engine.
- Web APIs: Bringing Call Stack to Superpowers
- Understanding web APIs
- The Event Loop Is Introduced
- Demonstrating the Event Loop
- Callback Queue and Its Importance
- Microtask Queue: Priority System
- Fetch Behaviour and Microtask Priority
- Conclusion: Knowing Asynchronous JavaScript.
In the dynamic world of web development, the ability to leverage the power of asynchronous JavaScript is essential. This piece of writing takes you on an educational trip, exposing the complexities of Asynchronous JavaScript and simplifying the frequently confusing idea of the Event Loop.
The Basics: Call Stack and JavaScript Engine.
Time, tide, and JS(JavaScript) do not wait for anyone. The Call Stack, a key component of the JS Engine, runs any execution context that enters it. But what about the other superpowers the browser has?
Web APIs: Bringing Call Stack to Superpowers
The browser provides a variety of superpowers, like local storage, timers, geolocation access, fetch and more. Web APIs can help bridge the gap between the call stack and these capabilities.
Understanding web APIs
Web APIs, which are not inbuilt in JavaScript, enable the call stack to exploit browser superpowers. Examples include setTimeout(), DOM APIs, get(), and localStorage. These functions are accessed via the global object "window".
console.log("Start");
setTimeout(function cb() {
console.log("Timer");
}, 5000);
console.log("End");
// Output: Start, End, Timer (after 5 seconds)
The Event Loop Is Introduced
How can we ensure that callbacks are executed on time now that we have Web APIs in place? Enter the Event Loop, a gatekeeper that monitors the Callback Queue for pending jobs and moves them to the call stack.
// Accessing superpowers through the global object(window)
window.setTimeout(function cbT() {
console.log("Callback Timeout");
}, 5000);
window.fetch("https://api.netflix.com").then(function cbF() {
console.log("Callback Netflix");
});
Demonstrating the Event Loop
Let us deconstruct a code excerpt to see the Event Loop in action. Every step, from creating the Global Execution Context to executing callbacks, is critical to understanding JavaScript's asynchronous behaviour.
console.log("Start");
document.getElementById("btn").addEventListener("click", function cb() {
console.log("Callback");
});
console.log("End");
Callback Queue and Its Importance
Why does the callback queue exist? Consider this scenario: a user clicks a button many times. The Event Loop guarantees that all callbacks from those clicks are executed efficiently, avoiding potential delays.
Microtask Queue: Priority System
Not all tasks are created equally. The Microtask Queue, which has a higher priority than the Callback Queue, handles callback functions from Promises and Mutation Observers quickly. Understanding this priority scheme is critical for efficient code execution.
Fetch Behaviour and Microtask Priority
Analyse the behaviour of fetch together with the Microtask Queue. Asynchronous processes, such as waiting for data from external services, show the complex interaction between the Callback Queue and the Microtask Queue.
console.log("Start");
setTimeout(function cbT() {
console.log("CB Timeout");
}, 5000);
fetch("https://api.netflix.com").then(function cbF() {
console.log("CB Netflix");
}); // take 2 seconds to bring response
// millions lines of code
console.log("End");
Observing Event Loop, Callback Queue, and Microtask Queue [GiF]:
A mesmerising GIF depicts the complicated dance of the Event Loop, Callback Queue, and Microtask Queue. Gain a better knowledge of how these components interact naturally.
Conclusion: Knowing Asynchronous JavaScript.
It is critical for developers to understand the complications of Callback and Microtask Queues, as well as the Event Loop. This post attempted to clarify these ideas and lay a solid foundation for understanding JavaScript's asynchronous ecosystem.
