Skip to content

19. Callback Hell.md

Latest commit

 

History

History
116 lines (85 loc) · 2.68 KB

19. Callback Hell.md

File metadata and controls

116 lines (85 loc) · 2.68 KB

Callback Hell

What is a Callback?

A callback is a function passed as an argument to another function, to be executed later (often after an async task).

Example:

function fetchData(callback) {
  setTimeout(() => {
    callback('Data loaded');
  }, 1000);
}

fetchData((result) => {
  console.log(result);
});

What is Callback Hell?

Callback Hell happens when you have multiple asynchronous operations that depend on each other, and you nest callbacks inside callbacks.

This leads to:

  • Deeply nested code (the "pyramid of doom")
  • Hard-to-read, hard-to-debug code
  • Difficulty in error handling

Example:

getUser(1, function (user) {
  getPosts(user.id, function (posts) {
    getComments(posts[0].id, function (comments) {
      saveToDB(comments, function (result) {
        console.log('All done');
      });
    });
  });
});

Problems:

  • Hard to read → deep indentation
  • Hard to maintain → changing flow is tricky
  • Error handling nightmare → need to check err at every level
  • Tight coupling → functions are less reusable

Why Callback Hell Happens

  • JavaScript is single-threaded and uses asynchronous operations for tasks like API calls, file I/O, timers.
  • When you have dependent async steps, naive implementation leads to deep nesting.

How to Avoid Callback Hell

✅ 1. Modularize functions

Instead of nesting everything inline:

getUser(1, handleUser);

function handleUser(user) {
  getPosts(user.id, handlePosts);
}

function handlePosts(posts) {
  getComments(posts[0].id, handleComments);
}

function handleComments(comments) {
  saveToDB(comments, () => console.log('All done'));
}

✅ 2. Use Promises

getUser(1)
  .then((user) => getPosts(user.id))
  .then((posts) => getComments(posts[0].id))
  .then((comments) => saveToDB(comments))
  .then(() => console.log('All done'))
  .catch((err) => console.error(err));

✅ 3. Use async/await

async function process() {
  try {
    const user = await getUser(1);
    const posts = await getPosts(user.id);
    const comments = await getComments(posts[0].id);
    await saveToDB(comments);
    console.log('All done');
  } catch (err) {
    console.error(err);
  }
}

process();

Benefits:

  • Looks synchronous
  • Easier to read and debug
  • Centralized error handling with try...catch

Interview-Ready Definition

Callback Hell is a situation where nested callbacks make asynchronous JavaScript code difficult to read, maintain, and debug. It often occurs when multiple async operations depend on each other. Solutions include modularizing callbacks, using Promises, or adopting async/await for cleaner, more maintainable code.