A callback is a function that is invoked after a function has finished its execution. As JavaScript is an event-driven language, it does not wait for a function to finish its execution before moving on to the next one. Callbacks make it possible to make a function execute only after another function has finished executing.
All functions in JavaScript are objects, hence like any other object, a JavaScript function can be passed another function as an argument. There are many inbuilt functions which use callbacks.
A custom callback function can be created by using the callback keyword as the last parameter. It can then be invoked by calling the callback() function at the end of the function. The typeof operator is optionally used to check if the argument passed is actually a function.
Syntax:
function processThis(message, callback) { console.log("Running function first with message: " + message); if (typeof callback == "function") callback(); } processThis("Hello World", function callFunction() { console.log("This is a callback function.") }); |
Example:
<!DOCTYPE html> <html> <head> <title> How to create a custom callback in JavaScript? </title> </head> <body> <h1 style="color: green"> neveropen </h1> <b> How to create a custom callback in JavaScript? </b> <p> See the console for output of the functions </p> <script type="text/javascript"> function processThis(message, callback) { console.log( "Running function first with message: " + message); if (typeof callback == "function") callback(); } processThis("Hello World", function callbackFunction() { console.log("This is a callback function.") }); </script> </body> </html> |
Output:
Non anonymous callback function:
A callback function is not always required to be defined as an anonymous function. It may be defined elsewhere and this function can be used later as a callback. The parentheses are not used when passing the callback function.
Example:
<!DOCTYPE html> <html> <head> <title> How to create a custom callback in JavaScript? </title> </head> <body> <h1 style="color: green"> neveropen </h1> <b>How to create a custom callback in JavaScript? </b> <p>See the console for output of the functions</p> <script type="text/javascript"> function processThis(message, callback) { console.log("Running function first with message: " + message); if (typeof callback == "function") callback(); } function callbackFunction() { console.log( "Running callback function next"); } processThis("Hello World", callbackFunction); </script> </body> </html> |
Output:
Arguments in a callback function:
The callback function can also have its own arguments and the values can be passed while invoking the callback function in the body of the calling function.
Example:
<!DOCTYPE html> <html> <head> <title> How to create a custom callback in JavaScript? </title> </head> <body> <h1 style="color: green"> neveropen </h1> <b>How to create a custom callback in JavaScript?</b> <p>See the console for output of the functions</p> <script type="text/javascript"> function processThis(message, callback) { console.log( "Running function first with message: " + message); if (typeof callback == "function") callback(9, "Hello!"); } function callbackFunction(num, str) { console.log("Running callback function next"); console.log("num value is: " + num); console.log("str value is: " + str); } processThis("Hello World", callbackFunction); </script> </body> </html> |
Output:
