# JavaScript Callbacks: How They Work in Asynchronous Code

Source: https://devdocs10.com/articles/javascript/js-callbacks  
By Murat Bo · Published 2026-07-12 · DevDocs10 (https://devdocs10.com)

Callbacks are one of the core building blocks of asynchronous JavaScript. They let you pass a function into another function so it can be executed later, often after work such as a timer, network request, or file operation finishes.

> **Quick answer:** A callback is a function passed to another function to be called later. In JavaScript, callbacks are common for asynchronous tasks, event handling, and reusable utility functions.

> **Difficulty:** Beginner
>
> **You'll understand this better if you know:** basic JavaScript functions, variables, and how function arguments work.

## 1. What Is Callbacks?

A callback is simply a function that another function receives as an argument and then invokes at the right time. The main idea is that JavaScript can hand off behavior instead of only handing off values.

- A callback is a function reference, not the result of calling that function.
- It can run immediately or later, depending on the parent function.
- It is used heavily in asynchronous code and event-driven programming.
- It makes functions more flexible because behavior can be customized.

For example, a sorting function can use a callback to decide how two values should be compared, and a timer can use a callback to decide what happens when time runs out.

## 2. Why Callbacks Matter

Callbacks matter because they help JavaScript handle work that does not finish instantly. Instead of blocking the rest of the program, JavaScript can continue running other code and come back to the callback later.

They are especially important when working with browser events, timers, APIs, and older Node.js-style APIs. Even though promises and `async`/`await` are now more common for many tasks, callbacks still appear everywhere in JavaScript APIs and libraries.

## 3. Basic Syntax

The core idea is that you pass a function as an argument. The receiving function decides when to call it.

### Simple callback function

Here is the smallest useful pattern:

```javascript
function greet(name, callback) {
  console.log(`Hello, ${name}`);
  callback();
}

function done() {
  console.log("Finished greeting");
}

greet("Mina", done);
```

Output (tested with Node 24.21.0):

```text
Hello, Mina
Finished greeting
```

In this example, `done` is passed into `greet` and called after the greeting message is printed. Notice that `done` is passed by name, without parentheses.

### Function reference versus function call

Passing `done` gives the function itself to `greet`. Writing `done()` would run it immediately and pass its return value instead, which is usually not what you want for a callback.

## 4. Step-by-Step Examples

### Example 1: Timer callback with `setTimeout`

This is one of the most familiar asynchronous examples. The callback runs after the timer delay.

```javascript
console.log("Start");

setTimeout(function() {
  console.log("This runs later");
}, 1000);

console.log("End");
```

Output (tested with Node 24.21.0):

```text
Start
End
This runs later
```

The output shows that JavaScript continues running `End` before the callback fires. That is the asynchronous nature of callbacks in action.

### Example 2: Array methods that use callbacks

Many built-in methods accept callbacks to process each item in a collection.

```javascript
const prices = [12, 25, 8];

const discounted = prices.map(function(price) {
  return price * 0.9;
});

console.log(discounted);
```

Output (tested with Node 24.21.0):

```text
[ 10.8, 22.5, 7.2 ]
```

Here, `map` calls the callback once for each item and uses the returned value to build a new array. This is a synchronous callback, but the same callback idea applies.

### Example 3: Error-first callback style

Some older Node.js APIs use an error-first callback. The first argument is an error object if something went wrong, or `null` if everything succeeded.

```javascript
function loadUser(id, callback) {
  const found = id === 1;

  if (!found) {
    return callback(new Error("User not found"), null);
  }

  return callback(null, { id, name: "Ava" });
}

loadUser(2, function(error, user) {
  if (error) {
    console.error(error.message);
    return;
  }

  console.log(user.name);
});
```

Output (tested with Node 24.21.0):

```text
User not found
```

This pattern is still widely used in older code and in many Node-style APIs. The callback handles success and failure in one place.

### Example 4: Browser event callback

In the browser, event listeners are callbacks that run when a user interacts with the page.

```javascript
const button = document.querySelector("button");

button.addEventListener("click", function() {
  console.log("Button clicked");
});
```

The browser waits for the click event and then calls your callback. This is a practical example of event-driven programming.

## 5. Practical Use Cases

- Handling button clicks, form submits, and keyboard events in the browser.
- Running code after a timer delay with `setTimeout` or repeated actions with `setInterval`.
- Processing arrays with methods like `map`, `filter`, and `reduce`.
- Receiving results from older asynchronous APIs in Node.js-style code.
- Passing custom behavior into utility functions so they can be reused in different situations.

## 6. Common Mistakes

### Mistake 1: Calling the callback instead of passing it

Beginners often add parentheses when they should pass the function reference. That causes the callback to run too early.

**Problem:** The function is executed immediately, so `greet` receives `undefined` instead of a function. This often leads to `TypeError: callback is not a function` when the code tries to call it later.

```javascript
function greet(callback) {
  callback();
}

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

greet(done());
```

Output (tested with Node 24.21.0):

```text
Done
Uncaught TypeError: callback is not a function
```

**Fix:** Pass the function name without parentheses.

```javascript
function greet(callback) {
  callback();
}

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

greet(done);
```

Output (tested with Node 24.21.0):

```text
Done
```

The corrected version works because `greet` receives a callable function and controls when it runs.

### Mistake 2: Losing the correct `this` value

When you pass an object method as a callback, it may lose its original object context. This is common with event handlers and method references.

**Problem:** The method is detached from its object, so `this` no longer points to the object. The result is often `undefined` values or runtime errors when reading object properties.

```javascript
const user = {
  name: "Ivy",
  sayName() {
    console.log(this.name);
  }
};

const callback = user.sayName;
callback();
```

Output (tested with Node 24.21.0):

```text
undefined
```

**Fix:** Wrap the method in another function or bind its context when needed.

```javascript
const user = {
  name: "Ivy",
  sayName() {
    console.log(this.name);
  }
};

const callback = user.sayName.bind(user);
callback();
```

Output (tested with Node 24.21.0):

```text
Ivy
```

The fixed version works because `bind` locks the method to the original object.

### Mistake 3: Forgetting that callbacks may be asynchronous

Another common error is using a value before the callback has finished producing it. The code looks normal, but the timing is wrong.

**Problem:** The variable is logged before the callback runs, so it still contains its initial value. This is not a syntax error, but it is a logic bug that often confuses beginners.

```javascript
let result = null;

setTimeout(function() {
  result = "Ready";
}, 500);

console.log(result);
```

Output (tested with Node 24.21.0):

```text
null
```

**Fix:** Put the dependent code inside the callback or move to a promise-based flow when appropriate.

```javascript
setTimeout(function() {
  const result = "Ready";
  console.log(result);
}, 500);
```

Output (tested with Node 24.21.0):

```text
Ready
```

The corrected version works because the code that depends on the result runs after the callback has executed.

## 7. Best Practices

### Practice 1: Keep callbacks small and focused

Callbacks are easier to understand when they do one clear job. Large callbacks become hard to read and harder to reuse.

```javascript
fetchData(function(data) {
  const cleaned = data.trim();
  const message = cleaned.toUpperCase();
  console.log(message);
});
```

Output (tested with Node 24.21.0):

```text
Uncaught ReferenceError: fetchData is not defined
```

Short callbacks are easier to test and easier to move into named helper functions later.

### Practice 2: Name callbacks when the behavior is reused

If the same logic appears in more than one place, give it a name instead of repeating an inline function.

```javascript
function handleSuccess(data) {
  console.log(data);
}

apiCall(handleSuccess);
anotherCall(handleSuccess);
```

Output (tested with Node 24.21.0):

```text
Uncaught ReferenceError: apiCall is not defined
```

This reduces duplication and makes stack traces and debugging easier.

### Practice 3: Use error-first callbacks consistently in older APIs

When you design or consume callback-based APIs, keep success and error handling predictable. A consistent shape makes code easier to maintain.

```javascript
function readConfig(callback) {
  const config = { mode: "dev" };
  return callback(null, config);
}

readConfig(function(error, config) {
  if (error) {
    return;
  }

  console.log(config.mode);
});
```

Output (tested with Node 24.21.0):

```text
dev
```

This pattern makes it obvious where failures are handled and helps keep asynchronous code readable.

## 8. Limitations and Edge Cases

- Nested callbacks can become hard to read when one asynchronous step depends on another. This is often called callback hell.
- Callbacks do not automatically return values to the original caller if they run later. The result must be handled inside the callback or passed onward.
- Some APIs call a callback synchronously and others asynchronously, so the timing rules are not always identical.
- Event callbacks in the browser may run many times, while timer callbacks can run once or repeatedly depending on the API.
- Not every function parameter is a callback. Passing the wrong type may cause `TypeError: callback is not a function`.

> A useful way to think about callbacks is: they let you decide *what* should happen, while the API decides *when* it should happen.

## 9. Practical Mini Project

Let’s build a tiny form interaction that uses callbacks to react after validation. This example keeps the logic small but realistic.

```javascript
function validateEmail(email, callback) {
  const isValid = email.includes("@") && email.includes(".");

  if (!isValid) {
    return callback(new Error("Please enter a valid email address."));
  }

  return callback(null, email.toLowerCase());
}

function showResult(error, value) {
  if (error) {
    console.error(error.message);
    return;
  }

  console.log("Saved email:", value);
}

validateEmail("Ada@example.com", showResult);
```

Output (tested with Node 24.21.0):

```text
Saved email: ada@example.com
```

This mini project shows the standard callback flow: one function does the work, then calls another function with either an error or a result. The pattern scales to many real asynchronous APIs.

## 10. Key Points

- A callback is a function passed into another function to be executed later.
- Callbacks are central to asynchronous JavaScript and event-driven code.
- Always pass the function itself, not the result of calling it.
- Callback timing matters, especially when the work happens later.
- Many modern APIs use promises, but callbacks are still common and important.

## 11. Practice Exercise

- Write a function named `withPrefix` that accepts a string and a callback.
- Inside the function, add `"Hello, "` before the string.
- Pass the new value to the callback.
- Call the function with your own callback that logs the result.

**Expected output:** A greeting such as `Hello, Sam`.

**Hint:** Remember to pass the callback as a function reference and call it with the transformed value.

```javascript
function withPrefix(name, callback) {
  const message = "Hello, " + name;
  callback(message);
}

withPrefix("Sam", function(result) {
  console.log(result);
});
```

Output (tested with Node 24.21.0):

```text
Hello, Sam
```

## 12. Final Summary

Callbacks are a foundational JavaScript pattern for handing a function to another function so it can be called later. They are useful for asynchronous tasks, event handling, and reusable utilities. Once you understand how function references work, callbacks become much easier to read and use.

The biggest things to remember are to pass the function itself, handle timing correctly, and keep callback logic focused. As you continue learning asynchronous JavaScript, callbacks will help you understand promises, `async`/`await`, and event-based APIs more clearly.

Next, try learning how promises wrap callback-based workflows into a more structured asynchronous style.