How JavaScript Async Actually Works (Event Loop, Micro tasks, and Call Stack)

If you have ever thought:

• Why does Promise.then() run before setTimeout?
• Why does await run “later” even though it looks synchronous?
• What is actually happening behind async / await?

then you are ready to understand how JavaScript async really works.

When I first struggled with “why a Promise is returned”, I realized that I could not go further without understanding the internal mechanism.

In JavaScript, async behavior is built on these five concepts:

• Call Stack
• Web APIs
• Task Queue
• Microtask Queue
• Event Loop

Promise and async / await are just built on top of this system.

Let’s break it down step by step.

---

1. JavaScript Is Single-Threaded

JavaScript can execute only one thing at a time.

Example:

console.log("A")
console.log("B")
console.log("C")

Output:

A  
B  
C  

This order is controlled by the Call Stack.

---

2. What Is the Call Stack?

The call stack is:

a stack that keeps track of currently executing functions

It follows LIFO (Last In, First Out).

Example:

function main() {
  a()
}

function a() {
  b()
}

function b() {
  console.log("hello")
}

main()

Execution order:

1 main()  
2 a()  
3 b()  
4 console.log()  

The stack grows as functions are called and shrinks as they finish.

---

3. The Problem: Long-Running Tasks

Now consider this:

console.log("start")

setTimeout(() => {
  console.log("timeout")
}, 0)

console.log("end")

Output:

start  
end  
timeout  

Why does setTimeout run later, even with 0ms?

This is where Web APIs come in.

---

4. Web APIs

JavaScript engines (like V8) do not handle timers or network requests.

Features like:

• setTimeout
• fetch

are provided by the browser (or runtime environment).

Flow:

1. setTimeout is called
2. It is handed off to Web APIs
3. Timer starts outside the call stack
4. JavaScript continues execution

---

5. Task Queue

When the timer finishes, the callback is not executed immediately.

It is placed into the:

Task Queue (Macrotask Queue)

This is a queue of functions waiting to be executed.

---

6. Event Loop

The event loop is:

a mechanism that checks if the call stack is empty

Flow:

1. Run everything in the call stack
2. When empty → take one task from the task queue
3. Push it to the call stack
4. Repeat

---

7. Full Async Flow

Example:

console.log("A")

setTimeout(() => {
  console.log("B")
}, 0)

console.log("C")

Execution:

A  
C  
B  

Why:

1. A runs
2. setTimeout registers callback
3. C runs
4. call stack becomes empty
5. event loop pushes task
6. B runs

---

8. Promise Is Special

Here is the important part:

Promise.then() does NOT use the normal task queue.

It uses a different queue called:

Microtask Queue

---

9. Microtasks vs Tasks

JavaScript has two queues:

Task Queue (Macrotasks)

• setTimeout
• setInterval
• DOM events

Microtask Queue

• Promise.then
• catch
• finally
• queueMicrotask

Key rule:

Microtasks run before tasks

---

10. Example

console.log("start")

setTimeout(() => {
  console.log("timeout")
}, 0)

Promise.resolve().then(() => {
  console.log("promise")
})

console.log("end")

Output:

start  
end  
promise  
timeout  

Because microtasks run first.

---

11. Event Loop Order (Important)

The real execution order:

1. Run call stack
2. Run ALL microtasks
3. Run ONE task
4. Run microtasks again
5. Repeat

This is the core rule.

---

12. What async Really Does

async function test() {
  return 1
}

This is actually:

Promise.resolve(1)

So:

async = function that returns a Promise

---

13. What await Really Does

Example:

async function main() {

  console.log("A")

  const value = await Promise.resolve(1)

  console.log("B")

}

main()

console.log("C")

Output:

A  
C  
B  

Why?

Because:

await splits the function into two parts using Promise.then

---

14. Mental Model of await

This:

async function main() {
  const value = await getData()
  console.log(value)
}

is conceptually:

getData().then(value => {
  console.log(value)
})

---

15. await Splits Execution

Example:

async function main() {

  console.log("1")

  await Promise.resolve()

  console.log("2")

}

console.log("3")

main()

console.log("4")

Output:

3  
1  
4  
2  

Everything after await becomes a microtask.

---

16. Another Example

console.log("A")

async function test() {

  console.log("B")

  await Promise.resolve()

  console.log("C")

}

test()

console.log("D")

Output:

A  
B  
D  
C  

---

17. Key Insight About await

await does NOT block the thread

It just:

splits the function and schedules the rest as a microtask

---

18. Sequential vs Parallel

Sequential:

const a = await fetchA()
const b = await fetchB()

Parallel:

const [a, b] = await Promise.all([
  fetchA(),
  fetchB()
])

Important:

Parallelism depends on when the Promise starts, not when you await it

---

19. Why This Matters

If you write:

const a = await fetchA()
const b = await fetchB()

then:

1. fetchA runs
2. wait
3. fetchB runs

But if you write:

const aPromise = fetchA()
const bPromise = fetchB()

const a = await aPromise
const b = await bPromise

both start immediately.

---

20. Big Picture

JavaScript async is built on:

• Call Stack → current execution
• Web APIs → timers, network
• Task Queue → setTimeout
• Microtask Queue → Promise
• Event Loop → orchestrates everything

---

21. Final Summary

The most important ideas:

• Promise → runs in microtask queue
• setTimeout → runs in task queue
• microtasks always run first
• await → splits code into microtasks

Once you understand this, you can explain:

• Why Promise runs before setTimeout
• Why await runs “later”
• Why sequential vs parallel happens

And at that point:

async / await stops being magic and becomes predictable.