The Beginners Guide to Callback Functions in Javascript

What are Functions?
In Javascript, there are these things called functions. Functions are the piece of the code where stuff happens. These functions can be things happening in the background, like calling an API, or they can be directly linked to an action. For example, when a user clicks a button, then something should happen. The function is that thing that should happen. Javascript also has something called callback functions. Callback functions are functions that will only execute after another function has finished running.

If you look at the code below, you’ll see a basic alert function. Open the console, paste it in, and click enter.

function originalFunction(){
alert ("Inception received an 87% on Rotten Tomatoes.")
}

Let’s see what happens when we invoke the function. Paste the following into the console and click enter again.

originalFunction()

Great! Your browser has given you an alert, but what if you needed that code to run before you ran another function? That’s where we would add in a callback. If you take a look at the code below, you’ll see that I’ve modified the original function to include a callback parameter and we’ve invoked that callback parameter. We’ve also added the callback function(cbFunction), and we’ve invoked the cbFunction inside of the originalFunction. Copy and paste this into your console and see what happens!

function originalFunction(callback){
alert ("Inception received an 87% on Rotten Tomatoes.")
callback();
}
function cbFunction(){
alert('The Prestige scored lower.');
}
originalFunction(cbFunction);

Amazing! This also works if you add the cbFunction to the console first, then the originalFunction. As long as cbFunction is invoked inside of the originalFunction, it’ll come out correctly.

So I know what you’re thinking. Why would we need to use callback functions? Well, I’m glad you asked! A major advantage to callback functions is that it allows us to run functions asynchronously. Normally code runs in the order that it appears, which is synchronous. Asynchronous functions will run at the same time which makes things more efficient. We can use callbacks in various ways. One of the key ways is through an event listener. Earlier, I mentioned that when you click a button, a function runs so the thing happens. Well that function is a callback function.

If we take a look at an event listener we’ll see that it takes in two arguments. The first is the action that the user is taking, so in the instance below its ‘click’. The other argument would be the function that needs to run once the user clicks. Take a look at the code below and see what’s going on.

const myBtn = document.querySelector('#button')
myBtn.addEventListener('click', originalFunction)
function originalFunction(){
alert ("Inception received an 87% on Rotten Tomatoes.")
}

So now we’ve added an event listener to a button. When the user clicks this button, the original function, which in this case is a callback function, will run.

Callback functions also make other functions more re-usable when working with lots of code. Instead of looking through 1000 lines of code and then changing the original function to work with whatever new piece you need to add in, it could be easier, and time saving to simply create a new callback function and pass it through the original function.

Callback Functions can be very useful, but also tricky to implement. Remember to stay organized when using callback functions because knowing where everything is in your code will save you time and exhaustion.