Callback Functions

Today we will be looking into a type of function in JavaScript called Callback Functions. So now you may be asking yourself what is a callback? A callback is a type of function that will be executed after another function has been executed (called back). As you may already know in JavaScript functions are also known as objects. Due to this, functions have the ability to take other functions as arguments and can then be returned by other functions. When a function does this it is referred to as higher-order functions, and the function that is being passed as the argument is called the callback function.

So why are callbacks necessary? This is due to the nature of JavaScript being an “event-driven” language. JavaScript will keep executing while listening for other events as opposed to waiting for a response before moving on. Below we see an example of this.

function one(){
  console.log('first');
}function two(){
  console.log('second');
}one();
two();
//first
//second

As you see above function one is executed before function two, but now what would happen if function one had some code that couldn’t be executed right away? Well with JavaScript it will not wait for the response from function one and will move one to function two then continue waiting for function one to finish executing. This is why we use callbacks, it is a way to ensure that certain parts of code don’t execute until the other code we want to execute first has already finished.

How to create a Callback

I will show you how to create a callback function with the following example, you can do this with Chrome dev tools.

function vacation(city) {
  alert(`Going to vacation in ${city} this weekend.`);
}

We created the function vacation, now we will call that function by typing the code below.

vacation('Miami');// Alerts: Going to vacation in Miami this weekend.

We can now add our last parameter which will be the callback to the vacation function. It will look like the example below.

function vacation(city, callback) {
   alert(`Going to vacation in ${city} this weekend.`);
  callback();
}
vacation('Miami', function() {
  alert('Vacation is over, back to work');
});

Above we get two alerts one after another because of the callback, we can also write the callback some place else in our code and not inside of our function call, as the below example.

function vacation(city, callback) {
  alert(`Going to vacation in ${city} this weekend.`);
  callback();
}
}function alertDone(){
  alert('Vacation is over, back to work');
}vacation('Miami', alertFinished);

Both examples give you the same exact output, the way you write the code is different, so you just have to see which way will work best for your use case. In my next post I will get more in-depth of the types of callbacks there are (synchronous and asynchronous) along with when to use them. I hope this helped a little bit with your understanding of callback functions.