Understanding JS Execution Flow with Visuals

While working on a LeetCode problem, I got stuck on the concepts of setTimeout and clearTimeout. Some developers shared their solutions and explanations, all emphasizing the importance of understanding the flow of JavaScript. The key mechanisms involved include the call stack, queues, the event loop, and web APIs.

I had read multiple documents and blogs about setTimeout and call stacks, but understanding the actual flow was quite challenging for me, especially as a visual learner. However, I came across an amazing YouTube tutorial that was perfectly explained and gave me a clear understanding, allowing me to delve deeper into the flow. I’ll describe each key term, summarize the flow in my own words, and share the link to the tutorial video.

JavaScript Engine
Since JavaScript is a scripting language that a computer doesn't understand directly, a browser has an inbuilt JavaScript engine that converts JavaScript into a computer-understandable language. The engine has two key mechanisms: the call stack and the memory heap. While the JavaScript engine is where data is stored, I won't delve into that this time to focus on the flow.

Call Stack
A call stack is a mechanism that keeps track of its place in a script that calls functions. Functions are stacked and executed in a Last-In-First-Out (LIFO) order.

Memory Heap
While the stack stores fixed-sized data, the heap dynamically allocates memory for objects and functions.

Blocking vs Non-Blocking
Blocking code doesn't allow the next task to be executed until the blocking code finishes executing. In contrast, non-blocking code, such as asynchronous calls like setTimeout or Promise, allows the next task to be executed without waiting.

Event Queue
The event queue is a queue of tasks to be executed when the call stack is empty. There are two kinds of queues or tasks: microtasks and macrotasks.

Microtasks
Microtasks are created by promises, such as those in then, catch, and finally methods. They are prioritized over macrotasks.

Macrotasks
Macrotasks include everything other than microtasks, such as setTimeout.

Event Loop
The event loop handles the execution of the event queue.

Here's the flow:

1. Regular functions to be executed are stacked in the call stack.

2. They are executed from the top in a Last-In-First-Out (LIFO) order.

3. JavaScript is single-threaded, but time-consuming tasks such as fetching APIs or setTimeout are handled by threads outside the JavaScript runtime environment. Once these asynchronous tasks are complete, they are placed in task queues. Promise-related tasks are placed in the microtask queue, while others go into the macrotask queue.

4. The event loop monitors the call stack and the task queues. When the call stack is empty, the event loop picks the first task from the microtask queue. When both the call stack and the microtask queue are empty, it picks the first task from the macrotask queue.

I'd like to share the amazing tutorial video that explains the flow using perfect visual images. Hope some of the visual learners can find it useful. Here's the URL: [https://youtu.be/eiC58R16hb8?si=ODoxBlfGxFZkJT9b]