JavaScript Callbacks Explained (Without the Confusion)

Callbacks confused me for months when I started JavaScript. Every tutorial said “just pass a function as an argument,” but nobody explained why or when you’d actually use them. Here’s the explanation I wish I’d found.

The Problem

JavaScript is built on asynchronous operations—API calls, file reads, timers—but when you’re coming from synchronous languages like C# or Java, the callback pattern feels backwards.

You write code like this:

1
getData(function(result) {
2
    console.log(result);
3
});

And you think: “Why not just let result = getData() and be done with it?”

Because JavaScript doesn’t wait. If getData() takes 2 seconds, your code keeps running. Callbacks are how you say “run this code when the data finally arrives.”

What Are Callbacks, Really?

A callback is just a function you pass to another function. That’s it.

The key insight: JavaScript treats functions as values. You can:

Store them in variables
Pass them as arguments
Return them from functions

So when you pass a function as an argument, the receiving function can call it back later (hence “callback”).

The Simplest Example

1
function sayHello(callback) {
2
    callback("Hello");
3
}
4

5
sayHello(function(greeting) {
6
    console.log(greeting + ", World!");
7
});
8

9
// Output: Hello, World!

Here’s what’s happening:

sayHello takes one parameter: callback (which is a function)
Inside sayHello, we call callback("Hello"), passing "Hello" as an argument
The anonymous function we passed receives "Hello" as greeting and logs it

That anonymous function is the callback.

Why Would You Ever Do This?

Callbacks shine when you can’t return a value immediately. Here’s a more realistic example:

1
function fetchUserData(userId, callback) {
2
    // Imagine this hits a database or API
3
    setTimeout(function() {
4
        let user = { id: userId, name: "Brandon" };
5
        callback(user);
6
    }, 1000); // Simulates 1-second delay
7
}
8

9
fetchUserData(42, function(user) {
10
    console.log("User loaded:", user.name);
11
});
12

13
console.log("This runs first because fetchUserData doesn't block!");

Output:

1
This runs first because fetchUserData doesn't block!
2
User loaded: Brandon

The callback lets you say “when the data arrives, do this with it”—without freezing your entire program while waiting.

A More Useful Example: Language Greetings

1
function sayHello(language, callback) {
2
    let greetings = {
3
        "English": "Hello",
4
        "French": "Bonjour",
5
        "German": "Guten Tag",
6
        "Spanish": "Hola"
7
    };
8

9
    let greeting = greetings[language];
10

11
    if (greeting) {
12
        callback(greeting);
13
    } else {
14
        callback("Hello"); // Default to English
15
    }
16
}
17

18
sayHello("German", function(greeting) {
19
    console.log(greeting + ", World!");
20
});
21

22
// Output: Guten Tag, World!

Now sayHello doesn’t need to know what to do with the greeting—it just finds it and hands it off to your callback.

Callbacks with Error Handling

Real-world callbacks often use the “error-first” pattern:

1
function getUserById(id, callback) {
2
    setTimeout(function() {
3
        if (id < 1) {
4
            callback("Invalid user ID", null);
5
        } else {
6
            callback(null, { id: id, name: "Brandon" });
7
        }
8
    }, 500);
9
}
10

11
getUserById(0, function(error, user) {
12
    if (error) {
13
        console.error("Error:", error);
14
    } else {
15
        console.log("User:", user.name);
16
    }
17
});

Convention: the first parameter is error (null if no error), the second is the actual data.

What I Learned / Gotchas

Callback hell is real. Nesting callbacks gets ugly fast:

1
getData(function(data) {
2
    processData(data, function(processed) {
3
        saveData(processed, function(result) {
4
            sendEmail(result, function(status) {
5
                console.log("Finally done!");
6
            });
7
        });
8
    });
9
});

This is why Promises and async/await were invented. But you need to understand callbacks first—Promises use them under the hood.

this gets weird in callbacks. If you’re using callbacks with object methods, this won’t be what you expect:

1
let user = {
2
    name: "Brandon",
3
    greet: function(callback) {
4
        callback(this.name);
5
    }
6
};
7

8
// This works
9
user.greet(function(name) {
10
    console.log("Hello,", name);
11
});
12

13
// But this might not (depending on context)
14
let greetFunc = user.greet;
15
greetFunc(function(name) {
16
    console.log("Hello,", name); // `this.name` is undefined
17
});

Use .bind(this) or arrow functions to fix it.

Arrow functions changed callbacks. Modern JavaScript uses arrow functions for cleaner syntax:

1
sayHello("French", (greeting) => {
2
    console.log(greeting + ", World!");
3
});

Same behavior, less typing.

Real-World Use Cases

You’ve been using callbacks without realizing it:

1
// Array methods use callbacks
2
[1, 2, 3].map(function(num) {
3
    return num * 2;
4
});
5

6
// Event listeners use callbacks
7
button.addEventListener('click', function() {
8
    console.log("Button clicked!");
9
});
10

11
// setTimeout uses callbacks
12
setTimeout(function() {
13
    console.log("One second later...");
14
}, 1000);

All of these: you pass a function, and something else calls it later.

Going Further

Callbacks are foundational, but modern JavaScript has better tools for async code:

Promises (ES6):

1
fetch('/api/user')
2
    .then(response => response.json())
3
    .then(user => console.log(user))
4
    .catch(error => console.error(error));

Async/Await (ES2017):

1
async function getUser() {
2
    let response = await fetch('/api/user');
3
    let user = await response.json();
4
    console.log(user);
5
}

But these are just syntactic sugar over callbacks. Understanding callbacks means you understand what Promises and async/await are doing under the hood.

Resources

Questions? I’m @brandontillman everywhere.