CallBack functions in Javascript

After a lot of investigation about callback on many sites, i got some knowledge on what are the callbacks and why we use callbacks. So i just want to share my knowledge here so that it will help some new javascript learners.

What is a callback function

According to wiki "a callback is a piece of executable code that is passed as an argument to other code, which is expected to call back (execute) the argument at some convenient time".  Generally a callback function is a function which is passed as a argument to the other function(say FuncA), and the callback function is "called back" inside that other function(FuncA) hance the name callback.

Syntax: 

The following is the syntax for a simple callback function

function multiplier(arg1,arg2,callback)
{
     callback(arg1*arg2);
}

multiplier(2,3,function(result){
   //do something with result
})

In the above example a anonymous function is passed as a callback function to "multiplier" function. Then from that "multiplier" function we have called the callback function.

passing a function as a callback to another function

Generally functions take input in the form of arguments and returns a value using return statement. But using javascript we can do things a little differently. Instead of waiting for a function to complete by returning a value , we can use callbacks to do it asynchronously.(read more about asynchronous programming here: Asynchronous programming). This is more helpful when we are making some Ajax request or Requesting some data from database(which takes some time to finish) etc. Instead of waiting for the call back to be called we can keep on doing other things.

let's see a simple example which uses callback function

function doTotal(marks1,marks2,marks3,callback){
    var total=marks1+marks2+marks3;
    callback(total);
}

doTotal(90,95,80,function(total){
   var avg= total/3;
   alert(avg);
})

In the above example we have passed a callback function as a argument to doTotal function. The doTotal functions calculates the "total" and calls the callback function by passing "total" to it. Now the callback function uses that "total" to calculate the "average".

Note: Actually we don't need callback in the above example. This can be done by using a regular return statement. Because calculating the sum don't take much time. We mostly use calbacks in the cases where the function takes some time to finish(like ajax requests).

Named callback functions

In the above example we have used anonymous function(function with no name). Now see the same example in which i have used named function as a callback.

function doAverage(total){
     var avg= total/3;
     alert(avg);
}

function doTotal(marks1,marks2,marks3,callback){
    var total=marks1+marks2+marks3;
    callback(total);
}

doTotal(90,95,80,doAverage);

Make Sure the Callback is a Function

Whenever we are using callback we have to ensure that the value passed as a passback is a function. We can check this by using the below code

function doTotal(marks1,marks2,marks3,callback){
    var total=marks1+marks2+marks3;
    if(typeof(callback) == 'function')
        callback(total);
     else
       //some other code
}

doTotal(90,95,80,function(total){
   var avg= total/3;
   alert(avg);
})

Here we are testing the callback value using a typeof operator to ensure that whatever is passed is actually a function.

I hope this will give you a basic idea on callbacks.

To read about how to use multiple callbacks visit: multiple callback functions

For more posts on javascript/jquery visit:  javascript/jQuery