Javascript Callback vs Promise

Async programming in JavaScript can be done using following techniques.

1. Callbacks
2. Promises
3. Async Await
4. Observables

In this article we will focus on callbacks and promises.

Its said that Promises are more superior to callbacks.

But many people who start using promises feel there is not much difference between Promise and callbacks. This is due to the fact that they are treating Promises like callbacks. This article will throw light on how to use Promise the right way.

To begin with lets take an example of callbacks. Add two numbers

function add(a,b,callback){
  setTimeout(function(){
   callback(a+b)
  },1)
}

Say we want to add 4 number, 1,2,3,4. Our add function only accepts 2 parameters at a time. So we will have to first add two numbers and then add the result to 3rd and so on.

add(1,2,function(result1){
   add(result1,3,function(result2){
      add(result2,4,function(result3){
         console.log(result3);
      });
   })
})

This code is what is called callback hell. It becomes very difficult to understand and manage this code as it grows bigger.

Lets do the same using Promises. So say we have another function addP which returns a promise which resolves to the the result of addition.

function addP(a,b){
  return new Promise(function(resolve,reject){
     setTimeout(function(){
        resolve(a+b);
     },1)
  });
}

Using this addP function our code to add 4 numbers will look like this:

addP(1,2).then(function(result1){      
   addP(result1,3).then(function(result2){
      addP(result2,4).then(function(result3){
         console.log(result3);
      });  
  });
})

So even after using Promises the code structure remains the same. Then what is the point of using promise. The issue here is we are not using the feature of chaining promises. When we do that we can get rid of the callback hell as shown below.

addP(1,2).then(function(result1){      
   return addP(result1,3)
}).then(function(result2){
   return addP(result2,4)
}).then(function(result3){
   console.log(result3);
});

Understanding Promise chaining

Chaining works because then() returns another promise. This promise resolves to the return value of the then handler function. Lets see some code to understand better.

let p = someAsyncCall();
let thenHandler = function(){
    return 10;
}
let p2 = p.then(thenHandler);
p2.then(function(result){
 console.log("p2 resolved value :",result); //10
})

In this case value of p2 resolved will be the value returned by thenHandler. In case the value returned by the thenHandler is a promise then p2 will resolve after that promise is resolved with the value of that promise.

let p = someAsyncCall();
let thenHandler = function(){
    return Promise.resolve(20);//simple way to create a new promise //that will resolve to 20
}
let p2 = p.then(thenHandler);
p2.then(function(result){
 console.log("p2 resolved value :",result); //20
})

In the future part we will see more on the difference in error handling between Promise and Callbacks.