Async/Await vs Promises vs Callbacks: Which One to Use and When

A callback is a function you pass as an argument to be called when an async operation completes. They work but lead to deeply nested 'callback hell' for sequential async operations. A Promise represents a future value — it's an object that's either pending, fulfilled, or rejected. Promises can be chained with .then() and .catch(), which reads more linearly. Async/await is syntactic sugar on top of Promises — it lets you write asynchronous code that looks synchronous. Await pauses execution of the async function until the Promise resolves. Under the hood, async/await is still Promises. All three ultimately use the JavaScript event loop; they're different syntax for the same mechanism.

Accidentally sequential awaits when operations could run in parallel. If you write: const user = await getUser(); const posts = await getPosts(); — these run sequentially, each waiting for the previous to complete. If they're independent operations, you're wasting time. The correct approach is: const [user, posts] = await Promise.all([getUser(), getPosts()]); — both requests fire simultaneously and you wait for both to complete. A related mistake is not wrapping awaits in try/catch, so rejected Promises become unhandled rejections. Either wrap in try/catch or add a .catch() to the outer async function call.

Async/await requires the function to be declared async, which isn't always possible. For simple transformations in Promise chains (.then(data => data.json()).then(json => json.results)), a chain can be more concise. For non-function contexts like module top level (now mostly solved by top-level await in ES2022), chains were historically necessary. For stream processing and event emitters where you're not dealing with discrete async operations, callbacks and event handlers are still natural. In React, .then() chains are sometimes cleaner inside event handlers where you want to handle the Promise without using an async function. That said, for most sequential async logic with complex error handling, async/await is cleaner.