How the JavaScript engine works!! Source to byte code JS V8 engine explained | Advanced JavaScript

hey welcome back and in this video we're going to strip things back a little bit we're going to take this super deep dive into javascript so we're going to look at how the code that you write in javascript turns into executable machine code that either runs on your browser or in node.js in the backend and in particular we're going to focus on the v8 engine that powers both node.js and of course google chrome or any other sort of chromium-based browser engine whether it's chrome itself or whether it's brave or whether it's edge now of course although we're going to look at the va engine specifics what we're looking at will also apply to firefox or any other javascript based engine so why are we going to do this well the first thing is i don't believe in magic right so i mean i love harry potter and stuff but you know i don't like this idea that i'm gonna write some code and then magic stuff happens and i have no idea what's happening if i want to be a great developer and i want to write amazing code then i need to understand how the code that i've written turns into whatever is going to be executed on the machine side and that's what we're going to focus in on today and to be honest it's going to be a lot of fun we are going to understand some really key computing concepts whether it's things like accumulators or register machines it's going to be a lot of fun and let's get started alrighty so the first thing we're going to do is create a super simple javascript function and then we will see how that is executed throughout the v8 engine all right so let's uh head across to my machine the first thing i'm going to do is bring up vs code for a second let's just expand out my screen and we'll add a new file and i think we will call this example.js nice and simple so what we're going to do is create ourselves a super simple function and all it's going to do is return the number 5. so we'll call this function return 5. um we're not going to accept any parameters in for just now so i'm going to create some brackets and literally all i'm going to do is return the number 5 from the function that is it and then all we will do is log it out to the console so we'll call return 5. and then just to make sure it works okay we'll run across to my terminal you see i've got example.js i'm going to run this in node.js rather than browser but the same applies in browser and the reason i'm running it in node.js is it's we're going to have a look at some of the bytecode that's generated etc so it's going to be a little bit easier to do that with node.js rather than mucking around with the browser all right so to execute that i'm just going to type node example.js and of course it returns to number five so that's now working already so let's switch across to my ipad for a second and we'll draw out the workflow that your source code is going to follow through to turn into machine code and be executing on your machine so the first thing that we have here is a box that represents my source code so this in this case it would be example dot js and the first thing that needs to happen is the va engine needs to parse that source code so there's going to be a little parsing routine we'll have a parser in the middle here so it's called parser and then what that's going to output is a thing called an abstract syntax tree so we are not going to focus that in this video um i just want you to be aware that what happens is it generates this thing called an ast and think of it like a tree right so it's got lots of different nodes on that and then it gives you a basic idea of what the execution flow is through your application i said we're not going to focus on that just now so once that abstract syntax tree is created that is going to be fed into an interpreter and what the interpreter is going to do is take all of that abstract syntax tree that's been produced and then it's going to essentially turn it into a set of virtual bytecode right so it's a sort of virtualized machine code so think of it like a kind of virtual machine and then and in particular the v8 engine is called ignition um so we'll just write that there ignition and that is actually what we're going to focus in on today so is we're going to focus in on the ignition engine and we're going to and the type of engine that it is is it's essentially what is known as our registering machine and we'll explain that in a little bit later but once that's created it's got this sort of virtual byte code that is abstracted away from any particular machine implementation and then it will run through a couple of optimizers again we're not going to sort of focus on them today um but that machine code will get optimized a little bit so things like uh for caching or any any sort of speed ups that it can think of and then eventually that's going to run through [Music] a compiler and then that compiler is going to turn that into the machine specific code so if you've got an intel machine for example it's going to create an instruction set that's suitable and optimized for the intel machine if you've got something like an arm machine or you've got on mac uh apple silicon m1 for example will generate an instruction set it is optimized for that so it's going to create machine specific instructions so that sort of piece in the middle here this uh interpreter has got this sort of machine abstracted code which will eventually get turned into something specific for a machine so that's the area we're going to focus in on and by understanding the virtual code and understanding this register machine then i think that's going to help us become better javascript developers because we will understand what's going on in the hood so if we want we can actually look at the bytecode that's produced by the va engine via the magic of node.js and how we would do that is we just type in node as we do normally and then we would add in the flag dash dash print dash byte code and then we would just enter the name over file so in this case it was example.js that we created and we'll just run that and you can see it's it's it's created a lot of goop there and it's really hard to read but actually there is a kind of filtering option that we have so if i just uh come over here and then if i just add in another filter so uh dash dash print dash byte code but this time i add filter filter and then i set the filter equal to the name of my function so i will call this return five and then if we run that again then what's going to happen is it's only going to return the bytecode for the function that you specified so we take a look at my screen we'll see what it's outputting there so the first thing to kind of notice is it's got the name of my function which is returned five and you know there's a pointer to that uh it's got a count of parameters we'll go into that later on uh it's got a count of registers we'll go into that a little bit later on as well and then you can see a couple of instructions there so you see this thing that says lda smi5 and then you see this thing that says return so that lda smi 5 and that return is actually the byte code and we're going to just dig into a little bit and understand what that actually means so if we just return to vs code for a second and if we remember the function you can see that the function all is doing is doing this sort of return five that is literally that is all that is occurring in this function so if i come back to the bytecode for a second i can sort of get my return it's doing a return there that's kind of cool you can guess what's happening that's returning out the function but what's this lda smi5 well it's you could probably guess that the load to ld stands for load which it probably is so load and then you can see the number five so what's this smi well in that case it's small integer so it's sort of saying load me a small integer of the number five and then what it's what this a stands for is accumulator so if i bring all of that together what it's saying is load into the accumulator in the basically the number five and of course this piece of uh assembly is a sort of human readable form and if i move across the left a little bit here you'll see this zero c05 so it's a little bit of hex and zero c is essentially the instruction code so that relates to this uh lda this loaded to accumulator and a05 is the number that i put in so if i was to come back to my code for a second of vs code and then rather than returning the number five if i put in the number seven um and then i just run that piece of code again you would see that that lda smi uh now becomes seven and you know i've still got oc it's the same instruction code and hex that i had before but now it's uh the number seven has been pushed through as well and it's a hexadecimal so again i'm not going to go into the details of hexadecimal for a second but you could imagine that if i change that number to be the number 10 and then run it again i would expect to see a because a represents 10 in hexadecimal so let's just run that and you would see that so 0c which is a load and then 0a which is the number 10 and a is of course hexadecimal for 10 and then eventually it's going to do a return so when i break it down there that that instruction code is is is pretty simple but of course it opens up this question of what is an accumulator and we're going to deep dive into what an accumulator is in the next part of our video series which will be appearing in the top right hand corner of your screen speak in the next video

Channel: Chris Hay

Views: 2,202

Keywords: Javascript tutorial, nodejs, node js, node.js, ignition, assembly, vm, byte code, chromium, chrome, v8, js interpreter, v8 engine explained, chris hay, learn javascript, how javascript engine works, js engine, js engine v8, chrishayuk, javascript engine, v8 engine, javascript engine how it works, javascript tutorial advanced, advanced javascript

Id: LLxNAw4CVTs

Length: 10min 0sec (600 seconds)

Published: Mon May 31 2021