Callback Functions in JavaScript Simply Explained for Beginners

Concept of Callback functions is an amazing invention of Asynchronous Programming.

Wait, what is Asynchronous Programming ?

Well, Asynchronous Programming programming is

“Execution of the functions or methods is independent from the main program thread”

in other words, other functions in the program will not wait until a certain function is done it’s execution. Or read this for more information.

Why Callback Functions are important ?

Well, in JavaScript Callback functions are pretty important. ‘Cause most of the JavaScript Applications are Frontend Applications (Like apps built with Angular, VueJS, ReactJS or React Natvie. So, they do pull data from Backend APIs for most of their transactions. As you know these API calls can take a while to return a response. So, what if your entire application waits until a specific function finishes its execution. No cool right! So, that’s when the Callback functions comes to the party.

In JavaScript, we can treat functions as Objects. So, just like we pass objects to functions, we can pass functions to another functions as argument. Let’s simplify this in the following example.

Simple Example

Let’s take a simple example to demonstrate this.

Let’s say you have a simple Web application. And it has a button. When you press the button, the application should pull some data from a backend API. Since that API call can take a while to complete, it must show a Loading… screen until the data is prepared. An when the data is ready, Loading… screen must disappear and pulled data must be visible.

Alright, let’s write some functions for that.

Let’s write a funtion for showing the Loading… screen.

function showLoadingScreen(){
   console.log("1 Loading Screen Appeared");
}

Let’s write another funtion for hiding the Loading… screen.

function hideLoadingScreen(){
   console.log("4 Loading Screen Hidden");
}

Now, let’s write a function for pulling data from the API. Since this function has an API call, it can take a while to complete. So, to simulate that, I’m gonna use setTimeout() function of JavaScript.

function pullDataFromAPI(){
   console.log("2 Start pulling data");
   setTimeout(() => {
      console.log("3 Finished pulling data");
   });
}

Alright, now this function is like a real API call function. ‘Cause now it takes some time to complete its execution.

Alright, now we have 3 functions ready. Now let’s call these functions in the correct order. As you can see, to make it clear, I included the number of the correct order.

showLoadingScreen();
pullDataFromAPI();
hideLoadingScreen();

Alright, this is what I got as the output.

Well, it’s now quite what we expected right? What we want is to Hide the Loading… screen ONLY after the Data Pulling is Ready. But we called them in the correct order right? But, why didn’t it work as expected ?

Well, the answer is quite simple. It’s because pullDataFromAPI(); function took some time to complete.

Let’s fix it with Callback Functions

So, let’s use the concept of callback functions here to fix this practical issue.

I’m gonna change pullDataFromAPI(); function a bit.

function pullDataFromAPI(callback){
   console.log("2 Start pulling data");
   setTimeout(() => {
      console.log("3 Finished pulling data");
      callback();
   });
}

I added the parameter callback to the function. And call that after Finished Pulling Data. That’s it!

And then what I’m gonna do is, calling these three functions like this,

showLoadingScreen();
pullDataFromAPI(hideLoadingScreen);

What I did was, instead of calling hideLoadingScreen() function directly, I passed it to pullDataFromAPI() function as an argument. So, pullDataFromAPI() will execute its code and then run the hideLoadingScreen() function after that.

That’s it! Now the output will be like this.

So, that’s how we use Callback Functions in a practical scenario.

So, I hope you get the idea of Callback functions now.

Here I did a short video about Callback Functions. Watch it if you need more clarification.

Cheers!