JavaScript Functions
A JavaScript callback function is a function passed to another function to be run later.
The receiving function decides when, and how many times, to call it.
Callbacks are how you tell JavaScript what to do once something finishes.
Example
javascript
function greet(name, callback) {
console.log("Hello " + name);
callback();
}
greet("Ada", function () {
console.log("The greeting is done");
});Here, the second argument is a function that greet runs at the end.
That second function is the callback.
A callback is simply a function used as an argument to another function.
You pass the function itself, not the result of calling it.
The most common mistake is adding brackets, which calls the function immediately instead of passing it.
Syntax
javascript
function outer(callback) {
callback();
}
outer(function () {
// code to run
});Pass callback, not callback().
Array methods such as map and filter take a callback.
Example
javascript
const numbers = [1, 2, 3, 4];
const doubled = numbers.map(function (n) {
return n * 2;
});
console.log(doubled);The callback runs once for every item in the array.
A callback does not have to be anonymous. You can pass a name.
Example
javascript
function double(n) {
return n * 2;
}
const numbers = [1, 2, 3];
console.log(numbers.map(double));Note there are no brackets after double - the function itself is passed.
Writing double() calls the function straight away and passes its result.
That result is usually undefined, which causes a confusing error.
Example
javascript
function sayHi() {
return "Hi";
}
function run(callback) {
return callback();
}
console.log(run(sayHi));Passing sayHi works. Passing sayHi() would not.
The receiving function decides what arguments the callback gets.
Example
javascript
function repeat(times, callback) {
for (let i = 1; i <= times; i++) {
callback(i);
}
}
repeat(3, function (number) {
console.log("Run " + number);
});Here, the callback is given the current count each time.
A callback given to setTimeout runs after the rest of the code.
This is the first step towards asynchronous JavaScript.
Example
javascript
console.log("First");
setTimeout(function () {
console.log("Third");
}, 0);
console.log("Second");The output is First, Second, Third.
Even with a delay of 0, the callback waits until the current code has finished.
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Callback Functions</title>
</head>
<body>
<h1>JavaScript Callback Functions</h1>
<p id="result"></p>
<script>
function process(numbers, callback) {
const output = [];
for (const n of numbers) {
output.push(callback(n));
}
return output;
}
const squared = process([1, 2, 3, 4], function (n) {
return n * n;
});
document.getElementById("result").innerHTML = squared.join(", ");
</script>
</body>
</html>Run the above example in the Try It Editor.
Try a different callback:
Change the callback body to return n + 10; and see the new list.
map and filter take callbacks.JavaScript callback functions let one function decide when another one runs.
They are used everywhere, from array methods to event listeners and timers.
Understanding callbacks is the step before promises and async code.