Synchronous vs asynchronous

🔄 First, what does async/await do?

• async makes a function return a Promise.

• await pauses the execution inside the async function until the awaited Promise resolves — but it does not block the rest of the program.

🧠 So how is it asynchronous?

🔁 Async/Await Step-by-Step Example

Let's break it down step by step:

console.log("1. Start");

async function fetchData() {
  console.log("2. Inside async function");

  const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');

  console.log("4. After await");

  const data = await response.json();
  console.log("5. Data:", data);
}

fetchData();

console.log("3. End");

🧪 Output:

1. Start 
2. Inside async function 
3. End
4. After await 
5. Data: { ... }

🔍 Why this output?

• console.log("1. Start") → runs immediately

• fetchData() is called → enters the async function

• console.log("2. Inside async function") → runs

• await fetch(...) is asynchronous, so:

  • JS pauses fetchData() here

  • JS continues with the next line: console.log("3. End")

• Once the fetch resolves, fetchData() resumes and logs "4" and "5".

📌 So what makes it async?

• await doesn't block the whole program, only suspends execution of the async function.

• JS uses an event loop to handle this:

  • After hitting await, JS registers the remaining code (callback) to run later, when the Promise resolves.

🔁 Visualization

→ Start Program 
→ Run until await 
→ Pause function 
→ Continue with rest of the code 
→ When Promise resolves 
→ Resume async function from where it left