Callback vs Promise vs Async/Await in JavaScript

Callback vs Promise vs Async/Await in JavaScript

JavaScript has three main approaches to async code: callbacks, promises, and async/await. Each builds on the previous one. Here is how they compare.

Callbacks (The Original)

fetchUser(id, (err, user) => {
  if (err) { console.error(err); return; }
  fetchPosts(user, (err, posts) => {
    if (err) { console.error(err); return; }
    render(user, posts);
  });
});
``
**Pros**: simple, universal, works everywhere.
**Cons**: callback hell (deep nesting), inversion of control, hard error handling, hard to run in parallel.

### Promises (ES6)

```js
fetchUserP(id)
  .then(user => fetchPostsP(user))
  .then(posts => render(user, posts))
  .catch(err => console.error(err));
``
**Pros**: flat chaining, guaranteed once-only resolution, `.catch` for errors, `Promise.all` for parallel.
**Cons**: still chain-based, can be verbose.

### Async/Await (ES8)

```js
async function main() {
  try {
    const user = await fetchUserP(id);
    const posts = await fetchPostsP(user);
    render(user, posts);
  } catch (err) {
    console.error(err);
  }
}
main();
``
**Pros**: looks synchronous, easy error handling with try/catch, easy to read and debug.
**Cons**: under the hood it is still promises, `await` pauses the function, need to understand promises first.

### Comparison

| Feature | Callbacks | Promises | Async/Await |
|---|---|---|---|
| Nesting | Deep (hell) | Flat (.then) | None (looks sync) |
| Error handling | Manual (if err) | .catch | try/catch |
| Parallel | Manual counter | Promise.all | Promise.all + await |
| Once-only | No guarantee | Guaranteed | Guaranteed (uses promises) |
| Readability | Low | Medium | High |
| Debugging | Hard | Medium | Easy (stack traces) |
| Browser support | Universal | ES6+ | ES8+ |

### When to Use Each

- **Callbacks**: in old codebases, for simple one-off calls, or when interfacing with callback-based APIs.
- **Promises**: when you need to chain operations or run them in parallel (`Promise.all`).
- **Async/await**: for most modern code. It is the most readable and maintainable.

### Mixing Them

Async/await is built on promises. You can mix them:

```js
async function main() {
  const [a, b, c] = await Promise.all([fetchA(), fetchB(), fetchC()]);
  console.log(a, b, c);
}
``
### The Takeaway

Callbacks are the original (nesting hell, manual errors). Promises flatten chaining with `.then`/`.catch`. Async/await makes async code look synchronous with try/catch. Use async/await for modern code, promises for chaining and parallel, and callbacks only for old APIs or simple cases.