Before knowing what is Event Loop, we need to understand the nature of Javascript.
As we all know that JavaScript is a Single-threaded language which means that it can excecute only a single line code at a time unlike other programming languages like C++/Java.
Javascript engine excecutes the code from top to bottom. It creates an execution context, and inserts, removes the function in and out of the call stack while the code is getting executed.
While the code is getting executed if it strikes a function that performs a very long task then rest of the code cannot be executed until the current function is not completed its execution.
Lets take an example to understand this point -
- Explaination:
- Output of the code:
Start of the program
program completed
- In this code, we can see that the first console.log() printed as soon the code started to geeting execute but inside the function runner(), the while loop blocks the execution the last console.log(), this a perfect example which explains that javascript is single-threaded language.
- To solve this problem event loop comes into picture with the help of which Javascript performs asynchronous tasks/operations and creates an illusion of multi-threading.
Components of a Web Browser -
- JavaScript Runtime
- Heap Memory
- Call Stack
- Web APIs
- Event Loop
- Queues:
- MicroTask Queue
- MacroTask Queue (aka. Callback Queue)
Entry of Callback functions
To prevent a blocking function from blocking other activities, we typically put it inside a callback function to execute it after all other activities are are performed by the code.
Now, you are wondering that what the heck is a Callback function?
As mentioned that earlier that Web browser have other components as well other than JS Engine.
To Understand Callback function lets take an example.
- When you call the setTimeout() function, make a fetch request, or click a button, the web browser can do these activities concurrently and asynchronously.
- The setTimeout(), fetch requests and DOM events are parts of the Web APIs of the web browser.
- In our example, when calling the setTimeout() function, the JavaScript engine places it on the call stack, and the Web API creates a timer that expires in 1 second, till then rest of the code gets executed.
- Then JavaScript engine places the task() function into a queue called a callback queue or a task queue.
This is where Event Loop comes into picture
- The Event loop facilitates this process,
- It constantly checks whether or not the call stack is empty. If it is empty, new functions are added from the event queue. If it is not, then the current function call is processed.
Hope the topic was cleared and now you have a better understanding of Event loop in JavaScript
Thankyou
Top comments (0)