🧵 Asynchronous JavaScript – Callbacks, Promises & Async/Await

---

🧲 Introduction – Why Learn Asynchronous JavaScript?

In JavaScript, asynchronous programming allows us to perform long-running tasks (like fetching data or waiting for a timeout) without blocking the main thread. Without async logic, your app would freeze every time it waits for an external operation.

🎯 In this guide, you’ll learn:

• How asynchronous JavaScript works
• Core concepts: Callbacks, Promises, and async/await
• The Event Loop and Microtasks
• Practical async functions like setTimeout() and setInterval()
• Promisification and promise chaining

---

📘 Topics Covered

🔹 Topic	📄 Description
JavaScript Callbacks	Basic async via functions
JavaScript Promises	Modern, cleaner async handling
JavaScript Async/Await	Async syntax with sync style
Promisification	Convert callbacks to promises
setTimeout/setInterval	Delay and interval functions
Microtasks & Chaining	Efficient async queuing

---

🔁 JavaScript — Callbacks

📌 What is a Callback?

A callback is a function passed as an argument to another function, often used for async logic like reading files or making HTTP requests.

function greet(name, callback) {
  console.log("Hi " + name);
  callback();
}

greet("Alice", () => console.log("Greeting completed"));

❗ Problems with Callbacks

• Hard to manage multiple levels → callback hell
• Difficult to read and debug

---

🌟 JavaScript — Promises

📌 What is a Promise?

A Promise is an object representing the eventual completion or failure of an async task.

const promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve("Done!"), 1000);
});

promise.then(result => console.log(result));

✅ States of a Promise

• Pending → initial state
• Fulfilled → resolve()
• Rejected → reject()

---

⚡ JavaScript — Async/Await

📌 What is async/await?

Built on top of Promises, async/await allows you to write asynchronous code like synchronous code.

async function fetchData() {
  let response = await fetch("https://api.example.com");
  let data = await response.json();
  console.log(data);
}

🔄 Benefits

• Cleaner syntax
• Better error handling with try...catch
• Easier to chain and debug

---

🧱 JavaScript — Promisification

📌 What is Promisification?

Promisification means converting callback-based APIs to return Promises.

Example:

function wait(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

wait(1000).then(() => console.log("Waited 1 second"));

Use it to upgrade old codebases to Promise/async style.

---

🪝 JavaScript — Microtasks & Chaining

📌 Microtasks Queue

• Tasks from .then(), catch(), finally(), and async/await
• Run after the current call stack and before setTimeout()

console.log("Start");
Promise.resolve().then(() => console.log("Microtask"));
setTimeout(() => console.log("Macrotask"), 0);
console.log("End");

Output:

Start
End
Microtask
Macrotask

---

⏱ JavaScript — setTimeout / setInterval

🕒 setTimeout()

Executes a function after a delay.

setTimeout(() => console.log("Runs after 1 sec"), 1000);

🔁 setInterval()

Repeats a function at intervals.

setInterval(() => console.log("Runs every 2 sec"), 2000);

🛑 Note: Use clearTimeout() and clearInterval() to stop them.

---

📌 Summary – Recap & Next Steps

Asynchronous JavaScript is at the heart of modern web development. Mastering it will help you build fast, responsive apps, avoid blocking issues, and write more maintainable code.

🔍 Key Takeaways:

• Callbacks are simple but messy for deep async logic
• Promises simplify chaining and error handling
• async/await makes code easier to write and understand
• Understand Microtask queues and Promisification for full control

⚙️ Real-World Relevance:
From frontend apps to backend APIs in Node.js, async programming is everywhere. It’s essential for scalability, UX, and modern development workflows.

---

❓ FAQs

Q1: What is the difference between setTimeout() and Promises?

✅ setTimeout() schedules a delay, while Promises handle future results of async operations. Promises are more flexible for chaining and error handling.

---

Q2: Can async/await replace all Promises?

✅ async/await is syntactic sugar built on top of Promises. It makes them easier to use, but it doesn’t replace them.

---

Q3: What is a Microtask in JavaScript?

✅ A Microtask is a short function like a .then() callback scheduled after the current function completes but before any macrotasks (setTimeout).

---

Q4: Why is “callback hell” problematic?

✅ Callback hell leads to deeply nested code that’s hard to read, maintain, and debug. Promises or async/await solve this issue.

---

Q5: What does await do?

✅ await pauses the function execution until the Promise is resolved or rejected.

---

Share Now :