Callback Function in Javascript
Authored By: Sanjeet Tripathi
Callback Functions are the functions in Javascript that get executed only after the primary function is done with the execution.
In all the cases, the Callback function is used as the parameter in the primary function.
Learn the concepts of Javascript with YourEngineer
Why do we need Callback Function?
Callback functions are mostly used because of Asynchronous action in Javascript. Asynchronous Javascript led to the nonstop execution of code, it doesn’t stop the execution of a function until it got completed. Instead, keep executing it in the background and let the rest of the code run.
It’s not necessary that callback functions are only used with Asynchronous Javascript. It is used in both Synchronous and Asynchronous. Let’s see each in detail with examples.
Callback Function with Synchronous Javascript.
In Synchronous Javascript, callback functions are mostly used in all inbuilt functions. All array functions in Javascript use callback. Let us see the Array. map function in Javascript.
//Map Function in Javascript
let Arr = [24,27,98,87,54]
let mappedArray = Arr.map(ele => { return ele })
Learn the concepts of Javascript with YourEngineer
Callback Function with Asynchronous Javascript.
In Asynchronous Javascript, Code execution does not stop to wait for a function to get completed, it runs that function in the background and executes the rest of the code. See below
//Asynchronous Javascript
//Function A
arr = [1,2,3,4,5,6,7.......,1000] //Array of length 1000
function printData(){
newArray = []
for(let i = 0; i < arr.length; i++){
ele = arr[i]*5
newArray.push(ele)
}
console.log(newArray)
}
//Funtion B
let finalResult = function (){
console.log("Data fetched from Array")
}
setInterval(printData,5000) //printData function will take 5 seconds to execute
finalResult()
Output:
Data fetched from Array
[5,10,15,20,25,30,35,40,……….,5000]
As we see above code, despite of written on the second, Function B is getting executed before Function A, due to setInterval() function. This is the basic feature of Asynchronous Javascript, but what if the result of Function B is dependent on Function A? In such case, we can use Function B as a callback for Function A so that it gets executed only after Function A. See below How to give the callback.
//Asynchronous Javascript
//Function A
arr = [1,2,3,4,5,6,7.......,1000] //Array of length 1000
function printData(callback){
newArray = []
for(let i = 0; i < arr.length; i++){
ele = arr[i]*5
newArray.push(ele)
}
console.log(newArray)
callback() //writing a callback function to execute at last
}
//Funtion B
let finalResult = function (){
console.log("Data fetched from Array")
}
setInterval(printData(finalResult),5000)
//finalResult function will be passed as the parameter and will act as callback
Output:
[5,10,15,20,25,30,35,40,……….,5000]
Data Fetched from Array
Now we can see that Function B is executed later despite the Asynchronous run of Function A. This is how the callback function works. It is mostly used when you are fetching data from Database.
Conclusion
We have seen What are the Callback Function, and how it works in Synchronous and Asynchronous Javascript. We have seen examples of it. The callback is one of the very important concepts. of Javascript which is exclusively used.
Keep Coding!!
What is YourEngineer?
YourEngineer is the first Engineering Community Worldwide that focuses on spreading Awareness, providing Collaboration and building a focused Career Approach for Engineering Students.
Deep dive into upskilling with Javascript
Join millions like you
