Asynchronicity in JavaScrpit (part 2 Promises)

Bring coffee☕️

After we saw in the previous talk (LINK) how asynchronous programming work in JavaScript and we use the callbackQueue with setTimeout ⏳, and we saw how the event loop ♾ is controlled all of that, but☝🏼 we didn’t discuss the MicrotaskQueue, to understand it you must know how promises🙏🏼 work.

Simply a Promise🙏🏼 in JavaScript represents the eventual completion (or failure) of an asynchronous operation.
with some practice you will understand more 😉
first let’s analyze this code and try to execute it line by line 👌🏼

in the first line we just declare in the global memory a function definition with the name printData

— — -> 1ms

after that we declare a constant variable called result, and to assign to it its value we need to execute the fetch method, which is just a label of a web browser feature called XHR (XmlHttpRequest)

As we see👀 the fetch method immediately⚡️ returns a Promise Object to result with a property value which is (undefined FOR NOW🤨), and an onfullfillment property with an empty array The design of this Promise Object is such when it’s value gets filled in => it’s gonna trigger all the functions in the onfullfilment array So the value property will be updated when the fetch call do its second job by using the XHR browser feature and go to the posts.com server and search for my post with the id of 1 .

☝🏻Don’t think if I do after that line “printData (result. value);” Its gonna be my first post data .
NO, because we have no idea🤷🏼‍♂️ when that value property is gonna be updated? and how much time⏱ it will take maybe 10ms maybe 2000ms,
So if I want to print the post when it comes I need to insert a function in the onfullfilment array so it will be triggered
when the value property changed 🧠,
here where the built in function “then” comes into picture.

— — -> 2ms

95% of developers think in this line “result. then(printData);”
PrintData is gonna be called🤦🏻‍♂️, it’s not doing that at all Instead, it’s just adding the reference of the function printData to the onfullfillment array so when the data comes succeffuly and the value property changed .
The function printData get triggered

Now we reach that line : “console.log(“Hi”);” that will simply print hi to the console 🏌🏼.

— — -> 3ms

After some milliseconds the response comes back and the data is ready😁, Now the browser updates the value of value property in the memory from undefined to “my first post” which is the content of my first post in posts.com

As I said before about that promise object design🤓, if the value updated, then the functions in the onfullfillment array get triggered and executed one after one, but how🤔 can we pass them to the call-Stack to be executed, Here where the ☝🏻MicrotaskQueue comes into the picture, The MicrotaskQueue holds higher-priority tasks, such as promise callbacks,
It has priority over the callbackQueue.

So the functions inside the onfullfillment array will be pushed to the MicrotaskQueue, in our case it is only one function,
After the “EVENT LOOP♾” will find that there is some functions or function references (because we pass only the reference of the function to the Queue not the entire function) on the MicrotaskQueue,
then it will check for the call Stack if it is empty, in our case it is, because there are no other lines of code and there is nothing that still running on it So it will push the reference of the printData function to the call Stack and the parameter called (data) is automatically filled with the value of the Promise Object,
then “printData” will execute and finish. The MicrotaskQueue now is empty and the call Stack is empty 🌬.

— — -> 151ms

Finally we can see my first amazing post on the console.😃

💁🏻‍♂️ Of course we have other property on the Promise object like status which has 3 values (pending, resolved, rejected) the default is pending before it resolved as we saw Or rejected if some error happen and that’s not gonna trigger onfullfillment functions, instead there is another property called on onRejection which is also an array, we can get functions in that array using the “catch” built in function.

I hope everything is clear now, see you in the next talk 📸

وَٱلسَّلَامُ عَلَيْكُمْ