Demystifying the JavaScript Event Loop: A Comprehensive Guide

Introduction

The Event Loop is a crucial mechanism in JavaScript (used in both browsers and NodeJS runtime environments). Despite JavaScript being single-threaded, the Event Loop enables it to handle multiple asynchronous tasks (like `setTimeout`, `setInterval`, `fetch`, etc.) efficiently, similar to how multi-threading works in other programming languages.

Related Components

Call Stack

The Call Stack is a vital concept that explains how the JavaScript engine keeps track of function calls within a program. It operates on a Last In, First Out (LIFO) structure, meaning the last function called is the first one to be executed.

When a function is called, it's added to the Call Stack. Once the function completes execution, it's removed from the Call Stack. This process helps JavaScript execute tasks sequentially, in the order functions are called.

Task Queue

The Task Queue (also known as the Callback Queue, Event Queue, or Macrotask Queue) contains JavaScript tasks scheduled for execution, such as callbacks, timeouts/intervals, network communications, and DOM manipulations (like triggered events). The Event Loop processes these tasks in the order they were added to the queue.

Actually, when executing functions like setTimeout/setInterval, the scheduling of the callback function to execute after a certain period is not handled by the Event Loop but by the Web API (if the execution environment is a Web Browser) or libuv (if the execution environment is NodeJS).

For example, when executing setTimeout(callback, 1000) in a browser, the task of waiting for 1000ms and then placing the callback function into the Task Queue is performed by the Web API. The Event Loop's job then is to check if the Call Stack is empty to push the task into it.

Microtask Queue

The Microtask Queue includes functions that run after the current task completes, such as promises and Mutation Observers. You can add a callback directly to the Microtask Queue using the `queueMicrotask` function.

queueMicrotask(() => {
console.log("do something")
})


Note:

The Microtask Queue has a higher priority than the Task Queue. This means that both the Call Stack and Microtask Queue must be empty before the Event Loop moves a task from the Task Queue to the Call Stack for execution.

One Microtask can trigger another Microtask, which can lead to a situation where the Microtask Queue is never empty, causing the application to execute indefinitely.


In simple terms, here's how the Event Loop works:

  1. When a function/code/task is executed, it is added to the Call Stack.
  2. Synchronous tasks are executed immediately in the Call Stack.
  3. Asynchronous tasks are categorized:
    1. Promises and Mutation Observers are added to the Microtask Queue.
    2. `setTimeout`, `setInterval`, network communications, and DOM manipulations (like triggering events) are added to the Task Queue (MacroTask Queue).
  4. If the Call Stack is empty, tasks from the Microtask Queue are moved to the Call Stack for execution.
  5. Only when both the Call Stack and Microtask Queue are empty, tasks from the Task Queue (MacroTask Queue) are moved to the Call Stack for execution.

Explaining Different Use Cases

Next, let's look at various use cases, ranging from synchronous tasks to asynchronous tasks, all related to the Event Loop.

Call Stack

Consider the following example:

function f1() {
console.log('f1 executed')
}

function f2() {
console.log('f2 executed')
f1()
console.log('f2 completed')
}

f2()

Here's a simple code block where you might already know the outcome, and here's the order in which each task executes in the Call Stack to achieve that result:

1. The `f2` function is added to the Call Stack.

2. The `console.log('f2 executed')` statement runs.

3. The `f1` function is added to the Call Stack and the `console.log('f1 executed')` statement runs.

4. The `f1` function finishes executing and is removed from the Call Stack, then the `console.log('f2 completed')` statement runs. After that, the `f2` function is also removed from the Call Stack.


You can see that the `f2` function is added to the Call Stack before the `f1` function. Due to the Stack's LIFO (Last In, First Out) mechanism, the `f1` function must be executed and removed from the Stack before the `f2` function.

Call Stack and Microtask Queue

Let's look at the following example:

console.log(1)

Promise.resolve()
.then(function () {
console.log(2)
})
.then(() => console.log(3))

console.log(4)


Here's how the execution order works:


This is how the Event Loop handles tasks in the Call Stack and the Microtask Queue:

