Ajay Ravi's blog
Mastering the Inner Workings of JavaScript: Call Stack, Event Loop, and Asynchronous Tasks

Mastering the Inner Workings of JavaScript: Call Stack, Event Loop, and Asynchronous Tasks

Ajay Ravi's photo
Ajay Ravi
·

4 min read

Introduction: In the world of JavaScript, understanding the inner workings of the runtime environment is crucial for writing efficient and performant code. Two key concepts to comprehend in this regard are the Call Stack and the Event Loop. Furthermore, within the Event Loop, we encounter the Microtask Queue and the Task Queue, which play important roles in managing asynchronous operations. In this blog post, we'll explore these concepts, how they work, and their significance in JavaScript, accompanied by code examples for better understanding.

  1. The Call Stack: The Call Stack is a data structure used by JavaScript to track function calls. It operates as a stack, meaning that the most recently invoked function is placed on top of the stack, and when a function completes, it is removed from the top. This mechanism enables the interpreter to remember where to return after a function call completes.

Let's consider an example:

function greet() {
  console.log('Hello!');
}

function welcome() {
  greet();
  console.log('Welcome!');
}

welcome();

In the above code snippet, when the welcome() function is invoked, it calls the greet() function, which in turn logs "Hello!" to the console. After the greet() function completes, the call to console.log('Welcome!') is executed, resulting in "Welcome!" being logged to the console.

  1. The Event Loop: The Event Loop is a fundamental component of JavaScript's runtime environment. Its primary purpose is to handle asynchronous operations, ensuring that they are executed in the most efficient and orderly manner. When an asynchronous task, such as a network request or a timer, completes, the Event Loop decides when and how to handle the corresponding callback function.

Here's an example showcasing the Event Loop in action:

console.log('Start');

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

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

console.log('End');

In this code snippet, the setTimeout function and the Promise.resolve().then() statement represents asynchronous operations. The setTimeout callback and the promises then callback are placed in the respective queues for execution.

The output of the above code will be:

Start
End
Promise
Timeout

Even though the setTimeout was set to 0 milliseconds, it still executes after the promise's callback because the promise's microtask is given higher priority over the macrotask in the Event Loop.

  1. Microtask Queue: The Microtask Queue, also known as the Job Queue, is a queue that holds microtasks. Microtasks are tasks with higher priority than regular tasks. Examples of microtasks include promises, mutation observers, and queueMicrotask. When the Call Stack is empty, the Event Loop checks the Microtask Queue and executes the microtasks one by one until the queue is empty. This ensures that microtasks are processed before regular tasks.

Consider the following code:

console.log('Start');

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

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

console.log('End');

The output will be:

Start
End
Microtask 1
Microtask 2

In this example, the microtasks (Promise.resolve().then() callbacks) are enqueued in the Microtask Queue. When the Call Stack is empty, the Event Loop executes the microtasks in the order they were added.

  1. Task Queue/Macrotask/Callback Queue: The Task Queue, also referred to as the Macrotask Queue or Callback Queue, is a queue that holds tasks with lower priority than microtasks. These tasks typically include I/O operations, timeouts, and DOM rendering. When the Call Stack is empty and the Microtask Queue is also empty, the Event Loop checks the Task Queue and executes the tasks one by one until the queue is empty.

Here's an example showcasing the Task Queue:

console.log('Start');

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

console.log('End');

The output will be:

Start
End
Timeout

In this example, the setTimeout callback is added to the Task Queue. After the Call Stack becomes empty, the Event Loop processes the Task Queue and executes the callback, resulting in "Timeout" being logged to the console.

Ultimate guide on the JavaScript Event loop - DEV Community

Conclusion:

Understanding the Call Stack, Event Loop, Microtask Queue, and Task Queue is crucial for JavaScript developers aiming to write efficient and responsive code. The Call Stack helps keep track of function calls, while the Event Loop manages asynchronous operations, utilizing the Microtask Queue and Task Queue to prioritize and execute tasks accordingly. By grasping these concepts and observing the code examples provided, you can better optimize your code and harness the power of JavaScript's event-driven, non-blocking nature.

Remember, a deep understanding of these concepts can greatly enhance your ability to write efficient and performant JavaScript code. So, dive in, experiment, and harness the full potential of JavaScript's runtime environment!

JavaScriptNode.jsWeMakeDevs