JS Callbacks

JavaScript Callbacks: Callbacks, Async Flow, & Callback Hell

A callback function is a function passed as an argument to another function, which is then invoked inside the outer function to complete a specific routine or asynchronous operation.

Synchronous vs Asynchronous Callback Flow

flowchart TD
    subgraph Sync ["Synchronous Callback"]
    S1["[1, 2].map(fn)"] --> S2["Executes immediately in line"] --> S3["Returns array"]
    end

    subgraph Async ["Asynchronous Callback"]
    A1["fetchData(url, callback)"] --> A2["Offloaded to Web API background"] --> A3["Callback triggered when I/O completes"]
    end

Callback Types Comparison

Practical Code Example

// Demonstrating Asynchronous Callbacks and Callback Hell (Pyramid of Doom)

// 1. Asynchronous Callback Pattern with Error-First Convention
function fetchUserAsync(userId, callback) {
  setTimeout(() => {
    if (userId <= 0) {
      callback(new Error("Invalid User ID"), null);
      return;
    }
    const user = { id: userId, username: "maksudur_dev" };
    callback(null, user); // Error-first callback convention (error, data)
  }, 100);
}

// 2. Consuming Async Callback safely
fetchUserAsync(101, (err, user) => {
  if (err) {
    console.error(`Callback Error: ${err.message}`);
    return;
  }
  console.log("Successfully fetched user:", user);
});

// 3. Callback Hell Demonstration (Nested Pyramid of Doom)
/*
fetchUserAsync(1, (err, user) => {
  fetchOrders(user.id, (err, orders) => {
    fetchOrderDetails(orders[0].id, (err, details) => {
      // Hard to read, maintain, or handle errors properly!
    });
  });
});
*/

Best Practices & Gotchas

• Use Error-First Callback Convention: In Node.js and standard JS callback patterns, pass (err, result) where the first parameter is reserved for errors.
• Avoid Callback Hell (Pyramid of Doom): Deeply nested callbacks reduce readability and obscure error handling. Refactor nested callbacks using Promises or async/await.
• Do Not Mix Sync and Async Callbacks: Ensure a function is either strictly synchronous or strictly asynchronous; do not conditionally call callbacks synchronously in some code paths and asynchronously in others.

Self-Check Challenge

Refactor a nested callback chain into flat modular helper functions.