Callback Function

Hey There! Today we are going understand in detail about the callback functions and along with that will cover various interesting topics. Let’s get started…

Why are callback functions important in JS? It is because we can do async things with their help. We very well know that JavaScript is a synchronous single threaded language but with the help of callback functions we are able to do asynchronous jobs too. Let’s see first what are callback functions:

function x(y){
}
x(function y(){}); -> callback function

Now let us see how it is able to implement async in JS:

setTimeout(function() {
  console.log("Timer");
},5000);
function x(y){
  console.log("x");
  y();
}
x(function y(){
  console.log("y");
});

The above example is the perfect example of async being implemented in JS. As we know that JS is synchronous single-threaded language and it will execute the code line by line and flow isn’t broken. Now the setTimeout function is stored in a separate space with 5 seconds timer now it won’t wait 5 seconds to move forward therefore it will move to next steps in code and passes callback function to x.

Therefore, output will be:

x
y
Timer (will be printed after 5 seconds)

Any operation that blocks the call stack it is called blocking the main thread.

Let’s see a callback function in Event Listeners:

document.getElementById("clickMe").addEventListener("click", function xyz(){
  console.log("Button Clicked");
});

The event listener is created on the click of the button. When this event occurs i.e., the button it clicked it calls the callback function. Below will be the output of it:

Now let’s understand closures in Event Listeners. Let’s take an example of printing count every time the button is clicked.

Get Neha Prabhakar’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Way 1:

let count = 0;
document.getElementById("clickMe").addEventListener("click", function xyz(){
  console.log("Button Clicked", ++count);
});

The output of this will be as below, though this is not a preferred approach as this will give global access to the variable count.

Now let’s look at the correct approach using closure as it will remember its lexical approach.
Way 2:

function attachEventListener(){
let count = 0;
document.getElementById("clickMe").addEventListener("click", function xyz(){
  console.log("Button Clicked", ++count);
});
}
attachEventListener();

Now if you see in the scope you will see the scope of the variable count is in the closure and the call stack has xyz function in it.

Now if you go to Elements in developer tools and then to event listeners you will be able to see the scope like below:

Most of the people remove the EventListeners in their code but why?
This is because they are heavy, even when not executed any code memory is assigned to it which is getting wasted that is why they remove it.

Hope this was helpful and easy to understand. If you found this blog helpful please go through my profile and have a look at some other interesting content. See you in next one! :) Until then..

Photo by Randy Tarampi on Unsplash