Understanding Asynchronous Javascript and EventLoop

Photo by Jess Bailey on Unsplash

Understanding Asynchronous Javascript and EventLoop

🔥Asynchronous Javascript & Event Loop🔥

·

6 min read

Table of contents

No heading

No headings in the article.

Javascript is a synchronous and a single-threaded language then why it is changed to asynchronous or what the hell is the event loop. These two are the most important topics we are going to discuss in this article.

Asynchronous Javascript:

Asynchronous JavaScript is a programming paradigm that allows code to run concurrently, without blocking the execution of other code. In contrast to synchronous code, which executes in a sequential, blocking manner, asynchronous code executes independently of other code, allowing for improved performance and responsiveness in web applications.

Asynchronous JavaScript is particularly useful in web development, where code often needs to interact with external resources, such as servers or databases, which can cause delays and slow down the execution of code. By using asynchronous techniques, developers can avoid these delays and allow other code to continue executing while waiting for the resource to become available.

One common technique for implementing asynchronous JavaScript is through the use of callbacks. A callback is a function that is passed as an argument to another function, and is executed after that function completes. For example, the following code uses a callback to perform an asynchronous operation:

setTimeout(function() {
  console.log('This code will be executed after a 3 second delay.');
}, 3000);

In this example, the setTimeout function is called with a delay of 3 seconds, and a callback function that logs a message to the console. After the delay has elapsed, the callback function is executed, allowing other code to continue executing in the meantime.

Another technique for implementing asynchronous JavaScript is through the use of promises. A promise is an object that represents the eventual completion or failure of an asynchronous operation, and provides a mechanism for handling the result of that operation. For example, the following code uses a promise to perform an asynchronous operation:

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Success!');
  }, 3000);
});

promise.then((result) => {
  console.log(result); // Output: Success!
});

In this example, a promise is created using the new Promise constructor, and a timeout is set to resolve the promise with a value of 'Success!' after a delay of 3 seconds. The then method is then called on the promise to handle the result of the asynchronous operation, allowing other code to continue executing in the meantime.

Asynchronous JavaScript can also be implemented through the use of async/await syntax, which provides a more concise and readable way to write asynchronous code. The following code uses async/await syntax to perform an asynchronous operation:

async function example() {
  const result = await new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Success!');
    }, 3000);
  });

  console.log(result); // Output: Success!
}

example();

In this example, an async function is defined, and a promise is created using the new Promise constructor, with a timeout to resolve the promise with a value of 'Success!' after a delay of 3 seconds. The await keyword is then used to wait for the promise to resolve, and the result is stored in the result variable. Finally, the result is logged to the console, allowing other code to continue executing in the meantime.


When writing JavaScript code, it’s essential to understand how the JavaScript runtime handles and executes tasks. This involves understanding the concepts of the call stack, event loop, web APIs, callback queue, and microtask queue.

Call Stack:

The call stack is a data structure used by JavaScript to manage function calls. It works on a last-in, first-out (LIFO) basis, which means that the most recently added function is executed first. When a function is called, it is added to the top of the stack. When the function returns, it is removed from the stack.

Here’s an example of the call stack in action:

function foo() {
  console.log('foo');
}

function bar() {
  console.log('bar');
  foo();
}

bar();

When the bar function is called, it is added to the top of the call stack. The bar function then calls the foo function, which is added to the top of the call stack. When the foo function returns, it is removed from the stack, followed by the bar function.


Event Loop:

The event loop is a mechanism used by JavaScript to manage asynchronous tasks. It continuously checks the task queue to see if there are any tasks waiting to be executed. If there are, it adds the tasks to the call stack.

Here’s an example of the event loop in action:

console.log('start');

setTimeout(() => {
  console.log('setTimeout');
}, 0);

console.log('end');

In this example, the console.log('start') and console.log('end') statements are added to the call stack and executed first. The setTimeout function is then called, which is an asynchronous task. The setTimeout function is added to the web API.

Web APIs:

Web APIs are a set of APIs provided by the browser that allow JavaScript to interact with the browser environment. These APIs include the setTimeout, setInterval, and fetch functions.

When a function from the web API is called, it is added to the web API. The web API manages the task and adds it to the task queue when it is completed.

Callback Queue:

The callback queue is a data structure that stores the callbacks for asynchronous tasks. When an asynchronous task is completed, its callback is added to the callback queue.

Here’s an example of the callback queue in action:

setTimeout(() => {
  console.log('setTimeout');
}, 0);

Promise.resolve().then(() => {
  console.log('Promise');
});

In this example, both the setTimeout and Promise functions are asynchronous tasks. When the setTimeout function is completed, its callback is added to the callback queue. When the Promise function is completed, its callback is added to the microtask queue.


Microtask Queue:

The microtask queue is similar to the callback queue, but it is used for microtasks. Microtasks are functions that are executed immediately after the current task is completed.

Here’s an example of the microtask queue in action:

Promise.resolve().then(() => {
  console.log('Promise');
});

console.log('end');

In this example, the console.log('end') statement is added to the call stack and executed first. The Promise function is then called, which is a microtask. The callback for the Promise function is added to the microtask queue and executed immediately after the current task is completed.

Steps:

  1. The call stack is where functions are executed in a last-in, first-out (LIFO) manner. When a function is called, it is added to the top of the stack, and when it completes, it is removed from the top of the stack.

  2. Web APIs are provided by the browser, and allow JavaScript to perform asynchronous operations, such as making HTTP requests or setting timers. When an asynchronous operation is initiated, it is sent to the appropriate Web API, which handles it independently of the call stack.

  3. When an asynchronous operation completes, a callback function is added to the callback queue.

  4. The event loop continuously checks the callback queue to see if there are any functions waiting to be executed. If there is a function in the callback queue, it is moved to the call stack and executed.

  5. In addition to the callback queue, there is also a microtask queue. Microtasks are high-priority tasks that are executed immediately after the call stack is cleared, but before any other callbacks in the callback queue are executed.

Conclusion:

Understanding the call stack, event loop, web APIs, callback queue, and microtask queue is essential for writing efficient and responsive JavaScript code.


Thanks for reading📖! I hope you enjoyed😀 reading this article.

Keep smiling!

Have a nice day!

Did you find this article valuable?

Support Hemanth Raju by becoming a sponsor. Any amount is appreciated!

Â