What's the difference between a callback and a higher-order function?

A higher-order function TAKES a function as an argument. A callback IS the function being passed. forEach is a higher-order function; the (item) => {} you pass to it is the callback.

Are all callbacks asynchronous?

No! forEach, map, filter all use synchronous callbacks (they run immediately). Only callbacks passed to async operations (setTimeout, fetch, event listeners) are asynchronous.

Why not just use Promises everywhere?

Promises are great for one-time async operations. But event listeners fire multiple times: a Promise resolves only once. Callbacks remain the right tool for repeated events (clicks, keypresses, WebSocket messages).

Can callbacks return values?

Synchronous callbacks can (like map). But async callbacks can't return values to the caller because the caller has already moved on. That's why async callbacks receive results through parameters, not return values.

JavaScript Callbacks

The original async pattern. Pass a function to be called when work is done.

Module 7 · Async Programming

Browsers and servers spend most of their time waiting: for network responses, timers, and user input. Async JavaScript lets your program stay responsive while work happens in the background using callbacks, Promises, and async/await.

Learn Async Callbacks in JavaScript: covering Async Callbacks, Error-First Pattern, Callback Hell, Fixing Callback Hell with interactive visual examples and step-by-step explanations.

About this module

Synchronous code runs one line at a time. But real applications wait for network requests, file reads, and timers. Async JavaScript lets your program keep running while that work happens in the background: without freezing the UI.

This module covers the full async story: callbacks, Promises, async/await, and the Fetch API. Visual timelines show when tasks enter the queue, when they resolve, and why async/await is syntactic sugar over Promises, not magic.

Why this matters

Understanding async callbacks is essential for every JavaScript developer. It shows up in frontend UI code, backend APIs, and framework internals, and getting it wrong leads to bugs that are hard to trace. This chapter builds intuition with visuals so the behavior sticks.

Key topics covered

Async Callbacks
Error-First Pattern
Callback Hell
Fixing Callback Hell
Real Examples

Where you'll use it

Building interactive web applications with async callbacks
Processing and transforming data in frontend and backend code
Writing cleaner, more maintainable JavaScript modules
Debugging and reviewing code during development

Async Callbacks

A function you pass that gets called when an async operation completes.

// Synchronous callback (runs immediately):
[1, 2, 3].forEach(n => console.log(n));

// Asynchronous callback (runs LATER):
setTimeout(() => {
  console.log("I run after 1 second");
}, 1000);

The key difference: async callbacks don't run immediately. They're stored and called when the async operation finishes.

1 / 2

Error-First Pattern

Node.js convention: first argument is always the error.

// Error-first callback pattern:
function readFile(path, callback) {
  setTimeout(() => {
    if (path === "") {
      callback(new Error("Path is empty"), null);
    } else {
      callback(null, "file contents here");
    }
  }, 100);
}

// Usage: always check error first:
readFile("data.txt", (error, data) => {
  if (error) {
    console.error("Failed:", error.message);
    return; // stop here!
  }
  console.log("Got:", data);
});

Convention:

callback(error, result)

• If error is null → success, use result

• If error exists → failure, handle error

Callback Hell

Nested callbacks become unreadable. The 'Pyramid of Doom'.

// The problem: sequential async operations
getUser(userId, (err, user) => {
  if (err) return handleError(err);
  getOrders(user.id, (err, orders) => {
    if (err) return handleError(err);
    getOrderDetails(orders[0].id, (err, details) => {
      if (err) return handleError(err);
      getShipping(details.trackingId, (err, shipping) => {
        if (err) return handleError(err);
        // 😱 4 levels deep! And it gets worse...
        displayShipping(shipping);
      });
    });
  });
});

Problems with callback hell:

• Hard to read (grows to the right)
• Hard to handle errors (repeated error checks)
• Hard to debug (unclear execution flow)
• Hard to add/remove steps
• Variables trapped in scopes

Fixing Callback Hell

Named functions and modularization help, but Promises are the real solution.

// Fix 1: Named functions (flatten the pyramid)
function handleUser(err, user) {
  if (err) return handleError(err);
  getOrders(user.id, handleOrders);
}

function handleOrders(err, orders) {
  if (err) return handleError(err);
  getOrderDetails(orders[0].id, handleDetails);
}

