How to create a custom callback in JavaScript? - GeeksforGeeks

07 Aug, 2019
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">      GeeksforGeeks  </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">      GeeksforGeeks  </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">      GeeksforGeeks  </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:
JavaScript-Misc
Picked
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to append HTML code to a div using JavaScript ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?