How to Create a Custom Callback in JavaScript?

Last Updated : 08 Oct, 2024

A callback is a function that executes after another function has been completed in JavaScript. As an event-driven language, JavaScript does not pause for a function to finish before moving on to the next task.

Callbacks enable the execution of a function only after the completion of another, making them essential for managing asynchronous operations. Since all JavaScript functions are objects, they can be passed as arguments to other functions.

Many built-in functions utilize callbacks, and custom callback functions can be created by defining a callback parameter. Optionally, the typeof operator can be used to verify that the passed argument is indeed 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: This example shows custom callback in JavaScript.

HTML

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

HTML

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

HTML

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