📞 Callback Functions and Patterns

What Is a Callback?

A callback function is simply a function passed as an argument to another function, so that the other function can call it back at the right moment. That's the whole idea — but it's a powerful one.

☕ Leaving your name at the counter. You order a coffee and give your name. You don't stand frozen at the register — you step aside and do other things. When the drink is ready, the barista calls your name. Your name is the callback; the barista decides when to invoke it.

Any function that accepts a function as an argument (or returns one) is called a higher-order function. Callbacks give you inversion of control: instead of your code deciding when something runs, you hand that decision to another function.

Synchronous Callbacks

Not every callback is async. JavaScript's array methods take callbacks and run them immediately, one element at a time, before returning.

const numbers = [1, 2, 3, 4, 5];

// forEach: run a callback for each element (no return value)
numbers.forEach((n) => console.log(n * 2));

// map: build a new array from each callback's return value
const doubled = numbers.map((n) => n * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

// filter: keep elements where the callback returns true
const evens = numbers.filter((n) => n % 2 === 0);
console.log(evens); // [2, 4]

// reduce: fold the array into a single value
const sum = numbers.reduce((total, n) => total + n, 0);
console.log(sum); // 15

These callbacks are synchronous: each one finishes before the next element is processed, and the method returns only when every element is done.

Writing your own higher-order function

// Accepts a callback and decides how/when to call it
function withGreeting(name, callback) {
  const message = `Hello, ${name}!`;
  callback(message);
}

withGreeting('Ray', (msg) => console.log(msg)); // Hello, Ray!

Because withGreeting doesn't hard-code what happens with the message, you can reuse it with any behavior you pass in — logging, rendering, storing, and so on.

Asynchronous Callbacks

Callbacks truly shine with asynchronous work: you register what should happen later, and the runtime invokes it when the event or timer completes (recall the event loop from the previous lesson).

Timers

console.log('Starting…');

setTimeout(function timerCallback() {
  console.log('2 seconds have passed!');
}, 2000);

console.log('Timer set — continuing other work…');
// Starting…
// Timer set — continuing other work…
// 2 seconds have passed!

DOM events

const button = document.getElementById('submit-button');

button.addEventListener('click', function onClick(event) {
  console.log('Button clicked!', event.target);
});

Network requests (modern fetch)

The classic XMLHttpRequest API used success and error callbacks. Today you'll almost always use fetch, whose .then() takes a callback too — Promises are really a structured layer over the same idea:

fetch(`https://api.example.com/users/${userId}`)
  .then((response) => {
    if (!response.ok) throw new Error(`Request failed: ${response.status}`);
    return response.json();
  })
  .then((data) => {
    console.log('User data:', data);
  })
  .catch((error) => {
    console.error('Error fetching user:', error.message);
  });

The Error-First Convention

Async callbacks need a way to report failure. Node.js standardized the error-first callback: the callback's first parameter is an error (or null if all went well), and results follow.

function readConfig(path, callback) {
  if (!path.endsWith('.json')) {
    // Failure: pass an Error as the FIRST argument
    callback(new Error('Only .json files are supported'));
    return;
  }
  // Success: first arg is null, result comes second
  setTimeout(() => {
    callback(null, { theme: 'dark', from: path });
  }, 500);
}

readConfig('settings.json', (err, config) => {
  if (err) {
    console.error('Failed:', err.message);
    return;
  }
  console.log('Loaded config:', config);
});

Callback Hell & How to Escape It

When one async step depends on the previous one, nesting callbacks quickly produces a rightward-drifting "pyramid of doom" — callback hell.

// Hard to read, hard to error-handle, hard to change
getUser(userId, (user) => {
  getOrders(user.id, (orders) => {
    getRecommendations(orders, (recs) => {
      getProductDetails(recs, (products) => {
        render(user, orders, recs, products); // deeply nested
      });
    });
  });
});

The problems: it's hard to follow, error handling gets duplicated at every level, and reordering or parallelizing steps is painful.

Fix 1 — Named functions

Pull each anonymous callback out into a named function to flatten the pyramid:

function handleUser(user)      { getOrders(user.id, handleOrders); }
function handleOrders(orders)  { getRecommendations(orders, handleRecs); }
function handleRecs(recs)      { getProductDetails(recs, handleProducts); }
function handleProducts(prods) { render(prods); }

getUser(userId, handleUser); // reads top to bottom

Fix 2 — Modularize with shared state

Group related steps and collect results in one object, which also lets some steps run in parallel:

function loadProfile(userId, done) {
  const profile = {};

  getUser(userId, (err, user) => {
    if (err) return done(err);
    profile.user = user;
    getOrders(user.id, (err, orders) => {
      if (err) return done(err);
      profile.orders = orders;
      done(null, profile);
    });
  });
}

Callbacks in Event-Driven Code

Callbacks underpin event-driven architecture, where components communicate through named events instead of direct calls. Here's a compact EventEmitter — the same pattern behind the DOM and Node's events module.

class EventEmitter {
  constructor() {
    this.listeners = {};
  }

  on(event, callback) {
    (this.listeners[event] ??= []).push(callback);
    return this; // enable chaining
  }

  off(event, callback) {
    if (!this.listeners[event]) return this;
    this.listeners[event] = this.listeners[event].filter((cb) => cb !== callback);
    return this;
  }

  once(event, callback) {
    const wrapper = (...args) => {
      callback(...args);
      this.off(event, wrapper);
    };
    return this.on(event, wrapper);
  }

  emit(event, ...args) {
    (this.listeners[event] ?? []).forEach((cb) => cb(...args));
    return this;
  }
}

// Usage
const users = new EventEmitter();

users.on('login', (user) => console.log(`Welcome, ${user.name}`));
users.on('login', (user) => console.log(`Analytics: login ${user.id}`));
users.once('login', (user) => console.log('This runs only the first time'));

users.emit('login', { id: 7, name: 'Ray' });

Hands-on Exercise

// Three fake async steps using error-first callbacks
function getUser(id, cb)        { setTimeout(() => cb(null, { id, name: 'Ray' }), 300); }
function getOrders(userId, cb)  { setTimeout(() => cb(null, ['order-1', 'order-2']), 300); }
function getTotal(orders, cb)   { setTimeout(() => cb(null, orders.length * 25), 300); }

// Nested "pyramid" version — your job is to improve this
getUser(1, (e1, user) => {
  getOrders(user.id, (e2, orders) => {
    getTotal(orders, (e3, total) => {
      console.log(`${user.name} spent $${total}`);
    });
  });
});

function handleError(err) {
  console.error('Something failed:', err.message);
}

function start()          { getUser(1, onUser); }
function onUser(err, user) {
  if (err) return handleError(err);
  getOrders(user.id, (e, orders) => onOrders(e, user, orders));
}
function onOrders(err, user, orders) {
  if (err) return handleError(err);
  getTotal(orders, (e, total) => onTotal(e, user, total));
}
function onTotal(err, user, total) {
  if (err) return handleError(err);
  console.log(`${user.name} spent $${total}`); // Ray spent $50
}

start();

Summary & Quiz

📚 Further Reading

• MDN — Callback function
• MDN — Introducing callbacks
• Eloquent JavaScript — Asynchronous Programming

🚀 What's Next?

You've felt the pain callbacks can cause at scale. Next we meet the tool designed to fix it: the Promise — its structure, its three states, and how it turns pyramids into flat chains.