1. Execute `console.log(1)`

2. Add `Promise.resolve()` to the Microtask Queue. Since the function has no name, we'll call it `anonymous`

3. Execute `console.log(4)`

4. Move the `anonymous` function to the Call Stack and execute `console.log(2)`

5. Add the callback function from `.then` to the Microtask Queue, also calling it `anonymous`

6. Move the `anonymous` function to the Call Stack and execute `console.log(3)`. After execution, the `anonymous` function is removed from the Call Stack


As mentioned in the theory section, `console.log(1)` and `console.log(4)` are synchronous tasks, so they go into the Call Stack and execute first. Promises are asynchronous tasks, so they are executed later. They go into the Microtask Queue, and once the Call Stack is empty, each task in the Microtask Queue is moved to the Call Stack and executed in order.

Call Stack, Microtask Queue and Task Queue (MacroTask Queue)

Let's look at the following example:

console.log(1);

setTimeout(function () {
console.log(2);
}, 0);

Promise.resolve()
.then(function () {
console.log(3);
})
.then(function () {
console.log(4);
});

console.log(5);


Here is the execution order result:


And this is how the Event Loop executes tasks in the Call Stack along with the Microtask Queue and Task Queue (MacroTask Queue):

1. Execute `console.log(1)`

2. Add `setTimeout` function to the Task Queue; since the function has no name, it is called `anonymous`

3. Add `Promise.resolve()` to the Microtask Queue; since the function has no name, it is called `anonymous`

4. Execute `console.log(5)`

5. Move the `anonymous` function from the Microtask Queue to the Call Stack and execute `console.log(3)`

6. Add the callback in `.then` to the Microtask Queue; since the function has no name, it is called `anonymous`

7. Move the `anonymous` function from the Microtask Queue to the Call Stack and execute `console.log(4)`


8. Move the `anonymous` function from the Task Queue to the Call Stack and execute `console.log(2)`; after executing, the `anonymous` function is also removed from the Call Stack


Based on the theory of components related to the Event Loop to explain the execution order:

  1. First, synchronous tasks are executed, including `console.log(1)` and `console.log(5)`
  2. Next, the task to be executed in setTimeout is placed in the Task Queue (MacroTask Queue)
  3. The task to be executed in the Promise is placed in the Microtask Queue
  4. The Microtask Queue has a higher priority than the Task Queue (MacroTask Queue), so tasks in the Microtask Queue are moved to the Call Stack to execute first. Once both the Call Stack and Microtask Queue are empty, the task from the Task Queue (MacroTask Queue) is moved to the Call Stack to continue execution.


Application of the Event Loop to explain issues

You can see that the Event Loop is used to handle all code execution in JavaScript, from synchronous to asynchronous tasks. Understanding the Event Loop will help you understand the execution order of the working flow in your project, allowing you to detect and resolve issues related to the application of too many asynchronous tasks effectively.

Next, I will provide 2 examples of JavaScript coding that frequently appear in interviews as follows.

Example 1: Explain and provide the result of the following block code

console.log(1)

setTimeout(() => {
console.log(2)
Promise.resolve().then(() => console.log(3))
}, 0)

new Promise(resolve => {
console.log(4)
setTimeout(function () {
console.log(5)
resolve(6)
})
}).then(res => {
console.log(7)
setTimeout(() => console.log(res))
})

console.log(8)

