Skip to content
Related Articles

Related Articles

Improve Article

How to create a custom callback in JavaScript?

  • Last Updated : 07 Aug, 2019
Geek Week

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




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




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

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it’s lowest price ever!




My Personal Notes arrow_drop_up
Recommended Articles
Page :