JavaScript
Tutorial
In one of the previous articles, we delved into the fundamentals of the JavaScript engine, covering essential language features such as calculations and loops. However, the world of JavaScript is far more intricate, especially when it comes to handling asynchronous code and utilizing browser-provided objects. To navigate this complexity, we'll dive into the JavaScript runtime environment, which comprises Web API, Task Queue, and the Event Loop.
Browser API
Browser Provides Features Beyond the JavaScript Engine
The Web API, also known as the Browser API, is an essential part of the runtime environment provided by the browser. It's separate from the JavaScript engine but allows you to interact with browser features using JavaScript. Some aspects of the Web API include its facilitation of concurrent operations external to the JavaScript interpreter, despite JavaScript's inherent single-threaded nature.
When a function call involves asynchronous operations, like making an HTTP request, setTimeout, or handling events, the JavaScript engine delegates the handling of these operations to the browser's corresponding API (e.g., XMLHttpRequest or Fetch API) instead of blocking the call stack and waiting for the operation to complete (which would freeze the browser interface). Along with delegating the task, the engine also registers a callback function to be executed once the operation completes or an event occurs. Upon completion, when a timer reaches its designated time, or upon a user's click event, the corresponding callback is typically dispatched to the Task Queue.
Examples of Web APIs
Document Manipulation: Utilizing the DOM (Document Object Model) for interactive web content manipulation and organization.
In Node.js, there are no browser-provided Web APIs. Instead, Node.js presents a distinct set of APIs unrelated to browsers. These encompass functionalities for file system operations, network communication, and more. As Node.js is primarily utilized for server-side JavaScript applications, its APIs are specifically designed for that environment.
Task Queue
The Task Queue functions as a message queue where each message corresponds to an associated function for execution. Here are its key characteristics:
The Task Queue is sometimes referred to as the "Event Queue" or "Callback Queue." Tasks are added to this queue when an event triggers a callback or when a specified timeout/interval expires.
Microtask queue
The Microtask Queue is similar to the task queue but has higher priority. It handles Microtask callbacks, including promise handlers and mutation observers.
Microtasks consist of concise functions executed after the parent function or program finishes, but only when the Call Stack is clear. Some essential aspects of microtasks include:
Event loop
The Event Loop stands as a crucial element within the JavaScript runtime environment, functioning in the following manner:
Code
1// Event loop algorithm
20. Dequeue and execute the oldest task from the task queue.
31. Execute all Microtasks:
4 - While the microtask queue is not empty:
5 - Dequeue and execute the oldest microtask.
62. Render any pending changes.
73. If the task queue is empty, wait for a new task.
84. Go back to step 1.
In Node.js, the Event Loop shares similarities with the browser environment, yet it diverges in its handling of I/O operations and event-driven code. Node.js leverages a unique array of modules like fs for file system operations and http for constructing HTTP servers, pivotal to its event-driven architecture while maintaining the core concepts of the Event Loop and Task Queue.
Conclusion
Exploring how JavaScript works behind the scenes revealed a bunch of moving parts. There's the Web API that helps JavaScript do more than it could on its own, handling tasks like fetching data or dealing with graphics. Then there's the Task Queue and Microtask Queue, kind of like waiting lines for different jobs. The Event Loop is like a supervisor, making sure tasks get done in the right order without things getting stuck. In a different world called Node.js, it's similar but has its own special tools for handling stuff. Understanding how all this works helps folks build cooler and faster websites and apps that keep up with the ever-changing web.
References