Javascript Promises Vs Callback function

In my previous blog, I explained the callback pattern and how it works, go to check it before reading this one because both are connected, and it is crucial to know the callback function before to dive into the Promises.

This blog aims to compare the callback function with the Promises one; this means I will be writing the same function in both ways to compare them with each other. I suggest you open two different files and do the same by coding along the blog to understand better the concept.

Let see how we would handle errors and results in a call back function by creating a sample example:

This function will wait 2 minutes before to pass the results in our callback function. Below we are calling it, and we are expecting either an error or result. If we have an error, we will pass the first argument and pass null or undefined as the second argument as below:

Now if we would get as error the string “this is an error”, and we will get null as results. The same logic works for results:

Now we will get null as an error, and the string “this is the results” as results. The next step here would be to add some logic in the function once called to be able to use the right return value:

Here we are saying to the function that if “error’ is true stop the function execution and return the error otherwise return the results.

Let see how we can implement the same function above using the Promises. However, most of the time, we won’t be the one creating Promises. Usually, these functions are created by the library we use. Still, it is important to know the syntax and what’s happening inside to be able to use it better in our application.

As you can see, we created a function calling “new Promise”. As arguments, we passed two functions “resolve & reject”. As you can imagine in this case if things goas wrong we will call reject and if it goes well we would call resolve. So fare both function looks similar, so how we are going to call one of the two when the asynchronous process is completed ??.

Let see how we can call this function ad to see if there is an error or a result:

The functions here is a bit different from the callback pattern, we are using a various method on our function, in this case, the “PromiseFucntion” is the Promise, and a Promise is nothing more than an object with different methods that we can access.

The first method we called on our function is “.then” which allow us to register a function to run when things go well, in this case, when we called “resolve”. Now we can get access to the data passed from the resolved function throughout the only parameter we have in the function that we called “result”. This first function will get executed if things go well, and the resolve function is called in our Promise.

So what happens if we call “reject” in our Promise? How can we access to that error? Let’s see an example of an error in case things goes wrong:

In this example, we called “reject” inside our Promise, and to print the error to the console we used chained another method “.catch”. This method works exactly like the first method which prints the result, but in this case, this method will execute just in case thing goes wrong, and we have an error coming to form our Promise.

The benefit here is that the intention of the code is evident, we have “resolve” and “reject” which are two different functions that make easy to understand what’s going on in the function. If things go well “resolve” is called and we get our data, and if this goes wrong, we call “reject”, and we get our error.

In the callback pattern, we have one function which does both operations. Means that we need to look at all the call of the callback and figure our which of the two-argument is provided, which can be a bit confusing and lead to errors.

Another benefit is the way we handle the error and the result. In the call back function we have one single functional that runs and is up to the developer to figure out if there is or not an error by setting an if statement like in our example to call the right code. In the Promise function we have to separate functions, and just one of the two functions will get called depending if there is or not an error. In fact in our example when the result was called the “.catch” method did not run because there was not an error, same when we called the error, the “.then” method did not run. It gives us more control over the outcome and how we debug our function. With Promise, we don’t need to add any additional logic.

Another advantage in the Promise is that is easy to not mess up, in the function passed we have the two-argument “resolve” and “reject”, we cannot call both, and we cannot call one of them twice. Once one of the two is called the Promise is done, and its value or state cannot be changed. While in the callback pattern there is nothing built it that can prevent that we can call twice the call back function. Let’s proof that together:

In the above example, I called twice the callback function by providing the first with an error and the second one with a result. In the terminal, we got both of them, the result and the error, as you can see. So what would happen if we try to do the same with the Promise function?

Here we tried to replicate the same by calling both of the function, as you can see once the first function “resolve” is called the second one won’t run. In the terminal, we get just the result and not the error, and the same if we do it the other way around:

I placed the error function first now, and as you can see the second one was not called, and in the terminal we got just the error running.

I hope this blog was enough to explain the logic behind the Promise and why and how you should use them in your code.