Callback

callback

Callback is a executable code that is passed as an argument to another function or code and execute after some time or certain condition. So thats why we can also say call after function to callback function. Execution can be two type first one is immediate (synchronous) callback and another one is later (asynchronous). But to understand callback function you need to know the basic of javascript function, closure.

Why do we need Callback?


function morningMsg() {
    console.log("Good Morning");
}

function nightMsg() {
    console.log("Good Night");
}

morningMsg(); //Good Morning
nightMsg(); // Good Night

In this example morningMsg call first and nightMsg called after morningMsg msg so morningMsg response first and nightMsg response after morningMsg so everything is fine but what else if morningMsg is an api call or part of timmer functions.


function morningMsg() {
    setTimeout(function() {
        console.log("Good Morning");
    }, 1000)
}

function nightMsg() {
    console.log("Good Night");
}

morningMsg();
nightMsg();


// Good Night
// Good Morning

Now you can see that nightMsg response first and morningMsg response after nightMsg. just because of morningMsg will take time to 1000 milisecond. So in this time duration nightMsg replay. So now we can say javascript function dosn’t wait to to complete functyion call or function response.

Create a Callback


function morningMsg(name, callback) {
    setTimeout(function() {
        console.log("Good Morning", name);
        callback(name);
    }, 1000)
}

function nightMsg(name) {
    console.log("Good Night", name);
}

morningMsg("John", nightMsg);

// Good Morning John
// Good Night John

Callback with real world data


function morningMsg(name, callback) {
    $.ajax({
        url: "Name api that gives user name",
        success: function(name) {

            if (name) {
                console.log("Good Morning", name);
                callback(name);
            }
        },
        error: function(err) {
            console.error(err);
        }
    });
}

function nightMsg(name) {
    console.log("Good Night", name);
}

morningMsg("John", nightMsg);

// Good Morning John
// Good Night John

Nested callback or complex callback


function morningMsg(name, callback) {
    console.log("Good Morning", name);
    setTimeout(function() {
        callback(name);
    }, 1000)
}

function afternoonMsg(callback) {
    return function(name) {
        console.log("Good Afternoon", name);
        setTimeout(function() {
            callback(name);
        }, 1000)
    }
}
 
function nightMsg(name) {
    console.log("Good Night", name);
}

morningMsg("John", afternoonMsg(nightMsg));

// Good Morning John
// Good Afternoon John
// Good Night John

Lot of time nested callback create callback hell in which first all callback depend on upper callback result or response. So that time we need to be careful. In next article we will discuss how to handle that type of problem using promise.

You May Also Like

About the Author: Pankaj Bisht