Callback, Callback Hell, and Promise in JavaScript

Callback, Callback Hell, and Promise in JavaScript

A callback is a function passed as an argument to another function

We will understand this topic with an example. Let's assume, Someone invites you for a lunch. He/She gives you the starter of the meal first, then the main course and dessert, and then drinks.

If we call the starter function, for the asynchronous behavior juice function printed first. It lost the sequence of tasks. Here callback function comes in.

Let's jump to the code.

const satisfied = true;

function starter(callback) { 

    if (satisfied) {
        console.log("starter is good");
        setTimeout(function () {
            callback() // call main course
        }, 1000)
    }
    else {
        console.log("skip meal");
    }

}


function mainCourse(callback) {
    if (satisfied) {
        console.log("main course is emmy");
        setTimeout(function () {
            callback() // call desert
        }, 2000)
    }
    else {
        console.log("skip meal");
    }
}

function dessert(callback) {
    if (satisfied) {
        console.log("dessert is emmy");
        setTimeout(function () {
            callback() // call desert
        }, 3000)
    }
    else {
        console.log("skip meal");
    }

}

function juice() {
    console.log("drink complete");
}

starter(() => {
    mainCourse(() => { dessert(juice) })
});

When we call the stater() function, we should pass mainCourse function. Here mainCourse function also has the parameter dessert. In the dessert function juice function should be called. This is the reason this function invokes the bellow code.

starter(() => {
    mainCourse(() => { dessert(juice) })
});

Here starter function receives a callback. In this callback whole function is stored and callback() invokes when needed in the starter function.

Now, assume that there are more functions dependent on each other. When we call those functions it will be so much dependable with each other and can't determine which function calls.

starter(() => {
    mainCourse(() => { desert(()=>{a(()=>{b(()=>{c=>{}})})}) })
});

All these functions are nested. It is time and memory consuming. This is called callback Hell.

This problem is solved with promise.

const satisfied = true;

function starter() {
    console.log("Start with starter");
    if (satisfied) {
        const promise = new Promise((resolve, reject) => {
            if (satisfied) {
                setTimeout(function () {
                    resolve()
                }, 1000)
            }
            else {
                reject("Skip meal")
            }

        })

        return promise;
    }
}

function mainCourse() {
    console.log("Start main course");
    const promise = new Promise((resolve, reject) => {
        if (satisfied) {
            setTimeout(() => {
                resolve()
            }, 2000)
        }
        else {
            reject("Skip meal")
        }

    })
    return promise;
}


function desert() {
    console.log("start desert");
    const promise = new Promise((resolve, reject) => {
        if (satisfied) {
            setTimeout(() => {
                resolve()
            }, 2000)
        }
        else {
            reject("Skip meal")
        }


    })
    return promise;
}

starter().then(mainCourse).then(desert).catch((err) => {
    console.log(err);
})

A promise is an object. A JavaScript Promise object can be:

  • Pending
  • Fulfilled
  • Rejected

Promise has two callback functions, resolve and reject.