JS Async Callbacks

Before Promises and async/await existed, asynchronous JavaScript relied entirely on callback functions -- a function passed as an argument, invoked later once an operation completes. Understanding callbacks remains essential both for reading older code and for appreciating exactly what problem Promises were designed to solve.

In this page:

What a Callback Is
Callbacks with Asynchronous Operations
The Error-First Callback Convention
The Problem: Callback Hell
Callbacks Still in Use Today

Syntax

javascript

function functionName(callback) {
  // async work
  callback(result);
}

functionName(function(result) {
  // use result
});

What a Callback Is

A callback is nothing more than a regular function passed as an argument to another function -- the receiving function calls it back at some later point, often once an asynchronous operation (like a timer or a network request) finishes.

Note: Remember a callback is passed as a reference (the bare function name, no parentheses) -- adding parentheses calls it immediately instead of handing it over to be called later.

Warning: Passing myFunction() instead of myFunction as a callback argument executes myFunction immediately and passes its RETURN VALUE as the callback, not the function itself.

उदाहरण: What a Callback Is

javascript

// Define the function `greet` taking `name`, `callback`
// Define the function `greet` taking `name`, `callback`
function greet(name, callback) {
  // Call `callback(`Hello, ${name}`)`
  // Call `callback(`Hello, ${name}`)`
  callback(`Hello, ${name}`);
}
// Call `greet("Sam", (message) => console.log(message))`
// Call `greet("Sam", (message) => console.log(message))`
greet("Sam", (message) => console.log(message));

Callbacks with Asynchronous Operations

The classic use of a callback is pairing it with something that takes time -- setTimeout(callback, delay) calls the callback after the delay elapses, and older AJAX APIs used callbacks to run code once a network response arrived, since there was no other way to react to something happening "later".

Note: Remember that code immediately after a call using an async callback runs before the callback itself fires -- the callback's scheduling does not pause the rest of the script.

Warning: A callback-based async operation offers no direct way to "wait" for it synchronously -- all dependent logic must live inside the callback itself, or be triggered by it.

उदाहरण: Callbacks with Asynchronous Operations

javascript

setTimeout(() => console.log("Runs later"), 500);
// Older AJAX used callbacks similarly, run once a response arrives

The Error-First Callback Convention

A widely-adopted convention, especially in Node.js-style code, is the "error-first" callback: callback(error, result), where the first argument is either an Error object (if something went wrong) or null (if it succeeded) -- checking that first argument becomes the standard way to handle failure in callback-based code.

Note: Always check the error argument first inside an error-first callback, before touching the result argument, since the result is meaningless (or absent) when an error occurred.

Warning: Skipping the error check and assuming every callback invocation represents success is a common source of bugs in callback-based code, since errors are easy to silently ignore this way.

उदाहरण: The Error-First Callback Convention

javascript

// Define the function `loadData` taking `callback`
// Define the function `loadData` taking `callback`
function loadData(callback) {
  // Call `setTimeout(() => callback(null, { id: 1 }), 100)`
  // Call `setTimeout(() => callback(null, { id: 1 }), 100)`
  setTimeout(() => callback(null, { id: 1 }), 100);
}
loadData((error, result) => {
  if (error) console.log("Failed:", error);
  else console.log("Success:", result);
});

The Problem: Callback Hell

When several asynchronous steps must happen in sequence, each depending on the previous one's result, callback-based code nests deeper and deeper -- a pattern commonly called 'callback hell' or 'the pyramid of doom', which becomes genuinely hard to read, modify, and debug as more steps are added.

Note: Recognize deeply nested callbacks as a signal that Promises or async/await would express the same logic far more readably.

Warning: Error handling becomes especially painful in deeply nested callbacks, since each level typically needs its own separate error check, multiplying the boilerplate at every level of nesting.

उदाहरण: The Problem: Callback Hell

javascript

function step1(cb) { setTimeout(() => cb(1), 10); }
function step2(a, cb) { setTimeout(() => cb(a + 1), 10); }
function step3(b, cb) { setTimeout(() => cb(b + 1), 10); }
step1((a) => {
  step2(a, (b) => {
    step3(b, (c) => console.log("Deeply nested result:", c)); // callback hell
  });
});

Callbacks Still in Use Today

Despite Promises and async/await being preferred for most sequential async logic, plain callbacks remain common and appropriate for certain patterns -- event listeners (addEventListener), array iteration methods (forEach, map), and any 'run this every time X happens' scenario that is not really about a single eventual result.

Note: Recognize that callbacks are not "deprecated" -- they remain the right tool for repeated or event-driven invocations, while Promises fit better for a single eventual async result.

Warning: Trying to force an event listener (which can fire many times) into a Promise-based pattern (designed for a single resolution) is usually a poor fit -- callbacks remain the natural choice there.

उदाहरण: Callbacks Still in Use Today

javascript

document.addEventListener("click", () => console.log("Clicked")); // still a normal, appropriate callback use
[1, 2, 3].forEach(n => console.log(n)); // another normal callback use

Live Example

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson JS Async/Await Next Lesson → JS Async Parallel

JS Async Callbacks

What a Callback Is

Callbacks with Asynchronous Operations

The Error-First Callback Convention

The Problem: Callback Hell

Callbacks Still in Use Today

Chapter Quiz — Complete all 26 topics to unlock

Login to run this code