Welcome back.
In this particular video, let's see how asynchronous programming or async code works behind the scene.
Like I told you that we are going to revisit the event loop, course tag and the web API.
So this is a time.
So we are going to use a to call left hand flip dotcom.
So if you visit latent flip dot com, you're going to have the beautiful website.
And so I'll provide a link to this particular website.
So let me click on.
Okay, now here we go.
So this too is going to help us to visualize what goes behind the scene when we run async code.
So remember, before we get into that, let me take you through the interface for this particular tool.
It will see that here is our text editor where we are going to write our own code and we have a section
which is the cost tag.
So the cost tag is part of the JavaScript V8 engine.
We have course tag and we have the heap.
And for the meantime we are going to stick to the course tag.
So the course tag manages what the execution or function course.
So it's kind of the structure that is used to track the execution of function calls and is used to keep
track the order in which functions are caused or are made that the course tag meaning it manages which
function is ready to be called that is it about the cost?
And you remember you talk about the Web APIs.
Now this is a time for me to explain to you in details what actually is the Web APIs?
Again, Web APIs are not part of the core JavaScript language, but instead it is being built in into
our browsers.
So the browsers also have some methods that we can use in conjunction with JavaScript to run code successfully.
Example of this web API is what you call the set timeout as we discussed and set interval for the mean
time, we are going to stick to the set timeout.
All right.
And after that, we also have what is called callback queue as we discussed before.
Right.
So callback queue contains all the callbacks that are waiting to be executed.
Remember that web API takes in callback functions so that callback will be put inside our callback queue.
And what about the event loop?
Right.
The event loop is like a looker.
Okay, so the event loop, this happens to implement non blocking code, right.
So always the event loop takes callbacks from the callback queue and put them into the code stack.
So always the event loop, always look inside the callback queue.
If there is a function to be called, then to put it inside a code queue to be rendered.
That is it about the cost tag, the web APIs and the callback queue.
So let's write some code and see how all this component happens to write async code.
So let's remove everything from this file and let's start from our clean sheet.
Remember, we are going to use the exact code console.log and then let's say go to park and set timeout
as simple function here.
But one cool thing about this too is that we can use yes.
Features like a real function.
So I'm going to use normal function creation.
This could work.
So let's say that we have a function.
A function.
As.
Go to.
Go to park.
And this function we're not taking anything but instead going to console.log console.log here as.
Go to.
Park.
So our copy this one three times a two times one and two.
And this one going to be go to.
Bank.
Go to bar.
As that.
So let's change this one to go to park.
Okay.
And then go to bank and then go to bar.
Perfect.
Now, when I call these functions, they are going to be executed in order.
So here we go.
Go to park over here.
Go to park.
As that.
And next one I'm going to be.
So let me copy this one and paste three times.
As that go to park.
That's why I'm going to be go to bank.
And then that's why I'm going to be go to bar.
Okay for this one.
If you run it, you see the order for that one.
I believe you know when to run in order.
Go to park first and then go to bank second and then go to park and go to bar third.
But let's try to call the go to bank after 5 seconds as we did so for this one, I want to put this
one inside set.
Timeout.
So set.
Time.
Out my function, then I'm going to pass in my callback function this time around or remove the function
call because I want this one to call it and I want to call this function, let's say after 5 seconds
as that.
Before we run this code, let's analyze it and see how it's going to be executed.
All right.
So we see that the first one will be called that is go to park.
Then it will check that this function has a callback or nor is it a web API function or no.
Then to put it on the code stack here.
And the second function is what first we see is what's a timeout?
And this function takes time to run.
So JavaScript says that please web API, I cannot wait until this function is ready, otherwise it will
block this function to code.
So I'm going to give you this function to you when it is ready.
Please put it back on the callback queue and then let event loop.
Give me that callback to run.
All right, so let's run this and see it visually.
I think I make some typing mistake here.
Supposed to be one K.
All right, so have a look.
When I click on Run, then let me pause.
So let's see what is going on here.
The first step is this is a function that's going to be called first because the first in the execution
to see that it quickly put it on the cost tag.
But it didn't put it inside a web API because this function call is not from web API or it has no callback.
Perfect.
So that's why we put it on the call stack at this port.
So this for registration now this go to park has been registered into the core stack now is yet to be
called so it locate the function key here is a function and now is going to register all the variables
inside the function.
Now it source what console.log with a function now is also put on the code stack as that now the function
is ready to be executed.
So when I click on when I click on resume and pause so this console.log has finished so it pop up from
the stack.
So now when I click on resume import, you see that now we don't have any function to be called.
Now the next function call is this part.
This is my set timeout and let's look at what is going to happen here before.
If we click on it, you can see that this function is from web API.
So it will put it inside Web API and it will wait out of 5 seconds, then put it here, then then loop
will look through and then give you to the cost stack.
So let's have a look when I click on resume pause.
Great to see that.
Now this function is ready to be called, but as soon as JavaScript sees that, this function will take
some time and also this function is also a set timeout.
So JavaScript will say that Please, I cannot wait 5 seconds before going to execute this.
So Web API, I'm going to give you this function for you.
Keep it.
When it's ready.
Give it to the course.
Talk.
Then when it's ready, the event loop will look here.
If there is no core function to be called here that the event loop, the event loop will put it onto
the core stack.
So let's see when I click on resume, now we see that something is happening here.
Now the go to bank has now been pulled inside my web API.
Now see, that is loading.
Have a look.
Resume now.
Waiting, loading, loading after 5 seconds.
Now you see that it has been put on to the callback queue.
So now the event loop here will look.
If there is no function here to be called, then the event loop will now put this one on to it.
So let's see how this function going to call.
Have a look when I resume.
Now go to bank.
A go to bar resume.
Nine say that it has put it on a course tag and now everything is yet to be run.
When I resume it now, let's also see what is going to happen now.
Go to park is going to run and let's see now everything pops up.
You see, I just click again.
That's why it's going over again.
So that's the flow.
Okay, let's see how nice.
Now have we go?
Let's go, let's go now.
Let's see.
It will finish up and then pop out from the coast.
That is it.
About the how is Cyncoed runs behind the scene?
All right, so this one in mind.
Let's continue from here.