Introducing callbacks

callbacks.md

Introducing callbacks

Previously, I walked through the concept delegates in JavaScript. In a nutshell, a delegate is a function used as a variable, and is called by another function or operation. This is helpful when working with a function such as filter or find where you might wanto to be able to describe programatically what you're looking for.

Callbacks build on delegates, and really only differ on when they're called.

Let's consider a little bit of jQuery where we might be making a call to a remote server. The challenge here is we don't know how long the call will take, but we know we want to be able to act upon the data once the operation is complete. This is where we can use a callback. Our special delegate (called a callback) is passed into the function that will make the call to the server, with the assurance that once the operation is complete our callback's code will be executed.

$.get('http://example.com', (data) => {
  console.log(`We've got data!`);
  console.log(data);
});

In the example above, we simply put the callback inline using a fat arrow function. We could have used ...

$.get('http://example.com', function (data) {
  console.log(`We've got data!`);
  console.log(data);
});

... or even created a separate function ...

function callback(data) {
  console.log(`We've got data!`);
  console.log(data);
}

$.get('http://example.com', callback);

All three of those examples are logically the same thing, and you're free to use whatever you would like.

One big thing to note is the parameters for the callback can vary quite a bit. In the case of jQuery, the data returned by the operation is the first parameter passed into the callback. Mongoose, however, has a signature if (error, data). Make sure you refer to the documentation when setting up your callback.

Callbacks, unfortunately, do have a small challenge. It's not uncommon at all to have a callback that in turn has a callback. You may be creating a system which calls a database via Mongoose, and then sends the response of that operation to a REST API, and then finally needs to provide a status message. You can easily wind up in a nested mess:

SampleModel.findById(42, (error, data) => {
  updateServer(data, (response) => {
    console.log(response);
  });
});

You'll notice that our console.log is now two levels deep. It's certainly not unheard of to need another nested callback. And another. And another... Your code can quickly become a tangled mess. In addition, managing variables and scope becomes a challenge.

Callbacks are still commonly used by developers, but generally most people are moving away from them for Promises or, better yet, async/await. We'll take a look at those in the next post.