Revelations: How JavaScript Works Behind The Scenes — part 03
In the first two articles of this series, we understood some important concepts in JavaScript. We learned how JavaScript converts into Machine code and all the steps involved in the process, how JavaScript runtime and JavaScript Engine works to execute the JavaScript code.
In this third article of the series, we will be learning some more important concepts. Today I’ll be explaining how event loop, and Web Apis works.
In the last article, I explained that JavaScript Runtime Environment, in the context of a browser, contains JavaScript Engine, Web API, Callback Queue, Job Queue, and Event Loop. Now let’s understand how the Event loop works together with the callback queue and job queue to achieve non-blocking concurrency behavior in JavaScript.
Event Loop and Callback Queue
If you do remember I mentioned in my previous articles that JavaScript has a single call stack which makes it single-threaded and cannot execute two statements simultaneously. The concurrency model in JavaScript is how JavaScript handles multiple tasks happening at the same time and this model is based on the Event Loop. this is how modern JavaScript achieves its non-blocking behavior.
it is important to keep in mind that the concurrency model in JavaScript is quite different from models in other languages such as Java and C.
To prevent the blocking behavior of JavaScript, the browser environment has various web APIs which JavaSciprt can access asynchronously.
** client-side JavaScript in the browser environment uses Web APIs and Server-side Node.js uses its own C++ APIs.
Now Let’s try to understand how all these concepts work together to achieve non -blocking concurrency behavior in JavaScript.
When a program execution started only one line will be executed at a time as javascript is single-threaded (has only one call stack). So it will go from one line to another executing each line of code. While executing code line by line if it comes across any time-consuming tasks such as timers, API calls it knows that these are web APIs and gives it to the browser to handle the execution. In that case, the javaScript runtime pops the time-consuming code out of the call stack and adds the next line of code to the call stack to execute.
While all the other lines of codes getting executed, time-consuming codes will be completed in the background and the browser then pushes the callback function of each time-consuming function to the callback queue.
While all these happening the event loop keeps running continuously, checking the main stack (call stack) to find out whether there is any code inside it. Once the event loop has detected that the call stack is empty (all the synchronous code has been executed) then it checks the callback queue. If there are any callbacks in the queue event loop will then send those the call stack one after another for the execution.
However, there is one important thing to remember.
Apart from the callback queue, there is another queue which is called as job queue in the event loop model. In JavaScript, not all callbacks are created with the same priority. There are two types of tasks (callbacks) known as micro-tasks (Jobs) and macro tasks (Tasks).
Macro tasks are tasks such as setInterval, setTimeout..etc while Promises are Micro Tasks. Job Queue stores the Micro tasks and callback queue (task queue) stores Macro tasks.
ES6 introduced this new concept, Job Queue which is a mechanism to execute the results of asynchronous functions sooner than the other tasks in the queue. then() in promise will be added to the job queue once the promise has been resolved.
Job queue has a high priority when it comes to executing callbacks. Once the main stack is empty event loop first checks the Job Queue and completed the execution of all the callbacks in the Job Queue before checking the Callback queue(Task Queue)
Browser API (Web API)
A browser API can extend the functionality of a web browser. All browsers have a set of built-in web APIs to support complex operations.
- DOM — this is the API to manipulate HTML documents loaded into the browser
- XMLHttpRequest, Fetch API — these APIs are used to fetch data from servers
This is a list of all the Web APIs that are available
Key Points To Remember
- Non-blocking — the execution of a particular code which takes more time to execute (XMLHttpRequest, setTimeout), should not stop the whole program execution and make the browser unresponsive.
- Asynchronous — multiple tasks can be done simultaneously.
- Callback — this is a function that passes as an argument to another function. We can call it right after a certain task is completed. Callbacks are not asynchronous by default.
- Callback Queue — this is where all the macro tasks code goes. These are the callback function from HTML events, timers..etc
- Job Queue — this is where all the Micro tasks code goes. Job Queue has high priority when it comes to executing callbacks
- Event Loop — this checks the main stack continuously and detects when the stack is empty. Then it first checks the Job Queue and if there is any code event loop will push that code block to the main stack. After the Job Queue code has been executed event loop then check the Task Queue and if there is any code event loop will push that code block to the main stack for the execution.
In order to visualize how the event loop works, you can checkout out Loupe Event loop Visualizer by Phillip Roberts
You can read the previous articles of the series here
At Apium Innovations we build world-class software products while following the best practices in JavaScript, follow us to learn more.
Thank you for reading!
