 In the 10th part of this module we cover the asynchronous execution in JavaScript and again as you see at the warning sign in the bottom this is a topic that can lead to errors. It's often quite difficult to understand what is being done by JavaScript, why the output is as it is and not as you would like to. And JavaScript by itself you can read that often on the internet is single threaded. So this means there is a single execution model there's a single thread if you go into operating systems you will get more information on what that means but basically means JavaScript can only do one thing at a time. But this is not quite the story for example you have seen the timeout example before where some timeout is running in the background for a certain milliseconds and meanwhile something else happens. So clearly there is more than one thing happening at the same time and what actually happens is that there are several components in JavaScript. If we take this example here which is again one of those examples that is not very intuitive we have a function log that logs something as the name says. It has a callback as you have just learned so our callback function says simply log one and the delay is zero milliseconds. So basically this should wait for zero milliseconds it should not wait at all and then it should call our function cb which simply outputs one and we call the function down here so here we just define it and the intuition would be that because this is zero we should directly get a one and then we should get a two. The reality and of course I wouldn't show it if it would be the other way around the reality is that first we get two first we get and then we get one so the delay here does not seem to play a very big role and if I change it to a thousand milliseconds one second you see that it takes a bit but still two comes first one comes later but the order is the same no matter how many seconds I put into there and this has to do with the way JavaScript executes these things. So in this case two one and I'll explain to you why this is the case. JavaScript has a number of components and we'll take the same example here so we'll take the timeout function that logs one after zero milliseconds and then logs two. JavaScript has this so-called event loop and this is a number of things that are happening in the browser this is slightly different in the back end but the core thing of our JavaScript engine is the call stack so here we put all the things that are currently being executed and as long as they not finished they remain on the call stack so for example if we call a function we add that function call here and if then within that function another function is being called then it comes on top of that because our execution is not finished while the other thing is being added so that's the first thing here if we go through this code the function is being parsed and nothing is executed because this is just a function definition it starts here it starts as soon as we get to our log statement and what happens is that JavaScript adds it to the call stack so it says we have a function call let's add this here and this is called a frame again this is not as important why this is the case but this is a frame on our call stack now if we look at what log does we get into here the first statement is again a function call set timeout so again this is being added on top of the call stack log is still in execution so it's it's still here it's not removed and now we get to the interesting part there are a number of so-called browser web APIs so application programming interfaces that are run by the browser and whenever we reach a statement that is executed in one of these APIs it basically goes from the call stack to our browser API so in this case timeout is part of one of the browser APIs it is being moved over here and the browser web APIs they run in another execution so they are not single threaded as we discussed before but they can do things in parallel to our regular execution and in the example of the of the timeout the timer is running in parallel to the rest of our code being run um and now we said this timer is zero so it basically directly is finished before anything else happens uh and what happens then is that we get to the callback um and the browser web API does not just execute a callback but it basically puts this to the message queue so it says we're done here uh you should execute cb as soon as you have time uh so this is a message that goes back to javascript but right now it's not being executed so it's waiting here in our queue um and what happens then is the interesting part the message queue does not execute anything it waits until our call stack is empty so it does not do anything until the call stack is completely empty and in this case we still have log we are still here uh and the set timeout is now gone so we go to the next execution which is console.log and we add it to our call stack so now we get to console.log um and what happens now is simply that this is executed so it's executed and removed from our call stack and this means that in the console we see two so this is our first output uh then we are at the end of our log function so actually the log execution is finished which means the log statement the log frame disappears from our call stack okay uh and the only thing we left now is the message in our message queue and after each execution our event loop checks is the call stack empty uh now it is empty so now finally it takes the cb the callback and puts it into the call stack uh and the call stack then simply executes it so it goes into cb it adds console.log to our call stack it logs and we're done um so what happened now is basically that if we go back in time the execution of our callback of our log one waits until everything is finished so even though the timeout was zero here it does not do anything as long as we still have code to run and this explains that even though the callback is is zero the timeout is zero that two always comes first because the execution has to finish the call stack has to be empty until we get to our log one so this is a quick explanation of how this works to summarize whenever we have a command that is executed we place a frame on the call stack when we hit a frame that is uh that is being executed by a browser web api we move it to there so we basically direct it to the browser web api uh an example for those other timeouts we have seen other things which we'll cover in part 11 are ajax calls so asynchronous http requests once the browser web api is done it basically places a message or a callback in our message queue and the message queue then waits uh until the call stack is empty and this means after whenever something is executed here in the call stack the message the event loop checks is there still a frame in here and if it's not as soon as it's empty the message queue moves the content to the call stack and starts executing now this is a little bit complicated so if you haven't understood that there are two links in the literature reference that explain how all of this works there's also a video and a tool where you can put in code into a window and see how it executes in this event loop to get a bit more of a feeling for this in summary what we have now covered in the parts seven to ten are some of the more difficult things of javascript the things that are unintuitive and we have discussed the type conversion comparison of variables hoisting and scopes and then finally callbacks and the asynchronous execution in javascript so this helps you to understand most javascript libraries and what kind of input they expect for example the callbacks are fairly common but there are two parts left that we will cover in this context and we'll do the next