Callback Functions in JavaScript

Analogy categoryAnalogies

1. Introduction

A callback function is a function passed as an argument to another function, to be invoked (called back) at a later point, either immediately during that function's execution or asynchronously once some operation completes. Callbacks are the foundation of event handling, array iteration methods, and asynchronous operations like timers and network requests in JavaScript.

🏏

Cricket analogy: Handing the third umpire a specific instruction, check for a no-ball on every delivery, is like passing a callback; that check gets invoked automatically at the right moment, whether during play or later on review.

2. Syntax

javascript

function doSomething(value, callback) {
  const result = value * 2;
  callback(result);
}

doSomething(5, function (result) {
  console.log(result);
});

// asynchronous callback
setTimeout(() => {
  console.log("runs later");
}, 1000);

3. Explanation

A synchronous callback is invoked immediately, as part of the function that received it, before that function returns — array methods like map, filter, and forEach use synchronous callbacks. An asynchronous callback, by contrast, is scheduled to run later, after the current call stack has cleared, such as callbacks passed to setTimeout, fetch, or file I/O operations. The JavaScript engine continues executing the rest of the synchronous code first, then runs queued asynchronous callbacks via the event loop.

🏏

Cricket analogy: A synchronous callback is like the on-field umpire signalling a boundary immediately as it happens during play, while an asynchronous callback is like the match referee's post-game report on a code-of-conduct breach, issued only after the day's play has fully wrapped up.

Gotcha: Nesting many asynchronous callbacks inside each other (each one starting the next asynchronous step) creates deeply indented, hard-to-read, hard-to-debug code known as 'callback hell' or the 'pyramid of doom'. Modern JavaScript addresses this with Promises and async/await, which express the same asynchronous sequences in a flatter, more readable form.

4. Example

javascript

function processSync(value, callback) {
  const result = value * 2;
  callback(result);
}

processSync(5, (result) => console.log("sync result:", result));

function processAsync(value, callback) {
  setTimeout(() => callback(value * 2), 0);
}

console.log("before async call");
processAsync(5, (result) => console.log("async result:", result));
console.log("after async call");

5. Output

text

sync result: 10
before async call
after async call
async result: 10

6. Key Takeaways

A callback is a function passed to another function to be invoked later, either synchronously or asynchronously.
Synchronous callbacks (used by map, filter, forEach) run immediately, before the outer function returns.
Asynchronous callbacks (used by setTimeout, fetch) are deferred and run after the current synchronous code finishes, via the event loop.
Deeply nested asynchronous callbacks create 'callback hell', which hurts readability and error handling.
Promises and async/await were introduced to flatten and simplify asynchronous callback chains.