Callback in JavaScript

#webdev #javascript #callbacks #programming

If you're just starting out with JavaScript, you've probably come across the word "callback" and felt a little confused. Don't worry — it's a simple idea with a slightly intimidating name. Let's break it down.

The Simple Definition

A callback is just a function that you pass into another function, so it can be run later.

That's really it. In JavaScript, functions aren't just things you call — they're values you can pass around, just like a number or a string. So you can hand a function to another function as an argument.

A Real-Life Analogy

Imagine you order food at a restaurant. Instead of standing at the counter waiting for it, you give the cashier your phone number. They call you back the moment your food is ready.

You didn't wait around doing nothing — and the cashier knows exactly what to do once your order is done: call your number.

That's exactly what a callback is. You're saying:

"Here's a function. Run it once you're done doing your thing."

A Simple Code Example

function orderFood(callback) {
  console.log("Order placed!");
  callback();
}

function pickUpOrder() {
  console.log("Order picked up!");
}

orderFood(pickUpOrder);

Output:

Order placed!
Order picked up!

Here, pickUpOrder is the callback — a function passed into orderFood, to be run when orderFood decides it's time.

Why Not Just Call the Function Normally?

Good question. In the example above, you could've just called pickUpOrder() directly and it would look the same. But callbacks become important when something takes time — like waiting for a timer, a file to load, or data from a server.

JavaScript doesn't freeze and wait around for these things. Instead, it keeps running your other code, and calls your callback function later, once the task is finished.

console.log("Order placed!");

setTimeout(() => {
  console.log("Order ready!");
}, 3000); // waits 3 seconds

console.log("Doing homework while I wait...");

Output:

Order placed!
Doing homework while I wait...
Order ready!

Notice: "Order ready!" shows up last, even though it's written in the middle of the code. That's the whole point of a callback — it runs whenever the task finishes, not necessarily in the order it's written.

You've Probably Already Used One

If you've ever written code like this, you've used a callback without knowing it:

button.addEventListener("click", () => {
  console.log("Button clicked!");
});

The arrow function here is a callback — it doesn't run right away. It waits until the button is actually clicked.

Quick Summary

A callback is a function passed into another function.
It gets called ("called back") once that other function is ready for it.
Callbacks are especially useful for things that take time — timers, clicks, loading data — so your code doesn't have to freeze and wait.

Once this clicks, you're ready to explore where callbacks are used everywhere in JavaScript — from button clicks to loading data from the internet. It's one of the most important building blocks to understand as a beginner.

DEV Community