Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
Single thread model of JavaScript
3.
The Event Loop
4.
Basic Architecture
5.
Example
5.1.
Approach 1
5.2.
Output
5.3.
Approach 2
5.4.
Output
6.
Micro tasks within an Event Loop
7.
Macro tasks within an Event Loop
8.
Frequently Asked Questions
8.1.
What criteria does the event loop use to determine which function to execute next?
8.2.
 
8.3.
Is it guaranteed that if you ask the event loop to run a function at a specific time (as with setTimeout in Javascript), it will?
8.4.
 
8.5.
In JavaScript, what are closures?
8.6.
 
8.7.
In JavaScript, what are async functions?
9.
Conclusion
Last Updated: Mar 27, 2024
Easy

Event Loop in JavaScript

Master Power BI using Netflix Data
Speaker
Ashwin Goyal
Product @
18 Jun, 2024 @ 01:30 PM

Introduction

The Event Loop is the foundation of asynchronous programming in JavaScript.

The asynchronous behaviour is constructed on top of the core Javascript language in the browser (or programming environment) and accessed using the browser APIs rather than being part of the language itself.

Here we will learn about Event loops in Javascript in a detailed version.

Single thread model of JavaScript

All actions in JS are performed on a single thread. However, we can give the appearance of multi-threading by employing a few clever data structures.

The programming language JavaScript is single-threaded. This means that JavaScript can only do one thing at any given time.

A script is executed by the JavaScript engine, starting at the top of the file and working its way down. In the execution phase, it constructs execution contexts and pushes and pops functions onto and off the call stack.

If a function takes a long time to perform, you won't be able to interact with the web browser while it's running since the page will hang. The term "blocking function" refers to a function that takes a long time to perform.

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

The Event Loop

The runtime model of JavaScript is based on an event loop, which executes the code, collects and processes events, and performs queued sub-tasks. This model differs significantly from models written in other languages such as C programming and Java.

The event loop is a pretty simple concept. There is an eternal cycle in which the JavaScript engine waits for tasks, executes them, and then sleeps while waiting for more.

The engine's overall algorithm is as follows:

Step 1: Execute the duties as soon as possible, starting with the oldest.

Step 2:  Sleep till an assignment appears. As soon as the task seems, go to step 1.

Most of the time, the JavaScript engine does nothing; it only executes when a script/handler/event is activated. 

Basic Architecture

As previously stated, the JavaScript engine can only perform one task at a time. It's more precise, however, to say that the JavaScript runtime can only accomplish one thing at a time.

Other than the JavaScript engine, the web browser has additional components.

The web browser can do concurrent and asynchronous actions when you use the setTimeout() function, make a fetch request, or click a button.

The web browser's Web APIs include setTimeout(), fetch requests, and DOM events.

The JavaScript engine places the setTimeout() method on the call stack in our example, and the Web API establishes a timer that expires in one second.

Callbacks are functions that can be provided to another function as an argument. After an event has occurred, the callback function can be invoked from the function to which it was provided (caller).

The task() function is then placed in a queue called a callback queue or a task queue by the JavaScript engine:

The event loop is a continuous operation that keeps track of the callback queue and the call stack.

If the call stack isn't empty, the event loop waits until it is, then adds the following function from the callback queue. Nothing will happen if the callback queue is empty:

Example

To understand the working of the event loop, consider the following example:

Approach 1

console.log('Welcome Reader!');
setTimeout(() => {
    console.log('Execute it immediately.');
}, 1);
console.log('Bye Reader!');

Output

Let's take a glance at another example to see what happens when we run the following code in a browser:

Approach 2

console.log('Start!');
setTimeout(() => {
    console.log('Execute it immediately.');
}, 0);
console.log('End!');

Because the timeout, in this case, is 0 seconds, the message 'Execute it immediately.' should show before the message 'End!' .That is not the case.

When the call stack is empty, the JavaScript engine places the following function call on the callback queue and runs it. In other words, it is executed by the JavaScript engine after console.log('End!').

Output


You can compile with the help of Online Javascript Compiler for better understanding.

Micro tasks within an Event Loop

A micro-task is a function performed after the operation or programme that produced it has exited and only if the JavaScript execution stack is empty, but before the user agent returns control to the event loop that drives the script's execution environment. A micro-task has the ability to en-queue other micro-tasks.

Micro-tasks are frequently scheduled for tasks that must be accomplished shortly after the current script is completed. The event loop moves on to the micro-task queue after completing one macro-task. The event loop will not move on to the next task outside of the micro-task queue until all of the tasks in the micro-task queue have been finished. This indicates that the micro-task queue is more crucial.

Mutation observer callbacks and promise callbacks are examples of micro-tasks.

Macro tasks within an Event Loop

A macro-task is a separate and independent piece of work. The JavaScript code is always executed here, and the micro-task queue is always empty. 

The macro task queue is typically considered the task queue or the event queue.

But the task queue is used for synchronous statements, whereas the macro-task queue is utilised for asynchronous statements.

No code in JavaScript is allowed to run until an event has occurred. It's worth noting that the execution of JavaScript code is a macro-task in and of itself.

Frequently Asked Questions

What criteria does the event loop use to determine which function to execute next?

There's a queue. When functions are ready to run, they are pushed onto the queue, and the event loop then performs them in order.

 

Is it guaranteed that if you ask the event loop to run a function at a specific time (as with setTimeout in Javascript), it will?

No, the event loop will do its best, although functionality may sometimes be delayed.

 

In JavaScript, what are closures?

Closures refer to a function's capacity to access variables and functions lexically outside its scope. When new functions are generated, closures are formed with references to their surrounding states.

 

In JavaScript, what are async functions?

To add asynchronous, promise-based behaviour without explicitly using a Promise, the User can use Async functions.

Conclusion

In this article, we have extensively discussed the Single-threaded Model of JavaScript, the Event loop in JavaScript, its Working, and Examples. We also discussed Micro and Macro tasks within the Event Loop.

We hope this blog has helped you enhance your knowledge regarding event loops in Javascript. You can learn more about JavaScript by visiting the free Javascript tutorial by Coding Ninjas.  You can also learn how to create a quiz app using Javascript.

Do upvote our blog to help other ninjas grow.

Head over to our practice platform Coding Ninjas Studio to practice top problems, attempt mock tests, read interview experiences, and much more!!

We wish you Good Luck! Keep coding and keep reading Ninja!!

 

Live masterclass