🧠 How async/await Works in JavaScript (Even Though It’s Single‑Threaded)

JavaScript often confuses developers with its ability to handle asynchronous operations smoothly—even though it is fundamentally single-threaded. Let’s break this down with a simple, intuitive explanation and connect it to how async/await works under the hood.

⚙️ JavaScript is Single-Threaded… So How Does It Do Async?

JavaScript has one call stack, meaning it executes code one task at a time.

JavaScript

console.log("Start");

console.log("End");

Output:

Start
End

Straightforward, right? But things get interesting when asynchronous operations come into play.

🔄 The Secret: Event Loop + Web APIs

JavaScript uses a clever system made up of:

• ✅ Call Stack – where code executes
• ✅ Web APIs (Browser/Node) – handle async work (timers, fetch, etc.)
• ✅ Callback / Microtask Queue
• ✅ Event Loop – coordinates everything

Example:

Timeout.js

1console.log("Start");
2
3setTimeout(() => {
4    console.log("Timeout done");
5}, 2000);
6
7console.log("End");

Output:

Start
End
Timeout done

👉 Even though setTimeout is called first, the callback runs later because it's handled outside the main thread.

⏳ Enter Promises

async/await is built on top of Promises.

Promise.js

1const promise = new Promise((resolve, reject) => {
2    setTimeout(() => resolve("Done!"), 1000);
3});
4
5promise.then(console.log);

Promises represent future values.

✨ What Does async/await Do?

async/await is syntactic sugar that makes asynchronous code look synchronous.

Example:

JavaScript

AsyncAwait.js

1async function fetchData() {
2    console.log("Fetching...");
3
4    const result = await new Promise((resolve) => 
5        setTimeout(() => resolve("Data received"), 2000)
6    );
7
8    console.log(result);
9}
10
11fetchData();
12console.log("After fetch call");

Output:

Fetching...
After fetch call
Data received

🔍 How await Works Internally

When JavaScript encounters:

JavaScript

await somePromise;

Here’s what happens step-by-step:

1. Function execution pauses at await
2. The promise is handed off to the event loop
3. The main thread is freed to run other code
4. Once the promise resolves:
5. • The function resumes from where it stopped

👉 Important: The thread is NOT blocked — only the function context is paused.

🚦 Key Insight: It’s Cooperative, Not Parallel

JavaScript doesn’t run multiple threads (by default), but it:

• Delegates async tasks to Web APIs
• Uses queues to schedule callbacks
• Resumes execution via the event loop

So:

✅ Concurrency without multithreading

🧩 Microtasks vs Macrotasks

• Microtasks (higher priority):
• • Promises (then, await)
• Macrotasks:
• • setTimeout, setInterval

Example:

JavaScript

MicroMacro.js

1console.log("Start");
2
3setTimeout(() => console.log("Timeout"), 0);
4
5Promise.resolve().then(() => console.log("Promise"));
6
7console.log("End");

Output:

Start
End
Promise
Timeout

🧠 Mental Model

Think of it like:

🍽 A chef (JavaScript thread)
🧾 Orders (tasks)
👩‍🍳 Assistants (Web APIs)

The chef doesn’t wait for one dish to cook—he delegates, keeps working, and comes back when it's ready.

✅ Why async/await Feels Synchronous

Because:

• Code is written top-down
• Error handling uses try/catch
• No nested callbacks

JavaScript

async function example() {

try {

const data = await fetch("https://api.example.com");

console.log(await data.json());

} catch (err) {

console.error(err);

}

}

Show more lines

🚀 Final Takeaways

• JavaScript is single-threaded ✅
• Async behavior is powered by:
• • Event Loop
  • Web APIs
  • Task queues
• async/await:
• • Doesn’t block the thread ❌
  • Pauses execution of just that function ✅
• Makes async code cleaner, readable, and maintainable ✨