Write Your Own Promise in JavaScript — JavaScript Interview Series
Promises are one of the greatest additions to ES6 and form the basis of many of the Javascript libraries which are based on asynchronous methods. It is in fact a topic regularly visited in all Javascript interviews. Sometimes candidates are expected to write their own Promise ( also called polyfill ) in Javascript especially when you interview for major companies like Amazon, Facebook, etc. This is a great way for companies to gauge a candidate’s understanding of the core concepts of JS.
Before we start off, I would request you to read the following article to get a clear idea about promises.
Assuming you know everything that is to know about Promises, its time to get started
Polyfill for Promise
Consider an asynchronous method that divides two numbers ( a, b ) with a delay of 2 secs. We try to execute this operation by using a Promise polyfill (myPromise ). Please read the code below carefully
Let’s go over this code step by step.
- The asynchronous function division(a,b) with a = 5 and b = 2 , is executed on line 36 .
- This function returns a Promise (myPromise). Since myPromise is a constructor function an instance of the myPromise is created with the ‘new’ keyword and returned.
- The myPromise function takes in an executor function as an argument ( defined between line 3. and line 12 ) which is asynchronous due to the setTimeout function.
- When the instance is been created with the ‘new’ keyword then the myPromise function is also invoked and executed the ‘this’ is returned. Read more about ‘new’ keyword and constructor functions here. The returned this is used to invoke the necessary functions such as then() and catch().
- Since the executor function is asynchronous the executor function although executed at line 32 because of the ‘new’ keyword does not immediately get executed because of its asynchronous nature ( due to setTimeout ).
- The executor function takes in two arguments resolve and reject which are described in line 26. and line 29. respectively. The resolve function executes the onResolve function. However, this function is not yet defined because the then() method (line 18. ) which assigns it a certain function (line 19.)is not yet called. Thus we are in an unsafe zone. However, because of the asynchronous nature of the executor function, we get enough time to change the status of the onResolve from undefined to the function described in the then() method by calling the then() method from division(5,2).then() .
- When the then() method is called on the function divide(5,2) , the then() method is executed ( described between line 18. and line 20 ). Whatever function is described in the parenthesis of the then() method is attached to the onResolve variable described previously. Hence now the resolve no longer had an undefined onResolve variable.
- When the executor function is ready after the setTimeout is expired the resolve() function present in the executor function is called ( since b is not equal to zero ) on line 6.
- Thus the custom myPromise is resolved.
Phew!!! that was overhwelming . Now, what if the executor function did not have the setTimeout method.
Would this still work?
Sadly 🥲 🥲 🥲 No !!!!! since we did not have enough time to get out of the unsafe zone.
We get the following error in our browser
In order to deal with this situation, we need to modify the myPromise function as follows. ( I have only modified it for resolved promises but a similar approach can be considered for rejections as well ).
Here the execution order remains the same as described previously. However, we have three additional variables here (value, called, and fulfilled).
- If the then() function is executed before the resolve function then we store the function described in the then() method in the onResolve function and set the called variable to true (line 19 )stating the then() function was called. However, if the promise was fulfilled before the then() function was executed then we immediately invoke the onResolve function with the function described in the then() function and the value stored in the variable value (line 24).
- If the resolve function is executed before the then() function then the fulfilled variable is set to true stating the promise was fulfilled and the resolved value (val) is stored in value variable. Also, it is checked if the then() function was called using the called variable. If yes then the onResolve function will be executed since this will be available by now.
The code which is described in figure 3. is the complete and sufficient version of a Promise polyfill.
Take some time to go through the article once again before you move on to trying this code on your own.
Hope you enjoyed the article. Kindly share any comments and queries in the comment section below.
More content at plainenglish.io