This is a common question used to test your understanding of the Event Loop theory. To know the execution result of your program, you just need to understand the execution order of tasks in the Call Stack, Microtask Queue, and Task Queue (Macrotask Queue) to analyze each line of code for the result. The task execution process is as follows:

  1. `console.log(1)` is a synchronous task that will execute first.
  2. `setTimeout` is placed in the Task Queue.
  3. `new Promise` differs from `Promise.resolve` because it will execute immediately upon initialization, so it will continue to execute the line `console.log(4)`. After that, `setTimeout` is placed in the Task Queue. Since the `resolve` function has not been called, the subsequent `.then` will not execute yet.
  4. `console.log(8)` is executed next.
  5. At this point, there are only 2 tasks in `setTimeout`, so each task is taken and placed in the Call Stack to execute. The line `console.log(2)` is executed first, followed by placing `Promise.resolve()` in the Microtask Queue.
  6. Now there is 1 task in the Task Queue and 1 task in the Microtask Queue, and since the Microtask Queue has a higher priority than the Task Queue, it is executed first, so the line `console.log(3)` is executed.
  7. There is only 1 `setTimeout` left in the Task Queue, so `console.log(5)` is executed.
  8. After executing `resolve(6)`, it will be placed in the Microtask Queue.
  9. Grab the task from the Microtask Queue to execute the final `.then` and execute `console.log(7)`.
  10. There is still 1 `setTimeout` which is placed in the Task Queue, then it is taken into the Call Stack to execute the line `console.log(res)` (where `res` is 6).


The result is as follows:

Example 2: Fix the error so that the following program does not block.es not block."

import {useEffect, useState} from 'react'

export default function Index() {
const [count, setCount] = useState(0)
const [time, setTime] = useState(0)
const [total, setTotal] = useState(0)

useEffect(() => {
setInterval(() => setCount(value => value + 1), 1000)
}, [])

const start = () => {
const start = Date.now()
let countValue = 0
for (let i = 0; i < 9e9; i++) {
countValue += i
}
setTotal(countValue)
setTime(Date.now() - start)
}

return (
<>
<h1>Count: {count}</h1>
<button onClick={start}>Start</button>
<h2>Total: {total}</h2>
<h2>Time: {time}</h2>
</>
)
}

This block of code is implemented using React to calculate the sum from 1 to 9e9 (9*10^9). You may realize that when calling the `start` function, executing in the `for` loop will take a lot of processing time, causing the main thread to be blocked, making the application unable to continue functioning.


Once the cause is identified as the `for` loop having to execute 9e9 times, the solution to address this is to break down the number of loop iterations (for example, looping only 1e7 (1*10^7) times each time). After each small loop, update the values of the `total` and `time` variables, then continue executing small loops until finished. Thus, the code after the fix will look like this.

import {useEffect, useState} from 'react'

export default function Index() {
const [count, setCount] = useState(0)
const [time, setTime] = useState(0)
const [total, setTotal] = useState(0)

useEffect(() => {
setInterval(() => setCount(value => value + 1), 1000)
}, [])

const start = (): void => {
const start = Date.now()
setTime(0)
let totalValue = 0
let currentCount = 0
let limitEachTime = currentCount

const calculate = (): void => {
limitEachTime = currentCount + 1e7
while (currentCount <= 9e9) {
totalValue += currentCount
if (currentCount > limitEachTime) {
currentCount++
setTimeout(calculate)
break
}
currentCount++
}
setTotal(totalValue)
setTime(Date.now() - start)
}
calculate()
}

return (
<div>
<h1>Count: {count}</h1>
<button onClick={start}>Start</button>
<p>Total: {total}</p>
<p>Time: {time} ms</p>
</div>
)
}

You can see that the code is divided so that each iteration runs only 1e7 times, then it will call the `setTimeout` function for the next iteration if it has not yet completed 9e9 times. When using the `setTimeout` function, as mentioned theoretically, it will be placed in the Task Queue (Macrotask Queue), and the execution order will be Call Stack -> Microtask Queue -> Re-render (on browser) -> Task Queue (Macrotask Queue). Thus, after every 1e7 iterations, the next iteration is placed in the Task Queue, so it will not get blocked; setting the values for total and time will also be shown on the UI as usual.


Actually, this is not the best performance solution; you can use a Service Worker to perform heavy calculations in another thread, which will provide better performance.

Bonus question

After reading this article, if you think you understand Event Loop, try to analyze to see what the result of the following block of code is. This type of question often appears in JavaScript interviews to test your understanding of Event Loop. If you can answer it, you are surely ready to tackle issues related to Event Loop.

async function f1() {
console.log(1)
await f2()
console.log(2)
}

