What Is Callback-Function in JavaScript? How It Is Replaced By Promises?
Let us understand term Callback by an real-world example: Suppose, you are calling to your Girlfriend (If you have) and she is busy in another call then she send message to you : “I am busy right now, Call back you later.!!”. After completing her work, she calls you back and this is what call back in JavaScript as well.
In JavaScript, When a function is executing (Girlfriend is talking with someone) then after function execution is completed another function is started for execution this is call back function.
Now you are thinking that its depend upon when, where you are calling function and all function call is “Call-back function”.
Here, printWorld() function is executed after printHello() complete its execution but this is not call-back function example because printHello() is not Asynchronous function. Suppose, printHello() prints after 1 Second then printWorld() executes first.
What if we want “Hello World” output when Asynchronous function is there. We can pass function as argument and calls it after printHello() complete its execution. Here below code snippet of how function pass as argument :
Callback function can be defined as a function passed by argument and executes when one function completes its execution.
Suppose, If you have API (Application Programming Interface) to get Students Roll numbers and select one of Roll number — getting that roll number’s data and print that data. We don’t have API to get students data so we are using setTimeout() Async function and getting roll number after 2s, We are also selecting one of roll number manually after 2s and print Roll number’s data after 2s. This can be done by call back function.
The program became complex and complex if we have too many things to do like Getting Students data, Selecting one of them student, get student’s roll number and get result by roll number then it become very complex. If you have any Error in this then debugging is also tedious task, this things is called “Callback Hell”, which is shape like “Pyramid Of Doom”.
To overcome with this problem, Promises is introduced in JavaScript. Promises has three states : Pending, Resolved, Reject. Promises is created by Constructor : new Promise(). It has one executor function which has two arguments (resolve, reject).
Promise object has three methods: then(), catch() & finally().
If Promise is successfully executed then its data is transferred through resolve function and if it has error then passed through reject function.
We have implemented same task which is done using call back function in Promises and its easily understandable However it is complicated compare to callback function but when you use promises for sometimes then it’s easy to implement.
In getRollNumber(), resolve method’s data is caught by then() functions arguments and reject method’s data is caught by catch() function. Here In Promises, Every task has different promises because of that it is easy to debug and readable compare to call back function. You can see that there is no shape like “Pyramid of Doom” in Promises. This is how Callback function is replaced by Promises.
