Functions are objects in JavaScript, so you can store them in variables, pass it as an argument to another function and also you can return it from the function. Yes, function returning another function.

CallBack functions are derived from functional programming and is also covered in advanced JavaScript topics but here we'll see that it is quite easy to implement.

What is a CallBack or Higher-order function?

It is a function which is passed to another function as parameter and is called inside that another function, therefore know as callBack function.

Example of callBack function in jQuery:

$("#btn").click(function() {
  alert("Btn is Clicked");
});

As you can see, we've passed anonymous function as a parameter to click method. Click method will call or execute that function.

When we pass callBack function as an argument to another function, we're passing only function definition and not function body so it won't be executed in function parameter. Also, callBack function is not executed immediately, it is called back at some point inside the containing function body.

Implementing callBack functions

We can either use anonymous function or declare a named function and pass name of that function as parameter. For example,

// global variable​
​var allUserData = [];
​
​// generic logStuff function that prints to console​
​function logStuff (userData) {
    if ( typeof userData === "string")
    {
        console.log(userData);
    }
    else if ( typeof userData === "object")
    {
        for (var item in userData) {
            console.log(item + ": " + userData[item]);
        }
​
    }
​
}
​
​// A function that takes two parameters, the last one a callback function​
​function getInput (options, callback) {
    allUserData.push (options);
    callback (options);
​
}
​
​// When we call the getInput function, we pass logStuff as a parameter.​
​// So logStuff will be the function that will called back (or executed) inside the getInput function​
getInput ({name:"Rich", speciality:"JavaScript"}, logStuff);

We can also check that passed callback function as parameter is function or not, based on that we can call the function

function getInput(callback) {
    // Make sure the callback is a function​
    if (typeof callback === "function") {
    // Call it, since we have confirmed it is callable​
        callback();
    }
}

Multiple callback functions

We can pass more then one callback function in parameter of a function

function successCallback() {
    // Do stuff before send​
}
​
​function successCallback() {
    // Do stuff if success message received​
}
​
​function completeCallback() {
    // Do stuff upon completion​
}
​
​function errorCallback() {
    // Do stuff if error received​
}
​
$.ajax({
    url:"http://fiddle.jshell.net/favicon.png",
    success:successCallback,
    complete:completeCallback,
    error:errorCallback
});

Problem with callback and solution

Sometimes it is common to have many levels of callback function. So it is difficult to follow the code due to too many callBacks. This problem is knows as CallBack Hell. Simple way to avoid such problem is

  • Pass just name of the function as callBack instead of passing an anonymous function.
  • Separate code in modules and export those modules to do particular job.

Now that we've understood callBacks here are few things too keep in mind while writing them.

  • Do not repeat code (DRY—Do Not Repeat Yourself)
  • Have better maintainability
  • Have more readable code
  • Have more specialized functions.

Reference:
callBack Hell