# 📘 JavaScript Event Loop Explained Clearly (Beginner → Advanced)
This guide explains the **Event Loop** in a simple but deep way. We will understand: - What is the Event Loop? - Why JavaScript needs it? - How it works internally? - Call Stack - Web APIs - Callback Queue - Microtask Queue - Execution Order Rules - Real Examples
# 📘 JavaScript Event Loop Explained Clearly (Beginner → Advanced)
This guide explains the **Event Loop** in a simple but deep way.
We will understand:
- What is the Event Loop?
- Why JavaScript needs it?
- How it works internally?
- Call Stack
- Web APIs
- Callback Queue
- Microtask Queue
- Execution Order Rules
- Real Examples
- Why JavaScript needs it?
- How it works internally?
- Call Stack
- Web APIs
- Callback Queue
- Microtask Queue
- Execution Order Rules
- Real Examples
---
# 🔹 1️⃣ What is the Event Loop?
JavaScript is:
> Single-threaded
That means:
- It can do one thing at a time.
- It has only one Call Stack.
- It has only one Call Stack.
But…
JavaScript can still handle:
- setTimeout
- Promises
- fetch
- DOM events
- Async operations
- Promises
- fetch
- DOM events
- Async operations
How?
👉 Because of the **Event Loop**.
---
# 🔹 2️⃣ Why Do We Need the Event Loop?
Imagine this code:
```js
console.log("Start");
console.log("Start");
setTimeout(() => {
console.log("Inside Timeout");
}, 2000);
console.log("Inside Timeout");
}, 2000);
console.log("End");
```
```
If JavaScript were fully blocking:
It would wait 2 seconds before printing "End".
But actual output is:
```
Start
End
Inside Timeout
```
Start
End
Inside Timeout
```
Why?
Because JavaScript does NOT wait.
Instead:
- It sends async tasks to the browser (Web APIs)
- Continues executing rest of code
- Event Loop later brings callback back
- Continues executing rest of code
- Event Loop later brings callback back
---
# 🔹 3️⃣ Core Components of Event Loop
There are 4 important parts:
1️⃣ Call Stack
2️⃣ Web APIs
3️⃣ Callback Queue (Macrotask Queue)
4️⃣ Microtask Queue
2️⃣ Web APIs
3️⃣ Callback Queue (Macrotask Queue)
4️⃣ Microtask Queue
---
# 🔹 4️⃣ Call Stack
The Call Stack is:
> Where JavaScript executes functions.
Example:
```js
function greet() {
console.log("Hello");
}
function greet() {
console.log("Hello");
}
greet();
```
```
Stack flow:
```
greet()
↓
console.log()
↓
pop
```
greet()
↓
console.log()
↓
pop
```
Simple and synchronous.
---
# 🔹 5️⃣ Web APIs
Web APIs are provided by:
- Browser
- Node.js environment
- Node.js environment
Examples:
- setTimeout
- fetch
- DOM events
- fetch
- DOM events
When JS sees:
```js
setTimeout(...)
```
setTimeout(...)
```
It sends it to Web APIs.
JS does NOT wait.
---
# 🔹 6️⃣ Callback Queue (Macrotask Queue)
When async task finishes:
Its callback goes to:
> Callback Queue
Examples that go here:
- setTimeout
- setInterval
- DOM events
- setInterval
- DOM events
---
# 🔹 7️⃣ Microtask Queue (Higher Priority)
Microtasks include:
- Promise.then
- Promise.catch
- MutationObserver
- queueMicrotask
- Promise.catch
- MutationObserver
- queueMicrotask
Microtasks have **higher priority** than normal callbacks.
---
# 🔹 8️⃣ Event Loop Working Rule
Event Loop constantly checks:
```
Is Call Stack empty?
```
Is Call Stack empty?
```
If YES:
1️⃣ First executes ALL microtasks
2️⃣ Then executes ONE macrotask
3️⃣ Repeat
2️⃣ Then executes ONE macrotask
3️⃣ Repeat
---
# 🔹 9️⃣ Example 1 – Basic Async
```js
console.log("Start");
console.log("Start");
setTimeout(() => {
console.log("Timeout");
}, 0);
console.log("Timeout");
}, 0);
console.log("End");
```
```
### Output
```
Start
End
Timeout
```
Start
End
Timeout
```
Why?
Even with 0ms delay:
- setTimeout goes to Web API
- Then Callback Queue
- Event Loop runs it after stack empty
- Then Callback Queue
- Event Loop runs it after stack empty
---
# 🔹 🔟 Example 2 – Promise vs setTimeout
```js
console.log("Start");
console.log("Start");
setTimeout(() => {
console.log("Timeout");
}, 0);
console.log("Timeout");
}, 0);
Promise.resolve().then(() => {
console.log("Promise");
});
console.log("Promise");
});
console.log("End");
```
```
### Output
```
Start
End
Promise
Timeout
```
Start
End
Promise
Timeout
```
Why?
Because:
Microtask Queue (Promise) runs BEFORE Callback Queue (setTimeout).
---
# 🔹 1️⃣1️⃣ Internal Execution Flow
Step-by-step:
```
Call Stack runs sync code
↓
Async tasks sent to Web APIs
↓
Finished tasks go to Queue
↓
Event Loop checks stack
↓
Runs microtasks
↓
Runs one macrotask
↓
Repeat
```
Call Stack runs sync code
↓
Async tasks sent to Web APIs
↓
Finished tasks go to Queue
↓
Event Loop checks stack
↓
Runs microtasks
↓
Runs one macrotask
↓
Repeat
```
---
# 🔹 1️⃣2️⃣ Visual Model
```
Call Stack
↓
Web APIs
↓
Microtask Queue (High Priority)
↓
Callback Queue (Normal Priority)
↓
Event Loop
```
Call Stack
↓
Web APIs
↓
Microtask Queue (High Priority)
↓
Callback Queue (Normal Priority)
↓
Event Loop
```
---
# 🔹 1️⃣3️⃣ Advanced Example
```js
console.log("1");
console.log("1");
setTimeout(() => console.log("2"), 0);
Promise.resolve().then(() => console.log("3"));
console.log("4");
```
```
### Output
```
1
4
3
2
```
1
4
3
2
```
Order logic:
1️⃣ Sync code first
2️⃣ Microtasks
3️⃣ Macrotasks
2️⃣ Microtasks
3️⃣ Macrotasks
---
# 🔹 1️⃣4️⃣ Real Interview Questions
### ❓ Why does Promise run before setTimeout?
Because Promise goes to Microtask Queue.
Microtasks execute before Macrotasks.
---
### ❓ Is setTimeout(0) immediate?
No.
It still waits until:
- Call Stack empty
- Microtasks finished
- Microtasks finished
---
### ❓ Does JS handle async?
JS engine itself does NOT.
Environment (Browser/Node) handles async.
Event Loop coordinates execution.
---
# 🔹 1️⃣5️⃣ Common Mistake
Developers think:
```
setTimeout(fn, 0) = immediate
```
setTimeout(fn, 0) = immediate
```
Wrong.
It means:
> Run after current stack and microtasks.
---
# 🔹 1️⃣6️⃣ Why Event Loop Is Important?
Without Event Loop:
- Async programming impossible
- No promises
- No fetch
- No React rendering timing
- No Node.js non-blocking IO
- No promises
- No fetch
- No React rendering timing
- No Node.js non-blocking IO
Event Loop makes JS powerful despite being single-threaded.
---
# 🎯 Final Simple Understanding
Event Loop is:
1️⃣ The system that manages async execution
2️⃣ Moves completed tasks back to Call Stack
3️⃣ Gives priority to microtasks
4️⃣ Allows non-blocking behavior
2️⃣ Moves completed tasks back to Call Stack
3️⃣ Gives priority to microtasks
4️⃣ Allows non-blocking behavior
---
# 🏁 One-Line Summary
> The Event Loop is the mechanism that allows JavaScript to handle asynchronous operations using a single thread.
---
End of Document.
Enjoyed reading this content? Let the author know!
Your likes, comments, shares, and saves help creators reach more builders.
Loading recommendations
Loading article