Difference Between Promises & Callbacks

Promises are not Callbacks.

A Promise is a value which may be available in future or not. A Callback is a function which we call inside another function. Normally callback runs after the parent function completes its operation. Let’s say the function is sending AJAX query, we can use callback function in a way so, when the AJAX request gets response, we can use the response in the function to do some other operation.

In case you are interested to know more about Promises, I have published an article earlier on the same.

Syntax for both Promises and Callbacks.


new Promise(function(resolve, reject) { 
	setTimeout(function() { resolve("Ashish"); }, 3000);
}).then(function(str) {
	console.log('First output: ', str); return str + " Panchal";
}).then(function(str) {
	console.log('Second output: ', str); return str + " Panchal from India.";
}).then(function(str) {
	console.log('Third output: ', str);

// Output will be like:
// First output : Ashish
// Second output: Ashish Panchal
// Third output : Ashish Panchal from India.


function opeArray(arr, callback) {
    var resArry = [];

    for (var i = 0; i < arr.length; i++) {
        resArry[i] = callback(arr[i]);
    return resArry;

var arr = [1, 2, 3, 4];

var arrReturned = opeArray(arr, function(arg) {
    return arg += 1;

// Output will be
// [2, 3, 4, 5]

If you compare the Promises code, it is much more readable then Callback function code.

Now let’s assume, if you need to debug error, with Callback function it will be hectic and need to go step-by-step in debug mode on browser but with Promise it will be much easier as shown in the code above. It will be like try-catch block.

Just think you need to handle 2-3 AJAX request and return values once all the request returns the values with Callback functions. It will be really nightmare. Promises are better when it comes to handle more then one AJAX requests. The code be much more easier and easy to understand.

Promise.all ([ ajaxResuest1(), ajaxResuest2(), ajaxResuest3() ]).then( function ( result ) {
    //do work. result is an array contains the values of the three fulfilled promises.
}).catch( function ( error ) {
    //handle the error. At least one of the promises rejected.

In above code the resultant code will execute only when all 3 request are done and if any of the request fails it will go to the Catch block.

Pretty Straight…! Do let me know if this will help in comment box below.

Web/ UI & Front-end developer based in Ahmedabad, GJ, India. Here to help/ discuss community to spread web awareness.

2 comments On Difference Between Promises & Callbacks

  • Hi ,
    in the code given why o/p is like –
    First output : Ashish
    // Second output: Ashish Panchal
    // Third output : Ashish Panchal from India.

    i believe sequence is o/p is not correct or may be i am not getting please explain .

    • Hi, The first line in the code will execute once the promise resolves after 3 Seconds.
      setTimeout(function() { resolve("Ashish"); }, 3000);.
      This code line will return “Ashish” string, I have console this string in the first console.log('First output: ', str); and then I have added ” Panchal” string at the end of the first string and returned it. So the next .then will have a “Ashish Panchal” string and lastly I have added ” from India.” in this and returned it. So the last console will o/p “Ashish Panchal form India.”. Hope, this will help…

Leave a reply:

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.