JavaScript: Understanding the Callback!

So what’s a callback?

Basically a callback is a function that will execute after another function has completed executing. Which if you think about it that’s why it’s named ‘call back’.

Now that we have a basic idea of what a callback function is let’s get a little deeper to fully understand what it can do for us. In JavaScript, functions are objects. As we know, functions can take in arguments. Since functions in JavaScript are objects we can use a function as an argument in another function. Thus these functions can be returned by other functions. Functions in JavaScript that do this sort of thing are called ‘higher-order-functions’. Basically put, anytime you use a function as an argument for another function that function is the callback function.

So what’s the purpose of a callback function?

Call back functions are really important in JavaScript. The JavaScript language is event driven. This simply means JavaScript won’t wait for a single response before it moves on, it will continue executing while listening for other events at the same time.

For example:

function weekday(){
  console.log('monday');
}
function weekend(){
  console.log('saturday');
}
weekday();
weekend();

In the functions above, the first function ‘weekday()’ is executed first, and the second function ‘weekend()’ is executed second, showing the following in the JS console:

// monday
// saturday

Sometimes when coding we have a function that can’t be executed immediately. For example, what if we have an API request where we have to send the request then wait for a response. Let’s use a JavaScript function ‘setTimeout’ to see how something like this would work. To get an idea of what ‘setTimeout’ is before we start, it basically calls a function after a set amount of time. In this example we’ll delay our function for 700 milliseconds to try and simulate an API request. For example:

function weekday(){
  setTimeout( function(){
    console.log('monday');
  }, 700 );
}
function weekend(){
  console.log('saturday');
}
weekday();
weekend();

When written this way we get this back in our console:

weekday();
weekend();
// saturday
// monday

As seen above even though we invoked the function ‘weekday()’ first the console returned our second function before our first one.

It’s not like JavaScript didn’t execute our functions in the order we wanted it to, instead JavaScript didn’t just sit there and wait for a response, it listened for other events simultaneously.

So then whats the point of this? Well something really important you need to know is while coding you can’t just call one function after another hoping they execute in the right order. This is where callbacks come in, they are the way to make sure certain code doesn’t execute until other code has already finished execution.

Creating a Callback

function letsCode(language) {
  alert(`Learning to code in ${language} is fun.`);
}

Above, we’ve created the function letsCode . This function takes one variable, the language we are coding in.

Function call:

letsCode('JavaScript');
// Alerts: Learning to code in JavaScript is fun.

Ok now that we’ve gotten that set-up lets add in our callback as our last parameter in the letsCode()function. The callback function is then defined in the second argument of our call to letsCode().

function letsCode(language, callback) {
  alert(`Learning to code in ${language} is fun.`);
  callback();
}

letsCode('JavaScript', function() {
  alert('Now time to watch The Office');
});

The code above will give you two alerts back to back, first the ‘Learning to code in JavaScript is fun’ alert then ‘Now time to watch The Office’.

Callback functions don’t have to be defined in our function call. It is also possible to define them elsewhere in our code.

Example:

function letsCode(language, callback) {
  alert(`Learning to code in ${language} is fun.`);
  callback();
}
function officeTime(){
  alert('Now time to watch The Office');
}
letsCode('JavaScript', officeTime);

The results for this code is the same exact results we got in our previously written code, the only difference is the way we set it up. If you take a look above, we passed the officeTime function definition as an argument during our letsCode() function call.

With practice callbacks will become like second nature when coding in JavaScript. Now you should have an idea of what callbacks are and how they work. There is still so much more to learn about callbacks but for beginners this is a good starting point. Good Luck, if you have any questions on this subject matter don’t hesitate to comment!!