JavaScript Callbacks
"I will call back later!"
A callback is a function that runs "later".
A callback runs after another function finishes.
Callbacks were the first solution for asynchronous JavaScript.
Note
This page explains what callbacks are and why they caused problems.
Callbacks exist because async results are not available immediately.
The Timing Problem
Asynchronous code finishes later.
This means you cannot return the result right away (before they are finished).
Example:
let result;
setTimeout(function() {
result = 5;
}, 1000);
// What is result here?
Try it Yourself »
The result is undefined.
The async code has not finished yet.
Note
You cannot solve this problem by waiting in JavaScript.
Waiting would freeze the page.
The Callback Idea
The solution to the problem above, is to run the code when the result is ready.
You must give JavaScript a function to call later.
This function is called a callback.
A callback is a function passed as an argument to another function
This technique allows a function to call another function
Example
function done(value) {
myDisplayer(value);
}
setTimeout(function() {
done(5);
}, 1000);
Try it Yourself »
The value is used inside the callback.
This works because the callback runs later.
Sequence Control
Sometimes you would like to have better control over when to execute a function.
Suppose you want to do a calculation, and then display the result.
You could first call the calculator function myCalculator,
and then call the display function myDisplayer:
Example
// Funtion to display something
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
// Function to calculate a sum
function myCalculator(num1, num2) {
let sum = num1 + num2;
return sum;
}
// Call the calculator
let result = myCalculator(5, 5);
// Call the displayer
myDisplayer(result);
Or, you could call the calculator function myCalculator,
and let the calculator function call the display function myDisplayer:
Example
// Funtion to display something
function myDisplayer(some) {
document.getElementById("demo").innerHTML
= some;
}
// Function to calculate a sum
function myCalculator(num1, num2) {
let sum = num1 + num2;
myDisplayer(sum);
}
// Call the calculator
myCalculator(5, 5);
The problem with the first example above, is that you have to call two functions to display the result.
The problem with the second example, is that you cannot prevent the calculator function from displaying the result.
Now it is time to bring in a callback.
JavaScript Callbacks
A callback is a function passed as an argument to another function.
Using a callback, you could call the calculator function (myCalculator)
with a callback (myCallback), and let the calculator function run the callback after the calculation is finished:
You can design functions that accept callbacks.
This is how many older JavaScript APIs worked.
The callback receives the result.
The calling code decides what to do next.
This pattern keeps your function flexible.
A callback is a function that is passed as an argument to another function, and is intended to be executed at a later point in time, typically when a specific event occurs or an asynchronous operation completes.
Example (Callbacks)
function myDisplayer(some) {
document.getElementById("demo").innerHTML
= some;
}
function myCalculator(num1, num2, myCallback) {
let sum = num1 + num2;
myCallback(sum);
}
myCalculator(5, 5, myDisplayer);
Try it Yourself »
In the example above, myDisplayer is used as a callback function.
It is passed to myCalculator() as an argument.
Note
When you pass a function as an argument, remember not to use parenthesis.
Right: myCalculator(5, 5, myDisplayer);
Wrong: myCalculator(5, 5, myDisplayer());
Example
// Create an Array
const myNumbers = [4, 1, -20, -7, 5, 9, -6];
// Call removeNeg with a callback
const posNumbers = removeNeg(myNumbers, (x) => x >= 0);
// Display Result
document.getElementById("demo").innerHTML = posNumbers;
// Keep only positive numbers
function removeNeg(numbers, callback) {
const myArray = [];
for (const x of numbers) {
if (callback(x)) {
myArray.push(x);
}
}
return myArray;
}
Try it Yourself »
In the example above, (x) => x >= 0 is a callback function.
It is passed to removeNeg() as an argument.
Callbacks In Real Async Code
Timers use callbacks.
Events use callbacks.
Example:
setTimeout(function() {
console.log("Runs later");
}, 1000);
The function runs after one second.
Callback Error Handling
Async code can fail.
Callbacks often use an error-first pattern.
Example:
function getData(callback) {
let ok = true;
if (ok) {
callback(null, "Data");
} else {
callback("Something failed", null);
}
}
getData(function(error, data) {
if (error) {
console.log(error);
return;
}
console.log(data);
});
Note
The first parameter is the error.
The second parameter is the result.
This pattern is common in older JavaScript code.
The Problem With Many Callbacks
Callbacks can solve solve timing problems.
But many callbacks become hard to read and hard to maintain.
Example
step1(function(r1) {
step2(r1, function(r2) {
step3(r2, function(r3) {
console.log(r3);
});
});
});
Note
The style above is often called callback hell.
When callbacks get deep, debugging becomes difficult.
The logic moves from left to right and becomes difficult to follow.
Callback Alternatives
With asynchronous programming, JavaScript programs can start long-running tasks, and continue running other tasks in parallel.
But, asynchronus programmes are difficult to write and difficult to debug.
Because of this, most modern asynchronous JavaScript do not use callbacks.
Instead, asynchronous programming is solved using Promises.
Why Promises Were Created
Promises were created to make async code easier to read.
Promises also make error handling more consistent.
Promises are the modern solution.
When to Use a Callback?
Callbacks are still important to understand.
Where callbacks really shine are in asynchronous functions, where one function has to wait for another function (like waiting for a file to load).
Next Chapter
The next page explains what a promise is.
You will learn how promises replace deep callbacks with a cleaner flow.
