What is a Callback Functions in JavaScript

Functions are the most important component of any programming language. It is a set of code that specifically performs some tasks and returns the value depending upon the returning type of the function. Callback functions are a vital element of JavaScript. In order to get more efficient in JavaScript, you need to understand what is callback functions.

So lets jump into the concept of callback functions, how to use it and why it is so imperative.

Callback Functions

As we all know, functions in JavaScript are first-class objects, which means we can use them in the same manner as other objects, assigning them to a variable and passing them as the argument to other functions. So now, what are callback functions?

Callback functions are the functions that are passed to another function as an argument which can be called later in time, hence called callback. So the function which receives the callback is known as a higher-order function.

Importance of Callback functions

Callback functions are very powerful in JavaScript, it gives us access to the whole asynchronous world in the synchronous single-threaded language, As JavaScript can only do one task at a time in a specific order.

In asynchronous programming, a unit of code is running parallel with the main code execution and notifies when its completed or failed. The callback function makes sure that the function will not run at the time of execution but right after the task has been completed. Let us understand it with an example,

setTimeout(function(){
   console.log('Called first')
}, 3000)


console.log('Called second')

So what do you think, which one is called first? Answer is,

Called second
Called first

But you will think that the setTimeout function was called before the second console, but how it executed after it, the answer is the callback. So actually when you run the code, in setTimeout we have given, 3000 ms condition, so javascript does not wait for it and moves to the next line and executes it and after 3000 ms, then the callback function is executed.

Also read, An Easy Explanation of JavaScript Closure

Let us take another example and see what’s happening behind the scene inside the Devtools, so I put the breakpoints on two consoles, and run the code,

setTimeout(function(){
	console.log('timeout called')
}, 3000)

function x(){
	console.log('called x')
}

x()

so when we execute the code, in call stack we see, first function x is executed,

And then Call Stack automatically gets cleared out and the whole file execution gets complete, but after 3000 ms, the callback is called in Call stack, and it gets executed.

Also read, The HTML500 Bootcamp Teaches Free Coding To Promote Digital Literacy

So due to the callback function, we would not have achieved the async operation, because otherwise, It would have blocked the main thread, I will talk in a detailed manner about thread blocking in another async function article later.

Callback in Event Listener

As we know JavaScript is also know for Event-driven, and we always use Callback function in our EventListener all the time, so lets take an example and understand what happens inside the call stack.

<button id='clickMe'>Click</button>

and then we attach, event listener to the button,

var val = 0;

document.getElementById("clickMe").addEventListener('click', function callbackEvent(){
	console.log('clicked', ++val)
}

So when we execute this code, so from ‘getElementById’ will pick up button element through id ‘clickMe’ and then add event ‘click’ to that button, and when the user clicks the button, then it will call the callback function, ‘callbackEvent’. Now I will add a breakpoint to the console, and check what happens when you click on the button.

As you can see, even when the program is running there is no function to execute inside the call stack.

So when you click on the button, the callback function ‘callbackEvent’ would be pushed inside the call stack and execute. And this is how through the help of the callback feature we are able to add an event and executing them without blocking the main thread.

Also read, JavaScript Functions | How does Function works in Js {Detail Explanation}

Final Words

A nice way to understand the callback function working is imagining that it is a function that is called at the back of the function it is invoked into.

I hope you like my article, comment down below and let me know, also share this article with your friends and family if you found it helpful. Please bookmark this website to get awesome articles like this.