What is a callback function ?

If you don't know, I want to tell you that I 😍 Javascript and it was my goal to understand that how it executes. So, I know if you are a beginner and want to learn any JS concept in a great way follow me here and learn it the easiest way. Because it's not about just writing code if we don't understand it correctly we cannot become a good developer. So, lets start today's topic.

First, we will understand that what do we mean by callback function.

What are callback functions?

The functions passed into another function as a value is known as a callback function. For example in the below code the functions which is passed in the setTimeout is an anonymous function which is a callback function because it is passed in a function which is setTimeout.

setTimeout(function(){
    console.log("timer");
},5000);

function x(y){
    console.log("x");
    y();
}

x(function y() {
    console.log("y");
});

Now, we understand that what is a callback function. Good 🚀

Note : We should never block our main thread because it may result in unexpected behavior of our code and like in the above example the set Timeout don’t block our code it just get out of the call stack and then places that anonymous functions in the somewhere which we will see in the event loop and attaches a timer to it. So when the timer ends which is 5000 ms it is pushed into the call stack again and executes.

It doesn’t block other code below it. So that is the best way to write good code.

Understanding Event Listeners

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

The above code is attaching an event listener click to an element with id clickMe, then passing a function xyz to it which prints Button Clicked when we click on it.

What is that function xyz passed in it? Can you guess?

💡

Yes, the answer is callback function. Well done.

Assume that you have to count how many times the element is clicked. 👆

How will you achieve this? May be like this.

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

The code works fine but it's not what an interviewer might want you to do. Because it’s not a good practice as the count variable is open to our global scope and it may cause problems.

So, how can we achieve this. Yes, you are right using closures. See, the code example below to understand properly.

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

// don't forget to call the function 
attachEventListeners();

Here, we have placed our Event listener inside another function so the function xyz makes a closure and have access to var count. So, its easily incremented and private and not available outside the function.

As we can see that the event listener have access to 2 scopes:

Global
Closure - which have count var in it.

⚠️ One more important thing is that you should remove the event listener when it is not used anymore.

For example : When we remove a element from the DOM ( Document Object Model ) , then we must remove the event listener attached to it because the element is no more used but the event is still attached to it and may be its forming a closure which all it does consume unnecessary memory in our system.

Which will in turn slow our machine or the client machine. So, best practice is to remove the event listener after we don’t need it.

That’s it in the Callback functions today. Thanks for reading. 🙏👋

Best Explanation for Callback Functions 📲 ft Event Listeners ( Bonus : Interview Question )

Table of contents

Understanding Event Listeners

Assume that you have to count how many times the element is clicked. 👆