async function f2() {
console.log(3)
}

console.log(4)

setTimeout(() => {
console.log(5)
})

f1()

new Promise(resolve => {
console.log(6)
resolve(null)
}).then(() => {
console.log(7)
})

console.log(8)

Happy coding!

Comments

Post a Comment

Popular posts from this blog

NodeJS Practice Series

Image
Introduction NodeJS is an open-source and cross-platform JavaScript runtime environment . Here are some key points about NodeJS : V8 Engine : NodeJS runs on the V8 JavaScript engine , which is also the core of Google Chrome . This allows NodeJS to be highly performant. Asynchronous and Non-Blocking : NodeJS  uses an event-driven, non-blocking I/O model. It’s lightweight and efficient, making it ideal for data-intensive real-time applications. Single-Threaded : NodeJS  runs in a single process, handling multiple requests without creating new threads. It eliminates waiting and continues with the next request. Common Language : Frontend developers who write JavaScript for browsers can use the same language for server-side code in NodeJS . You can even use the latest ECMAScript standards without waiting for browser updates. This page is designed to compile articles related to NodeJS , including how to integrate it with various libraries and relevant tech stacks. I will cont...
Read more

Kubernetes Practice Series

Image
Introduction Kubernetes (often abbreviated as K8s ) is an open-source system designed to automate the deployment, scaling, and management of containerized applications. This page serves as a collection of articles related to Kubernetes (K8s) , including theoretical concepts and practical guides on using Kubernetes to set up essential tools for the software development process. I will continue to update this series with new articles as ideas come to mind, to ensure the series becomes more comprehensive. The articles are arranged in increasing order of difficulty to make it easier for you to follow. If you have time, it's recommended that you start from the beginning of the series to acquire the necessary knowledge and information that will prepare you for the subsequent articles. Key Topics Covered in This Series Basic Knowledge : Fundamental concepts, common commands, etc. Resources : Pod, Deployment, Service, StatefulSet, Ingress, etc. Pod Autoscaler : Horizontal and Vertical sc...
Read more

Docker Practice Series

