JavaScript Asynchronous
An asynchronous callback is a function that runs once slow work has finished.
Before promises existed, this was the only way to handle a result that arrives later.
It works, but it nests badly once one job depends on another.
Example
javascript
function loadUser(callback) {
setTimeout(function () {
callback("Ada");
}, 10);
}
loadUser(function (name) {
console.log("got " + name);
});The output is got Ada, once the slow work has finished.
You pass a function in, and it is called when the work completes.
The result is given to the callback as an argument.
Nothing after the call can use the result, because it has not arrived yet.
Syntax
javascript
function load(callback) {
// later:
callback(result);
}The callback is called by the function, not by you.
Trying to return it does not work, because the function finishes first.
Example
javascript
function loadUser(callback) {
setTimeout(function () {
callback("Ada");
}, 10);
}
const result = loadUser(function () {});
console.log(typeof result);The output is undefined: there was nothing to return.
By convention the first argument is an error, or null when all went well.
This is how Node.js callbacks have always worked.
Example
javascript
function loadUser(callback) {
setTimeout(function () {
callback(null, "Ada");
}, 10);
}
loadUser(function (error, name) {
if (error) {
console.log("failed");
return;
}
console.log("loaded " + name);
});Checking the error first means the happy path stays clear.
The same callback handles both outcomes.
Example
javascript
function loadUser(callback) {
setTimeout(function () {
callback("user not found");
}, 10);
}
loadUser(function (error, name) {
console.log(error ? "error: " + error : "loaded " + name);
});The output is error: user not found.
When one job needs the result of the last, the nesting grows sideways.
Three or four levels in, this becomes very hard to follow.
Example
javascript
function step(name, callback) {
setTimeout(function () {
callback(name);
}, 5);
}
step("one", function (a) {
step("two", function (b) {
step("three", function (c) {
console.log(a + " " + b + " " + c);
});
});
});Promises exist mainly to flatten this shape out.
Pulling each level out reduces the nesting, but not the awkwardness.
Example
javascript
function step(name, callback) {
setTimeout(function () {
callback(name);
}, 5);
}
function afterSecond(b) {
console.log("finished with " + b);
}
function afterFirst(a) {
step("two", afterSecond);
}
step("one", afterFirst);The real fix is promises, which the next lesson covers.
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Async Callbacks</title>
</head>
<body>
<h1>Async Callbacks</h1>
<p id="out">Loading...</p>
<script>
function loadUser(callback) {
setTimeout(function () {
callback(null, "Ada Lovelace");
}, 1000);
}
loadUser(function (error, name) {
const out = document.getElementById("out");
out.textContent = error ? "Failed: " + error : "Welcome, " + name;
});
</script>
</body>
</html>Run the above example in the Try It Editor.
Try an error:
Change the call to callback("no network") and see the other branch run.
Callbacks are the oldest way of handling asynchronous results, and still everywhere.
Understanding them explains why promises look the way they do.
The pain of nesting is what the next few lessons remove.