How to Callback Function With Parameters in JavaScript

While programming in JavaScript, a callback function with parameters can assist in avoiding problems and errors. In addition to that, it offers the ease of calling a particular function after another. In another case, it is beneficial in such a way that as long as the previous operation is not completed, one can wait to proceed to the next operation.

This article will illustrate the methods to apply callback functions having parameters in JavaScript.

How to Callback Function With Parameters in JavaScript?

To callback function with parameters in JavaScript, the following methods can be applied:

“User-defined” value
“Template Literals”

Now, we will demonstrate the stated concept one by one!

Method 1: Applying Callback Function With Parameters in JavaScript on the User-defined Value

This method can be applied to pass the callback function as an argument to the main function involving the user-defined value while being invoked.

Check the following example for understanding the stated concept.

Example
Firstly, define a function named “example()” with two arguments: “item” and “cb”, where the item is the value entered by the user, and the second argument refers to the callback function.

In its function definition, ask the user to enter a string value using a prompt. Then, the user-defined value will be passed to the callback function as a string argument:

function example(item, cb){
var string = prompt("Enter the content: ") + item;
cb(string);
}

Now, declare the callback function named “callBack()” with the specified argument “fact” utilized to display the entered value in via alert dialogue box:

function callBack(fact){
alert(fact);
}

Finally, access the main function example() along with the callback function being passed as a parameter to it with the specified string value:

example("Loaded!", callBack);

The resultant output will be:

From the above output, it is evident that both of the string values, the original and the callback function’s argument value are merged and successfully displayed in the alert box.

Method 2: Applying Callback Function With Parameters in JavaScript Using Template Literals

“Template literals” are represented as the backtick (`) characters and are mainly used for string interpolation. This technique can be utilized to display the specified string value against the corresponding template literal. These literals should be placed in the original function definition along with the value of the callback function.

Example
In the following example, define a function named “example()” with the specified arguments. Here, the particular argument “string” is similarly referring to the string value with the help of the template literal, and “cb” represents the callback function:

function example(string, cb){
console.log(`${string}`);
cb(string);
}

After that, declare the callback function named “callBack()”. In its definition, we will print out the following message:

function callBack(){
console.log('LinuxHint!');
}

Lastly, invoke the “example()” function and pass the string value and the callBack function as arguments:

example('Website Loading...', callBack);

It can be observed that upon passing the call back function as a parameter, its corresponding string value is merged with the main function’s value:

We have compiled the methods to utilize the callback function with parameters in JavaScript.

Conclusion

In JavaScript, you can apply a callback function with parameters upon the value entered by the user or utilize the template literals technique. The first approach can be utilized to perform the callback function on the user-defined value, whereas the second approach assists in working with hard coded values as its parameters. This manual demonstrated the method to use the callback function having parameters in JavaScript.

How to Callback Function With Parameters in JavaScript