JavaScript - - By Brandon Morelli

Back to Basics: What are Callbacks in JavaScript?

When learning JavaScript, it doesn’t take long until you encounter callbacks. These might seem strange and mysterious to beginners, yet it is very important to understand how they work in order to harness the power of the language. In this article I will teach you the basics of callbacks using easy-to-understand examples.

Back to Basics: What are Callbacks in JavaScript?

Callbacks — image via unsplash

What Is a Callback?

Simply put: A callback is a function that is to be executed after another function (normally asynchronous) has finished executing — hence the name ‘call back’.

More complexly put: In JavaScript, functions are objects. Because of this, functions can take functions as arguments, and can be returned by other functions. Functions that do this are called higher-order functions. Any function that is passed as an argument and subsequently called by the function that receives it, is called a callback function.

That’s a lot of words. Lets look at some examples to break this down a little more.

This article was first published on codeburst.io and is republished here with the author’s permission. If you enjoy reading, why not head over there and check out some of Brandon’s other articles? If you’d like to sharpen your JavaScript skills in general, why not head over to SitePoint Premium and sign up for our Introduction to JavaScript course.

Why Do We Need Callbacks?

For one very important reason — JavaScript is an event driven language. This means that instead of waiting for a response before moving on, JavaScript will keep executing while listening for other events. Lets look at a basic example:

function first(){
  console.log(1);
}

function second(){
  console.log(2);
}

first();
second();

As you would expect, the function first is executed first, and the function second is executed second — logging the following to the console:

// 1
// 2

All good so far.

But what if function first contains some sort of code that can’t be executed immediately? For example, an API request where we have to send the request then wait for a response? To simulate this action, were going to use setTimeout which is a native JavaScript method that calls a function after a specified delay. We’ll delay our function for 500 milliseconds to simulate an API request. Our new code will look like this:

function first(){
  // Simulate a code delay
  setTimeout( function(){
    console.log(1);
  }, 500 );
}

function second(){
  console.log(2);
}

first();
second();

It’s not important that you understand how setTimeout() works right now (although if you’re curious, we have a tutorial on that very subject). All that matters is that you see we’ve moved our console.log(1); inside of our 500 millisecond delay. So what happens now when we invoke our functions?

first();
second();
// 2
// 1

Even though we invoked the first() function first, we logged out the result of that function after the second() function.

It’s not that JavaScript didn’t execute our functions in the order we wanted it to, rather that JavaScript didn’t wait for a response from first() before moving on to execute second().

So why show you this? Because you can’t just call one function after another and hope they execute in the right order. Callbacks are a way to make sure certain code doesn’t execute until other code has already finished execution.

Create a Callback

Alright, enough talk, lets create a callback!

First, open up your browser developer console (you can do this by pressing Ctrl + Shift + J on Windows/Linux, or Cmd + Option + J on Mac). Then type the following function declaration into your console:

function doHomework(subject) {
  alert(`Starting my ${subject} homework.`);
}

Above, we’ve created the function doHomework . Our function takes one variable, the subject that we are working on. Call your function by typing the following into your console:

doHomework('math');
// Alerts: Starting my math homework.

Now lets add in our callback — as our last parameter in the doHomework() function we can pass in callback. The callback function is then defined in the second argument of our call to doHomework().

function doHomework(subject, callback) {
  alert(`Starting my ${subject} homework.`);
  callback();
}

doHomework('math', function() {
  alert('Finished my homework');
});

Try This Example on JS Bin

JS Bin on jsbin.com

As you’ll see, if you type the above code into your console you will get two alerts back to back: Your ‘Starting homework’ alert, followed by your ‘Finished homework’ alert.

But callback functions don’t always have to be defined in our function call. They can be defined elsewhere in our code like this:

function doHomework(subject, callback) {
  alert(`Starting my ${subject} homework.`);
  callback();
}

function alertFinished(){
  alert('Finished my homework');
}

doHomework('math', alertFinished);

Try This Example on JS Bin:

What are Callbacks in JavaScript? on jsbin.com

This result of this example is exactly the same as the previous example, but the setup is a little different. As you can see, we’ve passed the alertFinished function definition as an argument during our doHomework() function call!

A Real World Example

Last week I published an article on how to create a Twitter bot in 38 lines of code. The only reason the code in that article works is because of Twitter’s API. When you make requests to an API, you have to wait for the response before you can act on that response. This is a wonderful example of a real-world use case for callbacks. Here’s what the request looks like:

T.get('search/tweets', params, function(err, data, response) {
  if(!err){
    // This is where the magic will happen
  } else {
    console.log(err);
  }
});
  • T.get simply means we are making a GET request to Twitter.
  • There are three parameters in this request: ‘search/tweets’, which is the route of our request, params which are our search parameters, and then an anonymous function which is our callback.

A callback is important here because we need to wait for a response from the server before we can move forward in our code. We don’t know if our API request is going to be successful or not so after sending our parameters to search/tweets via a GET request, we wait. Once Twitter responds, our callback function is invoked. Twitter will either send an err (error) object or a response object back to us. In our callback function we can use an if() statement to determine if our request was successful or not, and then act upon the new data accordingly.

You Made It

Good work! You can now understand what a callback is and how it operates. But this is merely the tip of the iceberg with callbacks, there is still a lot more to learn! If you have any questions or comments, I’d be glad to hear them in the comments section below.

Sponsors