Callback function in JavaScript

Sourav.Kayal
Posted by in JavaScript category on for Beginner level | Points: 250 | Views : 2435 red flag
Rating: 5 out of 5  
 2 vote(s)

In this article we will learn the concept of callback function in JavaScript.

Callback function in JavaScript

In this article we will try to understand the concept of callback function in JavaScript. The callback approach is one of the examples of function oriented programming. The concept of callback is , The function will call another function when it will finish it’s execution. The callback function is very necessary in various scenarios. For example, we want to show one text after loading of page or finishing of certain animation, in those scenario we can implement callback function.

Example of simple callback

In this example we will try to implement one simple callback function. We know that in JavaScript ,function is one type of object and we can send function as function argument. Here is one example

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <script>
        function abc() {
            console.log("I am callback function");
        }
        function xyz(callback) {
            callback();
        }
        xyz(abc);
 
 
    </script>
</body>
</html>


 Call function after type checking

Before calling to callback function we can check it’s type. It is always a best practice to check the type of argument. If the callback argument is not function type then it will show error message in console.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <script>
        function abc() {
            console.log("I am callback function.Type checked");
        }
        function xyz(callback) {
            if (typeof callback === "function")
                callback();
            else
                console.log("It's not function");
        }
        xyz(abc);
 
 
    </script>
</body>
</html>

Here is output of above example.


Pass argument to callback function

We can argument to callback function as normal function. Here is sample example to do that. We are passing name and surname parameter to callback function.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <script>
 
        function print(name, surname) {
            console.log("Name:- " + name + "Surname:-" + surname);
        }
 
        function collect(name, surname,callback) {
            if (typeof callback === "function")
                callback(name, surname);
        }
        collect('Sourav', 'Kayal', print);
    </script>
</body>
</html>
 

 
Callback in JQuery

JQuery is JavaScript library and have huge number of callback function in it. In this example we are printing message after button’s click event has occur.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="backbone/Jquery.js" type="text/javascript"></script>
</head>
<body>
    <script>
        $(document).ready(function () {
            $("#call").click(function () {
                alert("Button press");
            });
        });
 
       
       
    </script>
 
    <input type="button" id="call" value="call" />
 
</body>
</html>


 

Conclusion:-

In this example we have learned the concept of callback function in JavaScript. Hope you understood the concept. In coming article we will learn more about JavaScript. 

Page copy protected against web site content infringement by Copyscape

About the Author

Sourav.Kayal
Full Name: Sourav Kayal
Member Level: Silver
Member Status: Member,MVP
Member Since: 6/20/2013 2:09:01 AM
Country: India
Read my blog here http://ctrlcvprogrammer.blogspot.in/
http://www.dotnetfunda.com
I am .NET developer working for HelixDNA Technologies,Bangalore in healthcare domain. Like to learn new technology and programming language. Currently working in ASP.NET ,C# and other microsoft technologies.

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)