Image
Introduction Docker is an open platform for developing, shipping, and running applications. This page is dedicated to compiling articles related to Docker , covering both the theoretical aspects and practical applications of Docker in setting up popular tools essential for software development. I will be updating this series with more articles in the future as new ideas for topics arise. The articles are arranged in increasing order of difficulty, making it easier for you to follow along. If you have the time, I recommend starting from the beginning of the series to ensure that you grasp the necessary knowledge and information needed for the more advanced articles later on. Here are some key topics in the series that you need to explore to effectively use Docker : Basic knowledge Docker commands Docker Compose Building Docker images Performance improvement Integration with CI/CD Once you have a solid understanding of the foundational knowledge, the extended topics (including advanced...
Read more

Deploying a NodeJS Server on Google Kubernetes Engine

Image
Introduction to GKE Google Kubernetes Engine (GKE) is a managed Kubernetes service provided by Google Cloud Platform , facilitating simple and efficient deployment of Docker images. We only need to provide some configuration for the number of nodes, machine types, and replicas to use. Some Concepts Cluster A Cluster is a collection of Nodes where Kubernetes can deploy applications. A cluster includes at least one Master Node and multiple Worker Nodes . The Master Node is used to manage the Worker Nodes . Node A Node is a server in the Kubernetes Cluster. Nodes can be physical servers or virtual machines. Each Node runs  Kubernetes , which is responsible for communication between the Master Node and Worker Node , as well as managing Pods and containers running on it. Pod A Pod is the smallest deployable unit in Kubernetes . Each Pod contains one or more containers, typically Docker containers. Containers in the same Pod share a network namespace, meaning they have the ...
Read more

Setting up Kubernetes Dashboard with Kind

Image
Introduction In a previous article, I guided you through using Helm to deploy on Google Kubernetes Engine . However, if you want to cut down costs by using Kubernetes in your local environment instead of relying on a cloud provider during development, then Kind is your go-to. There are several tools to help set up Kubernetes locally, such as MiniKube , Kind , K3S , KubeAdm , and more. Each tool has its own pros and cons. In this article, I'll walk you through using Kind to quickly set up a Kubernetes cluster on Docker . Kind stands out for its compactness, making Kubernetes start up quickly, being user-friendly, and supporting the latest Kubernetes versions. Working with Kind Firstly, follow the instructions here to install Kind according to your operating system. If you're using Ubuntu , execute the command: [ $( uname -m ) = x86_64 ] && curl -Lo ./kind https://kind.sigs.k8s.io/dl/v0.23.0/kind-linux-amd64 chmod +x ./kind sudo mv ./kind /usr/local/bin/ki...
Read more

React Practice Series

Image
Introduction React is a JavaScript library created by Facebook , often referred to as the most popular frontend framework today. This page aims to gather articles related to ReactJS , covering topics such as theory, features, and commonly used packages in the process of building ReactJS applications. I will update this series with more articles in the future as new ideas for content come up. The articles are arranged in increasing order of difficulty, so if you have time, it's recommended to start from the beginning of the series. This will ensure you grasp the essential knowledge and information needed for the subsequent articles. Here are some key topics in the series that you need to explore to effectively use ReactJS : Fundamental : React Hook, React Context, Lazy load, etc. State management : redux, mobx, recoil, etc. Middleware libraries : redux-thunk, redux-saga, redux-observable, etc. Popular packages : react-query, immer, styled-components, etc. Rendering techniques : C...
Read more

Sitemap

Image
A page aggregator designed for easy reference and search, compiling all blog posts for convenient access.
Read more

Using Kafka with Docker and NodeJS

Image
Introduction to Kafka Kafka is an open-source , distributed messaging system that functions on a publish/subscribe model. It is widely used by numerous large companies for high-performance , real-time data streaming. Developed by LinkedIn since 2011, Kafka has grown into the most popular distributed streaming platform. It can handle vast amounts of records with high efficiency. Advantages of Kafka Open-source : Freely available and continuously improved by a large community. High-throughput, high-frequency : Capable of processing large volumes of data across topics continuously. Automatic message storage : Allows for easy message retrieval and verification. Large user community : Offers extensive support and shared resources. Basic Concepts If you're new to Kafka and Message Queues, here are some key concepts to understand: Producer : Creates and sends data to the Kafka server, where data is sent as messages in byte array format. Consumer : One or more consumers subscribe to...
Read more

Monitoring with cAdvisor, Prometheus and Grafana on Docker

Image
Introduction Monitoring a system is crucial after deploying a product to a production environment. Keeping an eye on system metrics like logs , CPU , RAM , disks , etc, helps identify the system's status, performance issues, and provides timely solutions to ensure stable operations. While cloud providers like Google , Amazon , or Azure offer built-in monitoring systems, if your company needs to manage multiple applications/systems/containers and desires a centralized monitoring system for easier management, using cAdvisor , Prometheus , and Grafana is a sensible choice. These three popular open-source tools are widely used by DevOps teams, especially for monitoring container applications. cAdvisor Developed by Google , cAdvisor is an open-source project used to analyze resource usage, performance, and other metrics from container applications, providing an overview of all running containers. Find more details here Prometheus Prometheus is a toolkit for system monitoring and a...
Read more

Create API Gateway with fast-gateway

Image
Introduction In this article, I will guide you on how to use fast-gateway to deploy a simple API Gateway on NodeJS along with express . The advantage of an API Gateway is that it acts as an intermediary layer to hide the rest of the system, including services, commonly used in Microservices architecture. Example Usage This is the Microservices model after deployment: First, install the package yarn add fast-gateway Next, define the ports that will be used. import * as express from 'express' import * as gateway from 'fast-gateway' const portGateway = 5000 const portService1 = 5001 const portService2 = 5002 Define service 1 as follows: const startService1 = (): void => { const app = express () app . get ( '/list' , ( req , res ) => { const items = [ { id: 1 , name: 'service 1 value 1' , }, { id: 2 , name: 'service 1 value 2' , }, ] re...
Read more