Book 01 · Programming FundamentalsPage 7 of 56

Callback

Q: Are callbacks always asynchronous?

No. Callbacks passed to array methods like map, filter, and forEach run synchronously, immediately during the call. Only callbacks tied to timers, events, or input/output operations run asynchronously.

Updated September 29, 20262 min read

In short

A callback is a function passed as an argument to another function, which then calls it later, for example when a task finishes or an event happens.

What is a callback?

A callback is a function you hand to another function so that it can be 'called back' at the right moment. The receiving function decides when to run it: immediately, once some work is done, or every time an event occurs. This is possible in languages like JavaScript because functions can be passed around like any other value.

Leaving your phone number at a busy restaurant is a good analogy for a callback. Instead of waiting at the door, you go about your day, and when your table is ready, they call you back. In code, callbacks are used the same way: to respond to button clicks, to handle the result of reading a file, or to customize behavior, as in array.map(callback).

Callbacks can be synchronous or asynchronous. A synchronous callback runs right away, during the call, as with forEach or map. An asynchronous callback runs later, after something like a timer, a network request, or a file read completes.

Relying on many nested asynchronous callbacks can lead to deeply indented, hard-to-read code known as 'callback hell'. Promises and async/await were added to JavaScript largely to solve this, but callbacks are still everywhere, especially in event listeners and array methods.

At a glance

You don't wait for the result: you leave a function to be called with it. Promises and async/await are tidier ways to write the same idea.

Key takeaways

A callback is a function passed into another function to be run later.
The receiving function controls when and how often the callback runs.
Callbacks can be synchronous (like map) or asynchronous (like setTimeout).
Deeply nested async callbacks cause 'callback hell', which promises and async/await help avoid.

Example

Three common kinds of callbacksjavascript

// Synchronous callback: runs once for each item, right away
const prices = [10, 20, 30];
const withTax = prices.map((price) => price * 1.2);

// Asynchronous callback: runs later, after 1 second
setTimeout(() => {
  console.log("One second has passed");
}, 1000);

// Event callback: runs every time the button is clicked
button.addEventListener("click", () => console.log("Clicked!"));

Readers ask

What is the difference between a callback and a promise?

A callback is a function you pass in to be called when work finishes. A promise is an object that represents the future result of that work, which you can chain with .then() or wait for with await; promises make sequencing and error handling much simpler than nested callbacks.

What is callback hell?

Callback hell is code where many asynchronous callbacks are nested inside each other, forming a pyramid shape that is hard to read, debug, and handle errors in. It is usually fixed by switching to promises or async/await.

Are callbacks always asynchronous?

No. Callbacks passed to array methods like map, filter, and forEach run synchronously, immediately during the call. Only callbacks tied to timers, events, or input/output operations run asynchronously.

Often compared

Callback vs PromiseA callback is a function you hand to another function to run when it's done, while a promise stands for a future result you can chain and catch errors on.