Callbacks

You will be able to explain what a JavaScript callback is, pass a function to another function, and use it to run code later or in response to an event.

What it is

A callback is a function that you pass into another function so the other function can call it later. The word callback means “call back”: the receiving function calls the function you gave it.

The mental model is a promise: “When you are ready, call this function.” In JavaScript, functions are values, so they can be stored in variables, passed as arguments, and returned from other functions. Related terms include higher-order function, asynchronous code, event handler, and callback queue.

Why it matters

• It lets code run after a delay, such as setTimeout.
• It lets code respond to events, such as clicks or key presses.
• It lets functions work with custom behavior without knowing the details.
• It is the foundation for many JavaScript patterns, including array methods like map and forEach.
• It helps separate “when” something happens from “what” should happen.

Syntax or steps

The smallest useful pattern is: define a function, pass it as an argument, and let the receiving function call it.

function greet(name) {
  console.log("Hello, " + name);
}

setTimeout(function () {
  greet("Ada");
}, 100);

Step by step:

1. Create a function that contains the code you want to run later.
2. Pass that function to another function, such as setTimeout.
3. The JavaScript runtime waits, then calls your function.

Example

This example uses a callback to run code after 100 milliseconds.

function showDone() {
  console.log("done");
}

setTimeout(showDone, 100);

Part by part:

• function showDone() defines the callback.
• setTimeout is a built-in function that accepts a callback and a delay.
• showDone is passed without parentheses, so it is not called immediately.
• 100 means the callback should be scheduled after about 100 milliseconds.
• When the time arrives, the runtime calls showDone(), printing done.

Common mistakes

• Calling the callback too early: setTimeout(showDone(), 100) runs showDone immediately and passes its result. Use setTimeout(showDone, 100).
• Forgetting that callbacks may run later: variables used inside the callback must still exist when it runs.
• Using the wrong argument order: setTimeout expects the function first and the delay second.
• Assuming callbacks always run in order: multiple timers or events can finish in a different order than they were started.

When to use it

Callbacks are best for simple “do this later” or “do this when something happens” tasks. For more complex asynchronous work, promises are often easier to read and handle errors.

Practice

Guided exercise: write a callback that logs ready after 500 milliseconds.

setTimeout(function () {
  console.log("ready");
}, 500);

Expected output: after about 500 milliseconds, the console prints ready.

Challenge: pass a named function to setTimeout instead of an anonymous function.

Solution hint: define function sayReady() { console.log("ready"); }, then call setTimeout(sayReady, 500).

Quick check

Question: Why is setTimeout(showDone, 100) usually correct, while setTimeout(showDone(), 100) is usually wrong?

Answer: The first passes the function itself to be called later. The second calls the function immediately and passes its return value.

Summary

A callback is a function passed to another function to be called later. It is a core JavaScript idea for timing, events, and reusable behavior. The key skill is passing the function without calling it too early.