What is the Callback Function in JavaScript?

Callback Function in JavaScript – If you’re familiar with programming, you already know what functions do and how to use them. But what is a callback function in javascript? Callback functions are an important component of JavaScript, and understanding how they operate will help you become a better JavaScript programmer.

So, in this post, I’d want to go through some examples to help you understand what callback functions are and how to utilize them in JavaScript.

What is a Callback Function?

A callback function is a function that is pass as a parameter to another function. The callback must not be conflict with the keyword, as the callback is just the name of an argument pass to a function.

In other words, a callback function is a function that is pass as an input to another function. The callback function is call when the outer function has been complete. It’s beneficial to write asynchronous JavaScript code.

A callback is easy to build in JavaScript. That is, when the task is complete, we simply send the callback function as an argument to another function and call it. Callbacks are mostly use to handle asynchronous tasks like registering event listeners, retrieving or writing data into/from files, and so on.

Let’s look at how to make a callback with the help of various examples.

Examples

Example 01: There are two methods in this example: getData(x, y, callback) and showData(). We’re calling getData() with showData(), which means we’re giving it as the third argument along with two arguments to the getData() method. As a result, the getData() method is call using the arguments specified, including the callback.

The getData() function displays the multiplication of two integers, and the callback function is call after it is finish. The data of the showData() method is print after the output of the getData() function in the output.

<html>
<head>
<style>
</style>
</head>
<body>
<h1>Softhunt.net</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(15, 60, showData);

</script>
</body>

</html>

Output:

img-1

Asynchronous callbacks are often use to continue the execution after an asynchronous operation is complete.

In the following example, we’ll see a callback that is run immediately.

Example 02: Another use of callbacks may be seen here. It’s an example of synchronous callback that is run immediately.

There are two functions here. showData(name, amt), which displays the data entered by the user using the alert dialogue box, and getData(callback), which gets input from the user using the prompt box.

<html>  
<head>  
  
</head>  
<body>  
<h1>Hello User</h1>  
<h2> This is the softhunt.net</h2>  
<script>  
function showData(name, amt) {  
alert(' Hello ' + name + '\n Your entered amount is ' + amt);  
}  
  
function getData(callback) {  
var name = prompt(" Welcome to the softhunt.net \n What is your name?");  
var amt = prompt(" Enter some amount...");  
callback(name, amt);  
}  
  
getData(showData);  
</script>  
</body>  
  
</html>  

Output:

Following the execution of the preceding code, a prompt box will appear, asking for the user’s name –

img-2

When the user hits OK after entering the name, another prompt box appears, asking for the amount to be submit –

Callback Function in JavaScript img-0

When the user hits OK after entering the amount, an alert box will appear. It displays the user’s name and the amount entered.

Callback Function in JavaScript img

That’s all for this article if you have any confusion contact us through our website or email us at [email protected] or by using LinkedIn

Suggested Articles:

  1. Reverse a String in JavaScript?
  2. How to Use Promise.all with Async/Await
  3. How to Promisify an Ajax Call?

Leave a Comment