Learning How, instead of having a Single-threaded nature of JavaScript, it is able to perform multi-threading operations and the role of the Event loop.
We all know that JavaScript is a single-threaded language i.e. it executes a piece of code one at a time, however, it is able to execute multi-threading operation with the help of the JavaScript event loop mechanism.
Representation of How JavaScript Works on Web Browser
Before moving forward, let us look at the high-level overview abstraction of how javascript interacts with Web Browser
Fig.1.1 Event Loop Mechanism & Interaction with web_browser.
Main component Includes
Call Stack
a. Because of this call, Stack JavaScript can execute one piece of code at a time, because it has only one call stack.
b. This call stack mechanism helps JavaScript to keep track of the functions that scripts call.
c. Every time a script or function calls a function, it's added to the top of the stack. The interpreter removes the function from the call stack every time it exits.
d. Below is a small representation of how the function calls are added to the top of the stack.
Fig 1.2 Code Snippets & Call Stack Mechanism in LIFO manner
e. Every time a function calls another function, it's added to the top of the stack, on top of the calling function. The order in which the stack processes each function call follows the LIFO principle (Last In, First Out).
f. the file loads and the main() function is being called, which stands for the execution of the entire file. This function is added to the call stack.
g. main() calls Addition(), which is why it is added to the top of the call stack.
h. Addition() calls Three(), which again is added to the call stack.
i. Three() calls Two(), which again is added to the call stack.
j. One() doesn't call any other functions. When it exits, it is removed from the call stack.
k. With the result of One(), Two() exits as well and is being removed from the call stack.
l. Three() is being removed as well.
m. Addition() calls Three(), which adds it to the call stack.
n. Two() calls One() and adds it to the call stack.
o. One() exits and is being removed from the call stack.
p. Two() exits and are being removed from the call stack.
q. Addition() can exit now with the result Three() and Two () and is being removed from the call stack.
There are no further statements or function calls in the file, so main() exits as well and is being removed from the call stack.
Heap
The JavaScript heap is where objects are stored when we define functions or variables.
Since it does not affect the call Stack and the Event loop, it is out of bound for the this article.
Web APIs
As we all know JavaScript code can perform one piece of instruction at a time, While this true for JavaScript Language, we can concurrently do a lot of things through the web_Browser, this is only possible by the APIs which the web Browser Provides.
web browsers give us APIs that we can call in our JavaScript code. The execution, however, is handled by the platform itself, which is why it won't block the call stack.Another advantage of web APIs is that they are written in lower-level code (like C), which allows them to do things that simply aren't possible in plain JavaScript.
Callback queue
In such a context, a callback queue (often referred to as an event queue or message queue) is a data structure used to manage asynchronous operations and callbacks in a program. It's commonly used in event-driven programming and is essential for handling tasks that need to be executed at a later time or after a specific event occurs.
Callback Registration: When an asynchronous operation is initiated, such as making an HTTP request, reading a file, or setting a timer, a callback function is often provided. This callback function specifies what should happen once the asynchronous operation is complete or when a specific event occurs.
Queueing Callbacks: When the asynchronous operation is finished or the event it's waiting for occurs, the associated callback function is placed in the callback queue.
whenever the eventloop find the Call Stack Empty it simply pushes the Task from the Call back Queue towards the call stack for the Code Execution.
This mechanism allows for non-blocking, asynchronous programming in languages like JavaScript and is crucial for building responsive and efficient applications, particularly in scenarios where I/O operations or long-running tasks are involved.
Event loop
Fig 1.3 Event Loop Mechanism and Callback Queue(FIFO manner)
The JavaScript event loop takes the first call in the callback queue and adds it to the call stack as soon as it's empty.
JavaScript code is being run in a run-to-completion manner, meaning that if the call stack is currently executing some code, the event loop is blocked and won't add any calls from the queue until the stack is empty again.
Therefore it is necessary not to add the long-running logic inside the call Stack as it Clogs up the Call Stack and your Code Execution becomes lower, This Makes your site performance hampers in many ways.
Conclusion
I hope that you got a Clear Understanding of how the Event Loop Mechanism of JavaScript Helps in performing Multi-Threading operations
and achieving Concurrency instead of JavaScript being Single-Threading in nature, and how the JavaScript Mechanism helps it to manage the asynchronous operation as well.
please leave a comment if you have any questions or feedback.
I've learned this stuff on the internet as well, Here are the resources given.
%[youtube.com/watch?v=8aGhZQkoFbQ&feature..