Javascript Notes, Part-05 - Promises.

In the previous post, we have learned that there is no way to interact with browser functionalities like setTimeout. We don't know when they will end, we cannot return anything from those callback function. We just leave it up to JS to execute the code in those callbacks.

Do you want to trust setTimeout(or any other browser functions) or would you prefer something more intricate which would promise you that it would let you know when such browser functionalities end, exits and could also provide you a way to return values?

In ES6 Promises were introduced. These facade functions start functionality in the browser and in JS memory as well so that we can track what's going on in the background.

So, what do they do?

When promise functions are invoked they start the functionality in the browser as well as store data in JS memory to keep track of what is going on.

Let's look at an example using fetch(a browser facade function)

function display(data){
 console.log(data)
}
const futureData = fetch('https://twitter.com/will/tweets/1')
futureData.then(display);

console.log("Me first!");

So, let us see what happened.

1. Function display is stored in global memory.
2. fetch, which is browser function introduced in ES6 is invoked with URL.
3. Even though the request to get data might take time, fetch immediately returns a JS object(Promise). This Promise object has fields {value:..., onfulfillment:[], onrejection:[]}
4. This Promise object is stored in futureData.
5. This Promise object stored in futureData has method .then which takes a callback as an argument.
6. The callback argument display is stored in onfulfillment array.
7. The fetch works on its own to get data apart from JS, our Thread of Execution proceeds and prints "Me first!" on the console.
8. Now, whenever our fetch fetches the data and returns a value, it is stored in the value property.
9. Once the value property of Promise(futureData) is changed, the function display stored in onfulfillment array gets executed.

So, what have we achieved?

• A nice cleaner way to code things.
• A promise object to keep track of what is going on.
• And we can now return data to the caller.

Bonus!

When does promise deferred functions stored in onfulfillment array are going to be executed? Immediately? No way, JS is synchronous. Remember that!

Similar to the callback queue, we have a new queue for these new ES6 operations and that is called the microtask queue.

• Callback functions from the promise objects are put into the microtask queue.
• Our event loop now has a new job, that is to check the microtasks queue too.
• Microtask queue is given preference than the callback queue.
• Value property of Promise object is updated only after we execute the entire JS global code.
• There is also a .catch method attached to Promises which adds a parameter callback function to onrejection array, these callbacks are executed when errors are returned.
• onfulfillment and onrejection are hidden properties of Promise object.