Hello once again, this article is all about what I understood from a course I took Javascript: The Hard Parts from FrontendMaster which I've been writing about in this series.
From the series, so far, I've written about Thread of Execution, Memory, Execution Context, Call Stack, Callback queue, Event loop, WEB API and then Asynchronous Javascript.
I'll advise you to check out the previous blog posts before proceeding anyway let's proceed.
Introduction
I'll explain what a Promise is, what are the properties a Promise object has and how it's asynchronous.
Now, let's get to the main topic;
What's a Promise
A Promise is a special object that may produce a single value at some time in the future. Since the single value is expected, later on, that makes the concept about promises asynchronous.
Recap from my previous post on Asynchronous Javascript, whenever an asynchronous instruction is to be executed, it goes to the Web Browser and there isn't any way to tell Javascript about the progress of the asynchronous operation before it moves to the Call stack for execution.
But, with Promises, you'll be able to tell Javascript the progress of what's going on in the Web Browser's background.
Here's a quote by Will Sentance the instructor of the course:
"when you trigger something in the background, don't just throw it out there. But have it have some sort of consequence in JavaScript memory as well"
- "something in the background" means asynchronous instruction
- "don't just throw it out there" this statement is saying don't just add the asynchronous instruction to the Web Browser background
- "But have it have some sort of consequence..." this is tell Javascript the progress of what's going on at the background.
Since it'll be better to have some consequence based on what's happening on the Browser to JavaScript, Two-pronged facade function was initialized.
What's meant by Two-pronged facade function you might ask:
- Start a request/task in the Web Browser background and
- Return a placeholder object (promise) immediately in Javascript
What request/task you might ask?
In this case, I'm talking about speaking to the internet using Fetch / XHR, labelled as Network Request by the Web Browser.
Fetch speaks to the internet while in the Web Browser background and then returns a promise object to Javascript. The promise object shows the progress of the data to be fetched.
Let's look at an example:
function display(data) {
console.log(data);
}
const futureData = fetch('https://twitter.com/jomz/tweets/1')
futureData.then(display);
console.log("Hello");
If you'll prefer viewing an illustration demonstrating the instructions above, click here
From the instructions above:
- Firstly, a function
display() is declared and stored in the Global Memory.
Then a variable futureData is assigned a value fetch to go to some URL (Uniform Resource Locator) and get a data (response data).
The fetch returns an object which is a promise with three properties/keys (for this article, we'll be looking at two properties) which are:
value which has no value for now
onFulfilled which is an empty array for now also.
futureData holds an object (promise object) which is JavaScript consequence of getting something through the internet.
The consequence happening on the Web Browser will be a Network Request which holds the domain name (twitter.com) of the URL and also the path (jomz/tweets/1) which the domain name is linked to.
Note: by default fetch uses GET saying get some data from the internet.
When whatever data fetched has been retrieved (known as response data), its get added to the promise object value property.
Note: the time taken to speak to the internet isn't known, it could be days on a slow network :) but whenever the response data is gotten it'll be inputted (passed as parameter) by default into a function in the onFulfilled property.
futureData.then(display): this line of code is saying, whatever response data that'll be received, should be added to the function display in the onFulfilled property array of futureData, also having access to the value property value.
console.log("Hello") is executed next.
Now, after 200ms, finally the Web Browser has received a response data ("hi, everyone") which is then passed to the futureData value property and then the function (display()) in onFulfilled property is invoked and added to the Call Stack also having the response data as parameter and then logs hi, everyone.
Remember when ever a Function is invoked a brand new Function Execution Context is created, more on that here
OMG 🤯, that's a lot of details. Here is a graphical illustration below of all the above explanations.
Conclusion
They're more advanced ways of using promises from the little research I made but this is the fundamentals of what promises is all about.
Here are further concepts to note:
When the value property in the promise object is empty, this state is known as Pending.
When the value property in the promise object has a value, this state is known as Resolved.
Lastly, the Rejected state is when something has gone wrong with the data that's meant to be recieved. I'll write about this state in the next article.
Also, in the next article, I'll be writing about Microtask Queue and also looking at more complicated example.
Thanks for reading 🥳, if you've read to this point, see you at the next article.
P.S. To be frank, I haven't got my hands dirty with these concept, but I feel learning and sharing what I've learnt will be a great use to me when I finally start appling these concepts or what do you think? Leave in the comment below.
