Callback functions in JavaScript

Callback functions are common in JavaScript. Callback functions are possible in JavaScript because functions are first-class citizens.

Synchronous callbacks.

Callback functions can be synchronous or asynchronous. Since Asynchronous callback functions may be more complex here is a simple example of a synchronous callback function.

// a function that uses a callback named `cb` as a parameter
function getSyncMessage(cb) {
    cb("Hello World!");
}

console.log("Before getSyncMessage call");
// calling a function and sending in a callback function as an argument.
getSyncMessage(function(message) {
    console.log(message);
});
console.log("After getSyncMessage call");

The output for the above code is:

> Before getSyncMessage call
> Hello World!
> After getSyncMessage call

First we will step through how the above code is executed. This is more for those who do not already understand the concept of callbacks if you do already understand it feel free to skip this paragraph. First the code is parsed and then the first interesting thing to happen is line 6 is executed which outputs Before getSyncMessage call to the console. Then line 8 is executed which calls the function getSyncMessage sending in an anonymous function as an argument for the parameter named cb in the getSyncMessage function. Execution is now done inside the getSyncMessage function on line 3 which executes the function cb which was just passed in, this call sends an argument string “Hello World” for the param named message in the passed in anonymous function. Execution then goes to line 9 which logs Hello World! to the console. Then the execution goes through the process of exiting the callstack (see also) hitting line 10 then line 4 then finally back to line 11.

Some information to know about callbacks in general:

• The function you send in to a function as a callback may be called zero times, once, or multiple times. It all depends on implementation.
• The callback function may be called synchronously or asynchronously and possibly both synchronously and asynchronously.
• Just like normal functions the names you give parameters to your function are not important but the order is. So for example on line 8 the parameter message could have been named statement, msg, or if you’re being nonsensical something like jellybean. So you should know what parameters are sent into your callback so you can get them in the right order with proper names.

Asynchronous callbacks.

One thing to note about JavaScript is it is synchronous by default, but there are APIs given in the environment (browser, Node.js, etc.) that could make it asynchronous (there’s more about that here).

Some common things that are asynchronous in JavaScript environments that accept callbacks:

• Events
• setTimeout
• setInterval
• the fetch API
• Promises

Also any function that uses one of the above functions may be wrapped with a function that takes a callback and the callback would then be an asynchronous callback (although wrapping a promises with a function that takes a callback would likely be considered an anti-pattern as there are more preferred ways to handle promises).

So given that information we can construct an asynchronous function similar to the above synchronous one.

// a function that uses a callback named `cb` as a parameter
function getAsyncMessage(cb) {
    setTimeout(function () { cb("Hello World!") }, 1000);
}

console.log("Before getSyncMessage call");
// calling a function and sending in a callback function as an argument.
getAsyncMessage(function(message) {
    console.log(message);
});
console.log("After getSyncMessage call");

Which prints the following to the console:

> Before getSyncMessage call
> After getSyncMessage call
// pauses for 1000 ms with no output
> Hello World!

Line execution goes to line 6 logs “Before getSyncMessage call”. Then execution goes to line 8 calling getAsyncMessage with a callback for the param cb. Line 3 is then executed which calls setTimeout with a callback as the first argument and the number 300 as the second argument. setTimeout does whatever it does and holds on to that callback so that it can call it later in 1000 milliseconds, but following setting up the timeout and before it pauses the 1000 milliseconds it hands execution back to where it left off so it goes to line 4, then line 11, and then pauses for 1 second and setTimeout then calls its callback function which takes execution back to line 3 where getAsyncMessages callback is called with value “Hello World” for its parameter message which is then logged to the console on line 9.

Callback functions in Node.js

NodeJS has asynchronous callbacks and commonly supplies two parameters to your functions sometimes conventionally called err and data. An example with reading a file text.

const fs = require("fs");

fs.readFile("./test.txt", "utf8", function(err, data) {
    if(err) {
        // handle the error 
    } else {
        // process the file text given with data
    }
});

This is an example of a callback that is called a single time.

It’s good practice to handle the error somehow even if your just logging it or throwing it. The else is not necessary if you throw or return and can be removed to decrease indentation so long as you stop execution of the current function in the if by doing something like throwing or returning.

Though it may be common to see err, data it may not always be the case that your callbacks will use that pattern it’s best to look at documentation.

Another example callback comes from the express library (express 4.x):

// this code snippet was on http://expressjs.com/en/4x/api.html
const express = require('express');
const app = express();

// this app.get method takes a url route to watch for and a callback
// to call whenever that route is requested by a user.
app.get('/', function(req, res){
  res.send('hello world');
});

app.listen(3000);

This example shows a callback that is called multiple times. The callback is provided with two objects as params named here as req and res these names correspond to request and response respectively, and they provide ways to view the request coming in and set up the response that will be sent to the user.

As you can see there are various ways a callback can be used to execute sync and async code in JavaScript and callbacks are very ubiquitous throughout JavaScript.