What is callback hell, and how did Promises/async-await address it?

Short Interview Answer

Deeply nested callbacks for sequential async flow become unreadable and hard to error-handle; Promises flatten chains and async/await restores linear style.

Detailed Explanation

Callback-based APIs nest success handlers, often duplicating error-first checks (`err, data`). Promises represent future values with `.then`/`.catch` composition, enabling flatter control flow and centralized error handling. `async/await` is syntactic sugar over promises that lets you write asynchronous steps that look synchronous while still yielding between awaits. You still need to understand concurrency (`Promise.all`) vs sequencing. Modern APIs prefer promises; wrap callbacks with `new Promise` when needed.

Example

// nested callbacks vs await
async function loadUser(id) {
  const user = await fetch(`/api/users/${id}`).then((r) => r.json());
  const posts = await fetch(`/api/posts?user=${user.id}`).then((r) => r.json());
  return { user, posts };
}

Interview Tip

Mention error propagation differences briefly.

Common Mistake

Thinking async/await removes the need to handle failures.