JavaScript Callback Functions

A callback function in JavaScript is a function passed as an argument to another function. The receiving function can execute the callback when a particular task is completed or when a specific condition is met.

Callback functions are commonly used in event handling, array methods, timers, and asynchronous programming.

In this tutorial, you will learn what callback functions are, how they work, and how to use them with practical JavaScript examples.

What Is a Callback Function in JavaScript?

A callback is a function that is passed to another function as an argument so that it can be called later.

Example of a Callback Function

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

function processUser(callback) {
    callback("Karim");
}

processUser(greet);

Output:

Hello, Karim

In this example, greet is passed to processUser as a callback. The processUser function calls it with "Karim" as the argument.

Notice that greet is passed without parentheses. Writing greet() would execute the function immediately rather than pass the function itself.

Callback Functions Using Anonymous Functions

You can also pass an anonymous function directly as a callback without declaring it separately.

function calculate(a, b, callback) {
    callback(a + b);
}

calculate(10, 20, function(result) {
    console.log(result);
});

Output:

30

Here, the anonymous function receives the calculated result and displays it.

Callback Functions with setTimeout()

JavaScript’s setTimeout() method accepts a callback function that runs after a specified delay.

console.log("Start");

setTimeout(function() {
    console.log("Task completed");
}, 2000);

console.log("End");

Output:

Start
End
Task completed

The callback executes after approximately two seconds. JavaScript continues running the remaining synchronous code while waiting for the timer callback.

Callback Functions with Array Methods

JavaScript array methods such as forEach() accept callback functions to process array elements.

const fruits = ["Apple", "Banana", "Mango"];

fruits.forEach(function(fruit) {
    console.log(fruit);
});

Output:

Apple
Banana
Mango

The callback executes once for each element in the array.

Callback Functions with Arrow Functions

Arrow functions provide a shorter syntax for writing callbacks.

function calculate(a, b, callback) {
    callback(a + b);
}

calculate(5, 10, result => {
    console.log(result);
});

Output:

15

The arrow function receives the result and displays it.

Learn more about JavaScript Function Fundamentals to understand function declarations, parameters, and arguments.

Synchronous and Asynchronous Callbacks

A synchronous callback executes during the current function call. For example, a callback passed to forEach() runs as the array is processed.

An asynchronous callback executes later, after an event or scheduled task occurs. For example, a callback passed to setTimeout() runs after the timer delay.

Callbacks are also important in event handling, where a function runs when a user clicks a button or interacts with a webpage.

Frequently Asked Questions

What is a callback function in JavaScript?

A callback function is a function passed as an argument to another function so that the receiving function can execute it.

Why are callback functions used?

Callbacks are used for event handling, processing arrays, scheduling tasks, and responding to asynchronous operations.

Can we use arrow functions as callbacks?

Yes. Arrow functions are commonly used as callbacks because they provide concise syntax.

What is the difference between synchronous and asynchronous callbacks?

Synchronous callbacks execute during the current operation, while asynchronous callbacks execute later when a scheduled task or event occurs.

Are callback functions asynchronous?

No. A callback function can be synchronous or asynchronous. Its execution depends on how the receiving function uses it.