function handleDetails(err, details) {
  if (err) return handleError(err);
  getShipping(details.trackingId, displayShipping);
}

// Start the chain:
getUser(userId, handleUser);

// Fix 2: Promises (the modern solution)
getUser(userId)
  .then(user => getOrders(user.id))
  .then(orders => getOrderDetails(orders[0].id))
  .then(details => getShipping(details.trackingId))
  .then(shipping => displayShipping(shipping))
  .catch(handleError); // one error handler!

// Fix 3: Async/Await (cleanest)
async function showShipping(userId) {
  const user = await getUser(userId);
  const orders = await getOrders(user.id);
  const details = await getOrderDetails(orders[0].id);
  const shipping = await getShipping(details.trackingId);
  displayShipping(shipping);
}

Real Examples

Where you still see callbacks today.

// Event listeners (always callbacks):
button.addEventListener("click", () => {
  console.log("Clicked!");
});

// Array methods:
[1, 2, 3].map(n => n * 2);

// setTimeout / setInterval:
setTimeout(() => console.log("later"), 1000);

// Node.js fs (legacy API):
const fs = require("fs");
fs.readFile("file.txt", "utf8", (err, data) => {
  if (err) throw err;
  console.log(data);
});

// Geolocation API:
navigator.geolocation.getCurrentPosition(
  (pos) => console.log(pos.coords),
  (err) => console.error(err)
);

Callbacks aren't dead: event listeners, array methods, and many APIs still use them. But for sequential async operations, Promises and async/await are far better.

FAQ

Common questions about async callbacks.

// Error-first callback pattern: function readFile(path, callback) { setTimeout(() => { if (path === "") { callback(new Error("Path is empty"), null); } else { callback(null, "file contents here"); } }, 100); } // Usage: always check error first: readFile("data.txt", (error, data) => { if (error) { console.error("Failed:", error.message); return; // stop here! } console.log("Got:", data); });

// The problem: sequential async operations getUser(userId, (err, user) => { if (err) return handleError(err); getOrders(user.id, (err, orders) => { if (err) return handleError(err); getOrderDetails(orders[0].id, (err, details) => { if (err) return handleError(err); getShipping(details.trackingId, (err, shipping) => { if (err) return handleError(err); // 😱 4 levels deep! And it gets worse... displayShipping(shipping); }); }); }); });

// Fix 1: Named functions (flatten the pyramid) function handleUser(err, user) { if (err) return handleError(err); getOrders(user.id, handleOrders); } function handleOrders(err, orders) { if (err) return handleError(err); getOrderDetails(orders[0].id, handleDetails); } function handleDetails(err, details) { if (err) return handleError(err); getShipping(details.trackingId, displayShipping); } // Start the chain: getUser(userId, handleUser);

// Fix 2: Promises (the modern solution) getUser(userId) .then(user => getOrders(user.id)) .then(orders => getOrderDetails(orders[0].id)) .then(details => getShipping(details.trackingId)) .then(shipping => displayShipping(shipping)) .catch(handleError); // one error handler! // Fix 3: Async/Await (cleanest) async function showShipping(userId) { const user = await getUser(userId); const orders = await getOrders(user.id); const details = await getOrderDetails(orders[0].id); const shipping = await getShipping(details.trackingId); displayShipping(shipping); }

// Event listeners (always callbacks): button.addEventListener("click", () => { console.log("Clicked!"); }); // Array methods: [1, 2, 3].map(n => n * 2); // setTimeout / setInterval: setTimeout(() => console.log("later"), 1000); // Node.js fs (legacy API): const fs = require("fs"); fs.readFile("file.txt", "utf8", (err, data) => { if (err) throw err; console.log(data); }); // Geolocation API: navigator.geolocation.getCurrentPosition( (pos) => console.log(pos.coords), (err) => console.error(err) );

About this chapter

About this module

Why this matters

Key topics covered

Where you'll use it

Async Callbacks

Error-First Pattern

Callback Hell

Fixing Callback Hell

Real Examples

FAQ

About this chapter

About this module

Why this matters

Key topics covered

Where you'll use it

Async Callbacks

Error-First Pattern

Callback Hell

Fixing Callback Hell

Real Examples

FAQ