JavaScript Functions
JavaScript Callback 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
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.
What is a Callback Function?
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
Syntax
javascript
function outer(callback) {
callback();
}
outer(function () {
// code to run
});Pass callback, not callback().
Callbacks in Array Methods
Array methods such as map and filter take a callback.
Example
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.
Passing a Named Function
A callback does not have to be anonymous. You can pass a name.
Example
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.
The Brackets Mistake
Writing double() calls the function straight away and passes its result.
That result is usually undefined, which causes a confusing error.
Example
Example
javascript
function sayHi() {
return "Hi";
}
function run(callback) {
return callback();
}
console.log(run(sayHi));Passing sayHi works. Passing sayHi() would not.
Callbacks with Arguments
The receiving function decides what arguments the callback gets.
Example
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.
Callbacks Run Later
A callback given to setTimeout runs after the rest of the code.
This is the first step towards asynchronous JavaScript.
Example
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
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>Try It Yourself
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.
Important Points
- A callback is a function passed to another function to be run later.
- Pass the function itself, without brackets.
- Array methods such as
mapandfiltertake callbacks. - The receiving function decides what arguments the callback receives.
- A callback given to a timer runs after the current code has finished.
Conclusion
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.