Promises vs callbacks

Do you know javascript works asynchronously but the question is how? , in today’s world, rapid software application are developed every day that holds large complex code. To manage that complexity, we need good tools to define and modify the code. JS introduced promises to reduce that complexity for handling asynchronous Javascript code. As a developer, you need to write async code now and then to load data into your tables of UI, make requests to the server, load DOM elements on priority, write non-blocking code on Node, etc.

So What are promises ?

Before jumping in into the promises lets first revisit the callback first, to understand why we need these promises or why it came into existence

callbacks - as the name explain itself “calling something back” that means calling back a specific piece of code. This situation came in existence when one needs to run some code (or some operation ) after some other code is executed.

let's see an example of this

Let's create one callbacks.js file and write some code in it, and execute it to satisfy the above condition

so in the above example, we can see that networkfunctionality and additionfunctionality are two different functions from each other. The body of adding functionality is encapsulated into a function named “addingFunctionality” and passed that variable into networkFunctionlity. As the network functionality takes 4 sec to complete its work, after completing that work now network functionality can call the passed variable into it (ie addition ) this is how callbacks work. Here networkFunctionality call backs the additionFunctionality. Sometimes it depends on the situation when the functionality needs to be a callback, we are getting variables from the network and after that calling back the addition functionality for those variables

Lets focus on promise now

In above scenario there is a problem, say if there is some problem happens with the network call then there might situation arises were adding functionality will never call, or if call it will throw some error cause we haven't handle network call we can counter that with promises. In simple words “A promise is a word taken for some action, the other party who gave the promise might fulfil it or deny it”.

So in our situation, we need to call addition functionality if the network call completed successfully else if condition not satisfied it should be handled accordingly. Now let’s see how the promise is created.

Now let's convert our network call functionality into promises, for this purposely let's create a new file “promises.js”

so here you can see then terminal shows the same result but the code is different , here we have called the addingFunctionality after getting the success result from the network functionality, so by the mean of this we can handle the decision taking in promise itself, say if we got some error in network call we can call reject() else if everything goes good we can call resolve(). Let’s complete this example assuming that we are getting some response from the network.

Final promise.js code

Here we can see the resolve() is not called as value is undefined from the network but if we change this value to 6, then the output should be triggered to resolve() method that will print some addition (in this case 12) on the terminal.

So this is how the promise works, i.e. by restricting the user to use only two methods resolve(—> then()) and reject (—> catch(err)), out of which one method will definitely call

But you will wonder than the same thing will be done in the callback that is handling the decision for calling of addition functionality. yes we can do but say if at some point if we need to call another method from additionFunctionality say function_two() and one more function from this newly created function_two() then it will become very difficult to handle it via call back, In general, this situation is called as callback hell also known as pyramid of doom, following is the example demonstrating this situation

Let,s proceed with our running example and understand this situation, now we need to multiply the addition with 5 and whatever the result came out after multiplication we have to subtract 20 from it and after the subtraction, we need to apply division by 2 and print the final value after it.

We will do a side by side comparison of callbacks and promises, for that we will create multiple callback functions and promises that will get called according to the respective function.

Comparison > > > > >

1) Every function in callback.js is dependent to each other so in order to calculate required result params of function needs to be satisfied first, like calling of addition function will need a multiplication callback and calling multiplication method need subtraction callback as a parameter and so on for other functions. This becomes very difficult for a developer to understand code.

2) If the developer needs to separate function say he needs only subtract, then he cannot be able to use that as subtract function will need a division callback as a param in it.

3) Promises make code cleaner and easier to understand and function that return promises have their unique identity that does not depend on any other functionality, so you can use it anywhere

4) A single catch statement will work for all promises that mean we can handle glitches separately in every promise and can return reject(). Say in division promise if the resulting value is not an integer then it should return reject()