How to create a custom callback in JavaScript?

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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.")
        });

chevron_right


Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:
normal-callback

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:
separate-callback

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:
arguments-callback



My Personal Notes arrow_drop_up

Technical Writer Lets have an update

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.