A callback function is essentially a function that is sent as an argument to another function. It is important not to confuse the term "callback" with any specific keyword, as it merely serves as a designation for an argument that is provided to a function.
To put it differently, a function that is supplied to another function as a parameter is known as a callback function. This callback function is executed upon the conclusion of the outer function. Its application is essential for crafting asynchronous JavaScript code.
In JavaScript, creating a callback is quite straightforward. Essentially, you just need to provide the callback function as an argument to another function and invoke it immediately once the task is completed. Callbacks are primarily utilized to manage asynchronous operations, including tasks like registering event listeners, retrieving or saving data to/from a file, among others.
Next, let us explore the process of creating a callback through the use of various illustrations.
This serves as an illustration of an asynchronous callback. Asynchronicity can be characterized by the scenario in which JavaScript must pause to finish a particular operation, allowing the remainder of the program to run concurrently while it is in a waiting state.
Example1
In this illustration, we have two functions: getData(x, y, callback) and showData. In this scenario, we are invoking getData and providing showData as the third argument. This means we are supplying it alongside two other parameters. Consequently, getData is executed with the defined parameters, which also includes the callback function.
The getData function is responsible for displaying the product of two numbers, and upon its completion, the callback function is invoked. In the resulting output, we observe that the data produced by the showData function is printed following the output from the getData function.
<html>
<head>
<style>
</style>
</head>
<body>
<h1> Hello World :) :) </h1>
<h3> The getData() function is called its arguments and the callback is executed after the completion of getData() function. </h3>
<script>
function getData(x, y, callback){
document.write(" The multiplication of the numbers " + x + " and " + y + " is: " + (x*y) + "<br><br>" );
callback();
}
function showData(){
document.write(' This is the showData() method execute after the completion of getData() method.');
}
getData(20, 30, showData);
</script>
</body>
</html>
Output
Callbacks are typically utilized to resume execution following the conclusion of an asynchronous task; these are known as asynchronous callbacks.
In the following example, we will observe a callback function that is executed right away.
Example2
This serves as yet another illustration of utilizing callbacks. Specifically, it exemplifies a synchronous callback that is executed right away.
In this context, we have two functions: getData(callback) which prompts the user to enter information through a dialog box, and showData(name, amt), which presents the information provided by the user in an alert dialog box.
<html>
<head>
</head>
<body>
<h1> Hello World :) :) </h1>
<h2> This is the logic-practice.com </h2>
<script>
function showData(name, amt) {
alert(' Hello ' + name + '\n Your entered amount is ' + amt);
}
function getData(callback) {
var name = prompt(" Welcome to the logic-practice.com \n What is your name?");
var amt = prompt(" Enter some amount...");
callback(name, amt);
}
getData(showData);
</script>
</body>
</html>
Output
Upon running the aforementioned code, a dialog box will appear requesting the user's name -
Upon entering the name and clicking the OK button, a subsequent prompt box will appear requesting the user to input the desired amount.
Upon the user clicking the OK button after inputting the amount, an alert dialog will appear. This dialog will display both the username provided by the user and the specified amount.