Are you one of those who still confused about Callbacks in JavaScript ? If yes,then you are at the right place. Even I was also confused about what the hell is Callback in JavaScript before writing this article. Just spend 5-10 minutes here to read this article. So without wasting time, let's dive in deep and take a step forward to become a master in JavaScript.
What is Callback ?
Before understanding the callback, do you know about what is parameters and arguments in the function? Let's understand it :
// a,b are Parameters here
function sum(a,b)
{
}
sum(4,5) // 4,5 are Arguments Here
There is nothing complicated here if you just know the basics of JavaScript Functions.
Now, let's understand Callback with its definition :
A Callback is a function that is passed to another function as an argument.
I know definitions don't work sometimes. Let's start with the simplest example :
function myFunc()
{
console.log("Hello from CallBack")
}
myFunc() // Hello from CallBack
After declaring the function, we have just called it and our function starts printing the Hello from CallBack.
Now, please let me know that what can all you pass inside myFunc() arguments ?
You can pass Strings, Numbers, Array, Objects etc. Let's pass to our function arguments and understand my words :
function myFunc(a)
{
console.log(a)
}
myFunc("I am learning JS") // We have passed String
In above example, we have passed String.
We are making you understand it with the simplest explanation so please stay focussed on it.
Similarly, you can also pass Numbers, Array and objects
function myFunc(a)
{
console.log(a)
}
myFunc(10) // We have passed Numbers
function myFunc(a)
{
console.log(a)
}
myFunc(['Ravi','Alex','Kat']) // ["Ravi", "Alex", "Kat"] We have passed Array
So far from above examples, we have seen that we can pass Strings,Numbers,Array,Objects in our function arguments and all of this value is going to store in parameters which is (a)
But can we pass an another function in parameters ?
Yes, we can and this is called Callback function. Now let's pass an another function inside parameters.
function A(callback)
{
console.log("I am Function A");
callback()
}
function B()
{
console.log("I am Function B");
}
A(B)
// I am Function A
// I am Function B
We created 2 functions here : function A and function B
If you notice in the end of code, we just called A() and this time instead of Strings,Numbers,Array, we have passed another function B.
- Just wrote the function name B. Don't write B() inside function A.
- Also, we have passed an parameters callback in function A() in the same block of code.Argument Name could be anything here.
So which one is Callback function ? function A() or function B() ?
function B() is a Callback function as we have passed it in function A() as an arguments.
A Callback is a function that is to be executed after another function has finished executing.
This is a very basic example of Callback function.
Now, a question might pop in your mind what is the use of Callback here ?
Example of CallBack :
Let's say that you are downloading a pdf from the internet. The file has been downloaded upto 75%. Can you open the file before it is completed ?
No,you can't open a file until it is completed. Similarly, we use CallBack to prevent certain code from running until other code has done running.
So in this scenario, we can expect that :
function A is a code of downloading the file.
function B is the code for opening the file.
We can't run our function B untill function A completed the execution. This is why we use CallBack in JavaScript.
The purpose behind callback is to we can call 2 function with the help of 1.
If you really love ❤️ this article, please hit a like ✅ or drop a comment.