How I recreated a JavaScript Promise from scratch

Photo by Miryam León on Unsplash

What is a promise?

A promise in JavaScript is an object which represents an asynchronous operation and can have one of the three states:

• pending: initial state, neither fulfilled nor rejected.
• fulfilled: meaning that the operation completed successfully.
• rejected: meaning that the operation failed.

A promise with a positive attitude

The confusion around Promises

Promises allow for asynchronous execution of JavaScript code which is aided by external APIs, but are often times, confused to be asynchronous themselves. In order to dispel this myth, to prove to myself that there is nothing asynchronous about a promise at all, I went on to create my own little ‘fake’ promise. For simplicity, I’ve implemented the resolve part of it. I encourage you to extrapolate the reject part yourself.

Step 1: Create the hull around the machine

We start by writing a promise as we normally would, except, we name it FakePromise this time. We’ll implement this class later but for now, our fake promise looks identical to a real promise, containing the following parts:

Step 2: Create FakePromise function constructor

We now create the class FakePromise which we just instantiated, by keeping in mind below points:

1. A method called ‘resolve’ has to be passed to the callback given to the FakePromise constructor
2. This method has to be run when the asynchronous task of the callback has concluded.

Now that we have,

1. A FakePromise class which accepts a callback
2. A resolve method which is passed down this callback and called when the callback has concluded its asynchronous task

lets figure out what this resolveCallback is.

Step 3: What about ‘then’?

Think about it, what is the relationship between ‘resolve’ and ‘then’? We pass the value which represents the fulfillment of a promise to resolve method, and that value miraculously tunnels out from the callback passed to ‘then’ method.

Keeping that relationship in mind, lets define ‘then’.

Here, ‘then’ method accepts a callback which is eventually: ‘this.resolveCallback’. This is the method from which the result of the promise is going to tunnel out.

Where have we seen this resolveCallback? That’s right, it was seen being called by resolve method and being given the result of the promise. Let’s take a look at that code again below:

Summary

Here’s the series of events, brought to you by Sherlock Holmes ;)

1. The asynchronous setTimeout completes with the help of browser APIs (Without any help from Promises, no thank you)
2. In the same function as setTimout, we call the resolve method passing it the final value representing the fulfillment of the promise.
3. When resolve is invoked, it runs something called as resolveCallback and passes it the final value
4. Surprise! resolveCallback was given to ‘then’ as an argument. It has now been called by resolve method and it has the final value (In our example, it is a string that says: “This is asynchronously done after 5 seconds”)
5. We had implemented the use of this final value in the callback to ‘then’ (resolveCallback) which is being run at the moment. In our case, we simply log the string to the console.

As we saw, a promise is just a clever abstraction on the concept of callbacks and not some magically asynchronous part of ES6!