What is a Callback in JS: Functions That Wait

Ever come across the term “callback function” in web development and wondered what it actually means?

Callback functions are fundamental to JavaScript and incredibly powerful. They’re the backbone of asynchronous operations and are used throughout modern web development. In this guide, I’ll break down what callback functions are and how to use them in straightforward terms.

What is a Callback Function?

A callback function is simply a function that you pass as an argument to another function. This function is then called at a later time when a specific task completes. Think of it as saying, “Here’s what I want you to do after you finish your current task.”

Real-Life Analogies for Callbacks

Food Delivery App:
- Main process: You order food through an app
- Callback: “Notify me when the delivery driver is on the way”
- Execution: The app automatically sends you a notification when your delivery starts
Restaurant Pager:
- Main process: You place your order at a counter
- Callback: The staff hands you a buzzer
- Execution: The buzzer vibrates when your food is ready for pickup

Callbacks create a system where certain actions happen automatically when specific conditions are met.

Basic Structure

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
function mainFunction(arg1, arg2, callbackFunction) {
    // Main function does its work first
    
    // When finished, it executes the callback
    callbackFunction();
}

// Using the function with a callback
mainFunction(value1, value2, function() {
    console.log("Task completed!");
});

In this example, function() { console.log("Task completed!"); } is the callback. It only runs after mainFunction finishes its work.

Simple Callback Example

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
// A function that accepts a callback parameter
function greet(name, callback) {
    console.log("Hello, " + name + "!");
    // Execute the callback after greeting
    callback();
}

// A function we'll use as a callback
function sayGoodbye() {
    console.log("Goodbye!");
}

// Passing sayGoodbye as a callback to greet
greet("John", sayGoodbye);

Output:

1
2
Hello, John!
Goodbye!

What’s happening here:

greet accepts two arguments: a name and a callback function
sayGoodbye is passed as the callback
When greet("John", sayGoodbye) runs, it first displays the greeting, then executes the callback

Using Anonymous Callback Functions

Callbacks don’t need to be defined separately. You can create them on the spot as anonymous functions:

1
2
3
4
// Using an anonymous function as the callback
greet("Jane", function() {
    console.log("See you later!");
});

Output:

1
2
Hello, Jane!
See you later!

This approach makes your code more concise, especially when the callback is only needed once.

Common Real-World Callback Examples

1. Array Methods

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

// forEach uses a callback function for each array element
numbers.forEach(function(number) {
    console.log(number); // Prints each number in the array
});

2. Event Listeners

1
2
3
4
5
// HTML: <button id="myButton">Click me</button>

document.getElementById('myButton').addEventListener('click', function() {
    alert('Button was clicked!');
});

Here, the callback function runs each time someone clicks the button.

3. Handling API Requests

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
function fetchData(url, callback) {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onload = function() {
        if (xhr.status === 200) {
            callback(null, xhr.responseText);
        } else {
            callback(new Error('Request failed'));
        }
    };
    xhr.send();
}

// Using the fetchData function
fetchData('https://api.example.com/data', function(error, data) {
    if (error) {
        console.error(error);
    } else {
        console.log('Data received:', data);
    }
});

This callback handles the response after an API request completes, whether it succeeds or fails.

4. Timer Functions

1
2
3
4
5
6
7
8
9
// Run code after a delay
setTimeout(function() {
    console.log('2 seconds have passed!');
}, 2000);

// Run code repeatedly at intervals
setInterval(function() {
    console.log('This message appears every 3 seconds');
}, 3000);

These functions use callbacks to execute code after a specific time period.

Callbacks and Asynchronous Programming

Callbacks are essential to JavaScript’s asynchronous programming model. They allow your code to continue running while waiting for operations like network requests or timers to complete.

1
2
3
4
5
6
7
8
console.log("Starting the coffee machine...");

// Asynchronous operation with callback
setTimeout(function() {
    console.log("Your coffee is ready!");
}, 3000);

console.log("Getting the milk from the fridge...");

Output:

1
2
3
4
Starting the coffee machine...
Getting the milk from the fridge...
(3 seconds later)
Your coffee is ready!

The setTimeout callback doesn’t block the rest of your code. This is like starting your coffee maker and then doing other kitchen tasks while waiting for the coffee to brew.

The Callback Hell Problem and Solutions

When you nest multiple callbacks, you can end up with difficult-to-read code known as “Callback Hell” or the “Pyramid of Doom”:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
fetchUserData(userId, function(userData) {
    fetchUserPosts(userData.id, function(posts) {
        fetchPostComments(posts[0].id, function(comments) {
            fetchCommentAuthor(comments[0].authorId, function(author) {
                console.log(author.name);
                // Even more nested callbacks...
            });
        });
    });
});

Modern Solutions

Named Functions:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
function handleAuthor(author) {
    console.log(author.name);
}

function handleComments(comments) {
    fetchCommentAuthor(comments[0].authorId, handleAuthor);
}

function handlePosts(posts) {
    fetchPostComments(posts[0].id, handleComments);
}

function handleUserData(userData) {
    fetchUserPosts(userData.id, handlePosts);
}

fetchUserData(userId, handleUserData);

Promises:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
fetchUserData(userId)
    .then(userData => fetchUserPosts(userData.id))
    .then(posts => fetchPostComments(posts[0].id))
    .then(comments => fetchCommentAuthor(comments[0].authorId))
    .then(author => {
        console.log(author.name);
    })
    .catch(error => {
        console.error("Error:", error);
    });

Async/Await:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
async function getUserAuthor(userId) {
    try {
        const userData = await fetchUserData(userId);
        const posts = await fetchUserPosts(userData.id);
        const comments = await fetchPostComments(posts[0].id);
        const author = await fetchCommentAuthor(comments[0].authorId);
        console.log(author.name);
    } catch (error) {
        console.error("Error:", error);
    }
}

getUserAuthor(userId);

Conclusion

Callbacks are a core JavaScript feature that let you define what happens after certain operations complete. They’re essential for handling asynchronous tasks and are built into many JavaScript functions and methods.

While callbacks remain fundamental to JavaScript, modern approaches like Promises and async/await have emerged to address the readability challenges of nested callbacks in complex code.

How do you use callbacks in your projects? Do you prefer traditional callbacks or newer approaches? Share your experiences in the comments!