so I talked about the JavaScript engine in the last lecture but what is that engine actually and what is a JavaScript runtime also how is Javascript code translated to machine code so that's just some of the topics that we talked about in the last video and so now let's find out how they work in this lecture so a JavaScript engine is simply a computer program that executes JavaScript code there are a lot of steps involved in doing that but essentially executing JavaScript code is what an engine does now every browser has its own JavaScript engine but probably the most well-known engine is Google's V8 the V8 engine Powers Google Chrome but also node.js which is that JavaScript runtime that we talked about in the beginning of the course so the one that we can use to build server-side applications with JavaScript so outside of any browser and of course all the other browsers have their own JavaScript engines which you can look up online if you're interested anyway it's quite easy to understand what an engine is but what's most important is to actually understand its components and how it works so any JavaScript engine always contains a call stack and a heap the call stack is where our code is actually executed using something called execution contexts then the Heap is an unstructured memory pool which stores all the objects that our application needs all right so with this look at the engine we have answered where our code is executed but now the question is how the code is compiled to machine code so that it actually can be executed afterwards well let's find out but first we need to make a quick computer science side note here and talk about the difference between compilation and interpretation so in the last lecture we learned that the computers processor only understands zeros and ones and that therefore every single computer program ultimately needs to be converted into this machine code and this can happen using compilation or interpretation so in compilation the entire source code is converted into machine code at once and this machine code is then written into a portable file that can be executed on any computer so we have two different steps here first the machine code is built and then it is executed in the CPU so in the processor and the execution can happen way after the compilation of course for example any application that you're using on your computer right now has been compiled before and you are now executing it way after its compilation now on the other hand in interpretation there is an interpreter which runs through the source code and executes it line by line so here we do not have the same two steps as before instead the code is read and executed all at the same time of course the source code still needs to be converted into machine code but it simply happens right before it's executed and not ahead of time now JavaScript used to be a purely interpreted language but the problem with interpreted languages is that they are much much slower than compiled languages this used to be okay for JavaScript but now with modern JavaScript and fully flat web applications that we built and used today low performance is no longer acceptable just imagine you were using Google Maps in your browser and you were dragging the map and each time you dragged it would take one second for it to move that would be completely unacceptable alright now many people still think that JavaScript is an interpreted language but that's not really true anymore so instead of simple interpretation modern JavaScript engine now use a mix between compilation and interpretation which is called Just in Time compilation this approach basically compiles the entire code into machine code at once and then executes it right away so we still have the two steps of regular ahead of time compilation but there is no portable file to execute and the execution happens immediately after a compilation and this is perfect for JavaScript as it's really a lot faster than just executing code line by line now I skimmed over some details here but this is really all you need to know anyway let's Now understand how this works in the particular case of JavaScript so as a piece of JavaScript code enters the engine the first step is to parse the code which essentially means to read the code during the parsing process the code is parsed into a data structure called the abstract syntax tree or AST this works by first splitting up each line of code into pieces that are meaningful to the language like the const or function keywords and then saving all these pieces into the tree in a structured way this step also checks if there are any syntax errors and the resulting tree will later be used to generate the machine code now let's say we have a very simple program all it does is to declare a variable like this and this is what the ASD for just this one line of code looks like so we have a variable declaration which should be a constant with the name X and the value of 23. and besides that there is a lot of other stuff here as you can see so just imagine what it would look like for a large real application and of course you don't need to know what an AST looks like this is just for curiosity okay now sometimes I get asked if this tree has anything to do with the Dom tree and the answer is a very clear no so this tree has absolutely nothing to do with the Dom it is not related in any way it's just a representation of our entire code inside the engine anyway the next step is compilation which takes the generated AST and compiles it into machine code just as we learned in the previous slide this machine code then gets executed right away because remember modern JavaScript engine use just in time compilation and remember execution happens in the JavaScript engines call stack but we will dig deeper into this in the next lecture all right so far so good we have our code running so we can finish here right well not so fast because modern JavaScript engines actually have some pretty clever optimization strategies what they do is to create a very unoptimized version of machine code in the beginning just so that it can start executing as fast as possible then in the background this code is being optimized and recompiled during the already running program execution and this can be done multiple times and after each optimization the unoptimized code is simply swept for the new more optimized code without ever stopping execution of course and this process is what makes modern engines such as V8 so fast and all this parsing compilation and optimization happens in some special threads inside the engine that we cannot access from our code so completely separate from the main thread that is basically running in the call stack executing our own code now different engines implement this in slightly different ways but in a nutshell this is what modern just in time compilation looks like for JavaScript and the next time someone tells you JavaScript is an interpreted language you just showed him this slide so that they can learn how it really works alright so we looked at the JavaScript engine and how it works behind the scenes in quite some detail now to round off this lecture let's also take a look at what a JavaScript runtime is and in particular the most common one which is the browser and by doing this we can get the bigger picture of how all the pieces fit together when we use JavaScript and so this is a really important slide so we can imagine a JavaScript runtime as a big box or a big container which includes all the things that we need in order to use JavaScript in this case in the browser in the heart of any JavaScript runtime is always a JavaScript engine so exactly the one we've been talking about that's why it makes sense to talk about engines and runtimes together without an engine there is no run time and there is no JavaScript at all however the engine alone is not enough in order to work properly we also need access to the web apis and we talked about web apis before remember so that's everything related to the Dom or timers or even the console.log that we use all the time so essentially web apis are functionalities provided to the engine but which are actually not part of the JavaScript language itself JavaScript simply gets access to these apis through the global window object but it still makes sense that the web apis are also part of the runtime because again a runtime is just like a box that contains all the JavaScript related stuff that we need next a typical JavaScript runtime also includes a so-called callback queue this is a data structure that contains all the Callback functions that are ready to be executed for example we attach event handler functions to Dom elements like a button to react to certain events right and these event handler functions are also called callback functions okay so as the event happens for example a click the Callback function will be called and here is how that actually works behind the scenes so the first thing that actually happens after the event is that the Callback function is put into the Callback queue then when the call stack is empty the Callback function is passed to the stack so that it can be executed and this happens by something called the event Loop so basically the event Loop takes callback functions from the Callback queue and puts them in the call stack so that they can be executed and remember how I said in the last lecture that the event Loop is how javascript's non-blocking concurrency model is implemented well here is an overview of how that works now we will go over why this makes JavaScript non-blocking in a special lecture about the event Loop later in the course because this is really a fundamental piece of JavaScript development that every developer needs to understand deeply all right so as I already said the focus in this course is on JavaScript in the browser and that's why we analyzed the browser JavaScript runtime however it's also important to remember that JavaScript can exist outside of browsers for example in node.js and so here is what the node.js JavaScript runtime looks like it's pretty similar but since we don't have a browser of course we can't have the web apis because it's the browser who provides these instead we have multiple C plus bindings and a so-called thread pool now details don't matter here at all I just want you to know that different JavaScript runtimes do exist all right cool that's all I had to tell you about JavaScript engines and runtimes in the next lecture we will learn how JavaScript is executed in the call stack