How for/while/do loops REALLY work in JavaScript and how they're all the same at a byte code level

hey welcome back and in this video we're going to continue on our series and deep diving into javascript at a bytecode level on the v8 engine and in this video we're going to focus in on loops and conditional statements so basically for loops while loops if statements etc and we're going to look at the various styles that you have in javascript and then how they translate and differ at a bytecode level and where we're going to get super interesting is we're going to use the good old fizz buzz programming exercises or sort of test code and we'll sort of compare how fizzbuzz compares between the various uh styles and how the underlying bytecode is generating and i think that's super interesting because i know a lot of people like a little bit of coding golf and sort of try and get the sort of most terse version of uh fizzbuzz in javascript well this is a slightly different angle to this and it allows you to go and have a look at you know how the fizz buzz that you create uh in your coding golf then translates down into an actual bike help make some of those decisions as well so i think it's gonna be a lot of fun [Music] if you don't know what fizzbuzz is it's a programming exercise that was popularized by jeff atwood back in 2007 and created by imran gory if you want details in the history of fizzbuzz then go check out my other video which has got all the history of and how it became popularized but fizzbuzz is a very simple game it's basically based on a kid's game or a drinking game where everybody sits in a circle and then you shout out numbers typically from 1 to 100 in a programming exercise so it's just like one two three four five six seven but the difference is instead of shouting out every number if the number is divisible by three you would shout out fizz if it's divisible by five you'll shout out buzz and if it's divisible by uh three and five then you'll shout out fizzbuzz so a good example would be one two fizz four buzz fizz seven a fizz buzz eleven fears thirteen fourteen fizz buzz i think i'm right probably need to check that in the edit so now that you know how the game is let's go and code up a base level right a very very simple example and then we'll start comparing the how the loop mechanisms all change as we try different styles alrighty so the first thing i'm going to do is just open up my terminal as you can see on my screen i have an empty folder just now so i am just going to open up vs code so we'll just do code dot and what you'll see at the moment is we have a very very empty uh folder so i'm just going to create a new file we will call this one let's say z fizz buzz.js okay so that's just a nice empty javascript file and then we'll create a function we'll call that fizzbuzz um we're not gonna pass in any values just now and then i'm gonna call my uh function here i'm not going to use uh es6 style syntax in this particular case i'm just going to use typical function declarations for the sake of simplicity before we start replacing fizz and buzz everywhere the first thing i'm going to do is just loop uh 1 to 100 so we're gonna use a while loop in this case we'll do for us and all that a little bit later on but we'll just do let n equals one and then i'm gonna while n is less than 101 because i want to loop uh a hundred times i want to get from one to one 100 so we'll just create a code block there i need to console log out what n is at that point so that will give me one two three four five and then i need to increment my while loop so there we go now i did say i wasn't going to use es6 syntax but you can see i'm clearly using the light statement and that's good practice so um i'm just making it easier because i don't want to make the code a little bit more difficult than it needs to be hence why i'm using function declaration so if i just save that so if i just come back to my terminal for a second and i type in node fizzbuzz.js you can see it comes back with 12100 so that is cool so i've got my while loop next thing i need to do is i want to start outputting fizz and then buzz so let's let's do the uh simple example first we will do a an if statement so we'll say if n is modulo 3. so what we mean by that is n divided by 3 if that has a remainder right that's what we're really looking for so if i divide something by 3 if that has a remainder then it's not a whole number therefore it's not divisible by three so if um n modulo 3 should come back with a remainder so let's say four modulo three would come back with one as an answer because it's basically got a remainder of one but something like three modulo three would come back with zero because uh there's no remainder so n modulo uh uh three uh and we'll do the triple equals here with zero um will will tell us that it's something that's divisible by three so if i get that in that sense then what i want to be able to do is just um console log out uh we'll say fizz in this case and then if we don't have anything else then we will just console log out the numbers so we we're starting to build up our case if i come back to my terminal run that again you now see all the fizzes are coming through so that's kind of cool so the next thing i want to be able to do is check for fives so let's put that in here so n number five and in this case what i'm going to do is console.log out buzz and then of course i'm just going to elsa i'm using the else if and it's really interesting in fizzbuzz you know we as coders we've dropped the else's and elsif's quite a bit and we just use if statements uh a lot and then because generally because we're using functions all the time we'll just kind of break the loop with a return but actually in the case of fizzbuzz then you know having that sort of if else if etc because i'm not doing any returns it's quite a nice structure and we'll see later on how we get rid of that but you know it's from a coding perspective it's just useful to remember it's a it's a construct we don't often use but it's just a nice reminder that it is useful in some scenarios okay so uh so if uh if it's uh sort of modular three then or divided by three then divisible by three then come back with fizz if it's dividable by five then come back with buzz so if i save that again and then we run this again you know see this buzzfeed blah blah blah blah now i haven't dealt with the uh the three and five scenario because at the moment i will just end up with a fizz in that particular case so what i need to do is just put in one more statement which is probably going to be at the top here and i'll just say if that is divided by three and it's dividable by five so we'll put an and statement there divided by five we'll put brackets around us and then we can put fizz bars so if it's both dividable by three and five it'll say fizz bars otherwise uh if i put an else here it will be fizz or buzz other than the number okay so if we just come back to my terminal a second we can just make sure it ran okay so i'm just going to clear all of this just to make it nice and simple and i'll get rid of all of this as well and if i just run uh node fizzbuzzjs and if we scroll up a little bit you should see it is now working so one two fizz for three four buzz for the five fizz for the six nine is fizz 10 is buzz uh 12 is fizz and then fizzbuzz for 15. so our uh little routine is working there so that's kind of cool we're in a good space just now and we've got a working uh piece of code so what we're going to do now is start looking at how this would work at a bytecode level and then how it differs between the various loop constructs that we have so we know that in javascript we have while we have do while we have four we have four and four of etc so let's let's let's start with the loops and then we'll look at what's going on with the code underneath that so the first thing i'm going to do is i i want to simplify this out a little bit so what i'm going to do here just now is i'm going to remove all of the code i'm going to leave the console log in place but i'm just going to toggle this lot here so we'll just toggle the comments and now all that's going to happen is it's just really going to go back to being an n and an n plus one all right so if i now clear this and then we just do a node fizzbuzz we're back to one to one hundred okay so what we're going to do now is we're going to have a look at the byte code that is generated by javascript now i've done a whole set of other videos so where we look at some of the byte code and what all these symbols mean within there uh feel free to check those videos out but the simple thing that you want to be able to understand is that as you can kind of see there there's a kind of no dash dash print byte code which means it's going to print out a byte code and then you've got this filter which is print by code filter and then you can put in your function name to filter on just so you can reduce all the other things that's returned in the bytecode and then of course you put in your uh your name of your javascript file which is fizzbuzz.js and then that will come back with the code so if i return that you can see it's generated one to one hundred and then if i scroll up to the top here so as you can kind of see from the code here this is the underlying byte code um i'm gonna go through this very quickly and then i'm gonna simplify it a little bit but there's a few things i kind of want you to point out is you can kind of see it sort of loading the number one and the number 101 and and really what it's sort of doing there is creating that range in the while loop so you can go from n one two to one hundred and one um you can kind of see it's doing a test uh there as well this this sort of all this junk here is calling the console.log so you see uh console and then you see log and then the increment at the end here is the m plus plus that we had so and then you've got this sort of final check of sort of jump loop where it's jumping to b1 if we look over here this is b1 so this this thing at the end is really our kind of loop back uh to the beginning of our kind of while loop so if you can see what's really going on i'm not going to go into too much detail you've got this idea of a loop you run from here the beginning of your code all the way down it does that console.log and then you get to the bottom of your loop and then you sort of jump back and then if we come back to that test less than then really it's doing a a quick check against register zero and then if you're not less than the number then what it's going to do is jump to 44ce which is down here so that's going to break you out of the loop so if we think about this from a bytecode perspective bytecode doesn't really know much about uh things like loops it's got a little bit of knowledge because javascript doesn't have things like go to statements um they don't exist in javascript as a language so the only way you can kind of do a go-to uh which is really what's going on in the loop there is is when it's associated with a loop so that's that's kind of why that jump loop exists in in that sense now if i come back into my code a second if i actually just remove this console.log for a second and then um we run that code again uh what you're going to see now is because i've removed the console.log then it's not going to have all that junk that's sort of doing the write out um but you see the the code that kind of exists is left as it was before so you've got this sort of uh load the number one load 101 you've got that check um to see if the a8 you know if you're over the 101 value and if you are then it sort of breaks out um and then you've got that jump loop at the bottom there so that's our while loop and you can kind of see a while loop is really just this looping mechanism with a sort of test condition if i wanted to i could get rid of this test condition the end lesson 101 and i could just do a while one which gives me an infinite loop and then if i go and generate the code again i'm going to be really quick and hit ctrl c so if i if i just uh run that and then kill it you can kind of if you look at the code there i've still got my one but you see that sort of test condition and that jump if false is disappeared in my latest version of the bytecode because i i don't need that anymore there's no test condition it's an infinite loop but of course i still have that jump loop there which represents the the bottom of my code base so you see jump loop and then it's going to 4491 and if you look at 4491 it's back to loading whatever's in the accumulator uh you know from uh registered zero and then it's doing that sort of incrementing as we go along so that that still exists and that represent loop so if you think about it from a bytecode perspective all while loops are is essentially this sort of jump loop that's really all it's doing and so it's a little bit of a kind of labeling and branching mechanism now if i it's rather than doing a while here if i switch that here if i move this while to down here and then i do a do yeah so that's the other type of loop that you have in javascript and then we just run that as well so again i'm going to do a ctrl c very very quickly and if you look at that it the code in a sense is identical right it is literally identical so load smi star zero identical and the reason it's identical is a while loop and a do while loop are the same thing right the only difference is the test condition in a do while is at the bottom of a loop whereas the test condition is at the top of a loop in a while loop so in this sense because i'm doing a while one then they're going to be exactly the same so if i were to bring this back to being n is being less than um let's say 101 like i had before and then i run this piece of code again so if i look at the bytecode generated now the thing that i want you to point out is if if you see the increment there which is my n plus plus the test condition test less than and then do a jump is actually after the increment right whereas when i did it as a while loop so if i move the while uh back up here you will see that that proceeds and we'll just run that again you'll see that that precedes the increment in this case so a do while and a while loop are exactly the same thing the only difference is where the test condition is so the test condition in a while loop is at the top and uh in a do while loop it is at the bottom of your code so that gives you a bit of an idea what's going on underneath now what happens if i turn this into a for loop so what i'm going to do here is i'm going to get rid of this and then i'm going to do a for loop in here now rather than doing my range of n lesson 101 what i'm going to do is i'm going to generate an infinite for loop as well and we i can do that by doing empty statement empty statement that's what semicolon means in a sense so i'm just generating an empty statement i'm going to save that and then i'm going to i'm going to run this code again and then i'm going to control c because it's going to go in an infinite loop um so i've killed that and again what i want you to see here is if you remember back to my infinite while loop there's no test conditions i'm just loading uh value one into into my uh into the accumulator and storing off on a register i've still got this jump loop so it's sort of jumping me back to 991 back to the top of the the code block uh and then it's doing the increment here so it's just sort of going round and round but there's no test conditions but the key thing i want you to see there is the for loop is identical to a while loop when it's an infinite loop it's absolutely identical so there's just no test condition now if i want to turn my for loop into something we would typically do so i'm going to get rid of this let at the top there i'm going to get rid of this n plus plus and now what i'm going to do is put my uh let n equals at one i'm going to say n is going to be less than 101 and then i'm going to say n plus plus so this is back to a typical for loop style thing um and then in this case i'm probably uh just going to save that and we will generate our byte code again so if i bring that up here what you start to see there is you can see uh i've got my a little small integer test less than jumping false and then my increment is occurring and then i'm doing my jump loop the the point that i'm sort of trying to get at here and in fact if i can make it a little bit easier by bringing the console log back in um and we just come back to the top but if i bring that console log back in all of that name property call property where it's calling the console.log nonsense is back that is occurring uh before the increment but the test is at the beginning therefore a for loop if you look at this is pretty much identical to a while loop and that is a key thing to understand so when you start to talk about fizz bosses testing should i use a while loop should i use a do while loop should i use a for loop well from a byte code level they're pretty much identical now there is some advantages of using a for loop which is is syntactically uh better they're the scoping slightly better so when i was in a while loop i had to declare my let above the for statement there so therefore i could access the let outside of my code block whereas if uh if i'm in a force statement here with a let n equals whatever when i try and access that uh that that um that variable n so if i if i bring that up there um i'm gonna get an error in this case because um n is not defined so there is some advantages of the scoping right um which is really happening at the parser level not in the bytecode level but um but as you can kind of see there from an actual bytecode from a loop perspective while loops do while loops and for loops are are sort of identical in this sense now if if i actually even come back a second right let's come back to a while loop for a second and we'll do a kind of while one so let's come back to that infinite loop there's another thing that that is supported in javascript as well which is this idea of labels and the ability to use breaking continues so if i come back into my code for a second one of the things i can i can actually do is i can give my while loop a label so i could call it something like my loop um and you can kind of see that is now got a label so that is that while loop here and if if i wanted to i could um i i could actually uh start to control and build a while loop myself using the breaking continuum mechanisms um if i wanted to so if i put in an if statement here and if i said if n is less than 101 then do an n plus plus and then if i did an else statement here i said break and then i i could put i could just break it to be honest but i'm gonna put a break my loop which is useful for nested loop scenarios what should happen here is if n is greater than uh 100 so basically if it's uh 101 then what you're going to see is it's going to jump over to here and then it's going to jump out of this console.log so if i just move my log here in that sense we are we're in a good position and then if i run my code again let's do this again so we will uh let me just check this that it also look and let's run that i need to define my n which i've not done obviously so let's just put my let n equals 1 let's run that again you see i'm i'm back to running from haha uh i'm actually running from 2 to 101 in that sense because i'm doing that sort of m plus blood so so the final thing i need to do um to run my code is i just want to move this console.log i'm going to put it over here just so that we can see it works i need to just put some braces around this uh as well so we'll just put that there let's empty this out and just tidy that up a bit if i now run my code there for a second you see it's back to running from um uh one two to one hundred which is what we wanted um i'm gonna remove the console.log for a second and then what we're gonna do is look at the code so if i run that for a second you can kind of see that the code is pretty much the same at this point test less than jump if false load into the accumulator i've got a couple of extra jumps there and the reason i've got a couple of extra jumps is because i'm in control of my branches so i'm doing if else etc so i'm i'm sort of the one manually doing the brakes here and and then i'm sort of pushing back up to my loop whereas the while loop just optimizes that a little bit when you're writing the code but because i'm doing this while one but it's pretty much the same thing i can control all my branching through that labeling mechanism so as far as the bytecode is concerned it doesn't know anything about for loops it doesn't know anything about while loops and it certainly doesn't know anything about do while loops right it's it's just doing loops and labels and branches that's really all that's happening so when when you're starting to think about these fizzbuzz challenges should i use a for loop should i use a while loop should i the bytecode doesn't care okay it really doesn't care so just just sort of keep that in mind so finally before we sort of look at the felsif and the conditional statements i think we've got a good handle of the loops just now but i haven't covered the sort of foreign's and four of uh statements and and the reason i haven't covered them in these cases is it it doesn't make a lot of sense in javascript to do this so four ends and four offs allow you to essentially loop over a raise allows you to look loop over objects etc i'm sure we can cover that at another time but all i'm doing in this case for a fizz buzz is just doing simple loops now other languages so rust is a good example allows you to generate ranges um javascript doesn't have that native capability where you can generate ranges of values if i if i wanted to i kind of could do something with the foreign and and sort of generate a range manually but you you're gonna see because ranges aren't supported natively by javascript it's gonna generate some pretty bad code so what i'm gonna do now quickly is just demonstrate that so i'm just gonna do a four in so if i just do a uh for uh n in and then you can see i'll just what i'm going to do is create an array of uh up to 99 i'm just going to set the index value to whatever the key is and use the spread operator to fill that in let's just do a console.log of n and then we'll save that out and if i save that so as you can see if i just run that very quickly um you can see it's running from 0 to 98 so i could do a little bit of math there to sort of make that one to 99 i'm not going to do that for a second but if i more importantly if i look at the byte code that's generated it's a lot right it's a lot which you would expect right i'm not going to go into detail of what's going on but you start to see all of these kind of foreign foreign next you know i'm creating arrays for maneuverables etcetera so it's creating very complicated code there so there's no reason from a any sort of sense in this particular use case because it's a simple loop to uh to generate an array just so i can go for a range you can do that in other languages but it makes no sense in javascript because if you look at it by coding you're making it more complicated and it's harder and you're giving it more work to do so just using a simple loop is probably the best way forward so i think at the end of this bit before we move into the kind of the for loops i think the into the conditionals i think the thing to to realize is that from a simplicity perspective because my code whether it's a while do while for loop etc is the same i may as well just use a for loop right have the most simple mechanism to the loop from one to 100 it's going to generate the same bytecode no matter what i do so that's a kind of good stylistic stuff alrighty so now we've covered loops fairly in depth and you understand what's going on beneath the hood and bytecode level let's simplify our code and then just bring ourselves back into just having a for loop because i think that we've decided that's the sort of simplest case that we can have so i'm just going to type in there for let n equals 1 n is less than 101 and n plus plus and there we go we now have a kind of simple loop and then i can just take my code that i had before we'll get rid of all of this and then we'll bring ourselves back into being a nice simple kind of fizz buzz uh scenario so we'll just untoggle this and then i'm just going to console logout n as we did before save that and then we will just clear this and we'll run node fizzbuzz.js and we're back to running with a working fizz buzz so as you can kind of see there for a second and we're going to start covering the if statements now um what i want to sort of look at is this sort of if else combination right so i'm doing an if this else else uh else um let's have a look at this what's going on underneath the hood from a um javascript perspective for bytecode so to do that i think the first thing i'm going to do is i'm going to get rid of the for loop again i know we've just sort of recreated that and we're going to focus on the if statements for a second and then understand that and then we'll build ourselves back up so uh i'm gonna get rid of all of the elsif's in this sense and we're just gonna bring ourselves back to having uh a nice simple if statement now at the moment i don't really wanna worry about uh the the the ampersands and the modulus for a second so i think we will just do uh look for fizz at the moment so we'll all we're gonna do is f uh n3 triple equals zero console.log physical bus so if i come back into my code for a second let's do uh node fizzbuzz.js for a second again there and it's not defined and that's because i got rid of my uh my code so i'll just put my for loops i'll put let n equals one let's do node and then we will bring up the byte code so if we look at the byte code underneath that there's a few things i want you to kind of start to look at here so i'm loading my value one that we did there so the next thing you're seeing this mod smi so that is this here so this n divided by uh three so or a modulo in this case is is sort of done here against the uh the accumulator so mod smi uh by three so so that's my kind of key thing there if i was gonna do uh a five in that case um let's let's sort of do this again you should see that three will now become a5 which is kind of cool so that's that's sort of nice the next thing is once it's done the module it's going to get the results so the result from doing that calculation it's going to be stored in the accumulator and then that will be stored in register one and then what it's going to do here is do a test equals strict on r1 on register one and it's going to basically see if it's equal to zero so it's testing if r1 is equal to the zero in the accumulator and then and then finally we're going to do a jumper false here so that's kind of what's going on with that if statement there it is pretty sort of simple stuff um i think one of the things you could probably understand is an optimization i put this to fizzbuzz at the moment but if i were to kind of put this statements in here if i brought this back to being n3n5 like we've got over here let's let's do that for a second and then open up the the byte code you're gonna start to see that that gets quite complicated quite quickly mod smi more smi so i think if i was being truly efficient in my fizzbuzz scenario rather than doing an uh modulo 3 than a modular 5 i think a more efficient thing to do in this case would be to do a modulo uh 15 in that case and therefore because you know if it's divisible by three and it's the visible by five as well it's going to be divisible by 15. so if i if i run that again and you can now see the modulo 15 so i've brought that down to one operation in the bytecode so that you know that is an optimization you can make if you if you were playing kind of code golf with that i would argue what why would you bother i think the speed of computing these days etc i just don't think it's going to make much of a difference and these are not the things to be focusing on in your code but i i really just what i'm trying to do is show you the effects in your bytecode but there we go now the other thing that's probably relevant there is you see this you see this sort of test equal it's the same sort of branching mechanisms that we saw in for loops and while loops and then the jump if false but you see it's using a test equal strict there so and that's because i'm using the uh triple uh equal symbol if i switch that to a double equals right which i can do because i'm just dealing with numbers i'm not dealing with objects etc um then if i just do that for a second run that again you see rather than doing a test equals strict i'm not just doing a test equal so you can kind of see what's going on underneath that that what we're what we're doing here is we're using a slightly different op code from uh depending on whether we use a triple equals or a double equals so it's just something to kind of be aware of so there we go we've got my fizz bars um and that sort of leads us into the next bit all the else's etc i kind of i kind of like having the else's in there you can do a fizzbuzz where you where it's a little bit less complicated um but i but i think the elsif's are are kind of good in the sense so if i were to just um let's uh toggle all of these lines for a second and then we open that back up there and then we bring our fizzbuzz back um we have a look at this all you're going to see there is you've just got a sort of repetition of code it's calling console.log.com.console.log but all we're sort of doing is this sort of combination of test equal and then doing a jump right and if you look at the jump code uh that's to 56 c which is uh down here where it's calling the code so all of this is these are just code blocks in your uh bytecode so you're gonna have basically four code blocks one for fizzbuzz one for fizz one for buzz and one for console.log and then all that you've got for each one of these code blocks is you're going to have a test yeah it's a test test test and and then if the conditions meet then it's going to do a jump and you can kind of see that sort of uh consistently across the board which is test equal uh test equal um sure there's another one um kicking around there test equal and then jump jump jump so we're in this sort of constant that's that's how the mechanism works it's it's just jumps and and test equals in that sense so that's that's kind of how it looks i think you've got a fair understanding of how the if statements and the l statements work in that sense and and that's kind of cool so as you can kind of see there there is a little bit of an inefficiency that is going on in my code and and that inefficiency is basically because i'm calling console.log like four times and i'm doing a check if time so one of the things that a lot of people do when they're when they're doing a fizz buzz is they use what's called the ternary operator so we're gonna do the same we'll we'll do an f else as a ternary we'll have a look at that and then we'll try and kind of compute out what's going on so i'm gonna i'm just gonna sort of uh toggle these out for a second and what we're gonna do is start to build up that sort of uh ternary operation so if you haven't seen the ternary operator before it's it's like an if statement it's basically got an if and else part but it's in a much more compact form so what we're gonna do now is we're gonna use that ternary operator and then see how we can make our code a little bit more efficient so the first thing i'm going to do is i'm going to bring my for loop back because i really want it back i'm going to get rid of this let statement for just now so we'll just comment that out because i'm probably going to need that later and then what i'm going to do is just check for fizz so i'm going to do a console.log because i want to output my result and i'm going to do my modulo 3 as i did before so we'll just do n modulo 3 and if that is equal to zero then what i want to do is return fizz and if it's not got anything coming back you know so if it's if it's not divisible by three at the moment we'll worry about fizzbuzz and all that a little bit later i just want to return n for just now so we'll do that and then what we should do is if we run the code so if we run the code then we'll we should see is we've got fizz all the way down there so that's pretty cool so far now what i can do is get a little bit cleverer in this sense in the same way as i did the n divided by or modulo 3 coming back with fizz i can do the same but with buzz so if i do n module n modulo 5 equals 0 and then we'll just make that equal to buzz and that's going to be pretty cool as well so that's going to add add that together now what i don't want to happen is in this particular case i don't want the the end to be returned because if the n is returned then it's going to mess up my numbers so what i'm gonna do is have an empty string uh in this case and that's pretty cool because if i've got an empty string there if you see there that's fizz and then i'm gonna add over here to whatever buzzes so if if it's three it's gonna come back with fizz if it's nothing it's gonna be an empty string if uh if it's module five then it's gonna come back with buzz and therefore i'm gonna want an empty string there as well so i'm just gonna do that and that also gives me fizz buzz and we'll cover the last bit in a second so if i run that code again you can kind of see i've got fizz buzz fizz buzz and i've got my fizz buzzes there but i don't have my numbers but what i do have at the moment is empty strings so if i just take all of this put another bracket around this and then i'm just going to add um an empty string again and then what you will see yeah then what i'm going to do is i'm going to put an r statement on that so we'll just do that and then i'm going to put n there and what that's basically meaning is that if i've got an empty string if there's no value in this case um if i've got a value then show fizz or fizzbuzz or whatever but if i've got no value then show my number n so if and now if i run this and run node fizzbuzz you see i'm back to running the way i was right i've got fizzbuzz for uh i've got fizz for nine buzz for ten so it's all sort of back in a good space there's a little bit more terrace and it's it's uh you know you know and i've got rid of all of these different console logs and i've brought it down to one i'm not having to check multiple times i've just got sort of a check on three and i've got a check on five so how does the um ternary operator look like in uh bytecode well we can let's just clear this for a second and we can have a look at uh what that looks like with our bytecode so if i just run that for a second and then come back up to the top here we can see what the bytecode looks like and as you can see it's still quite large but it's not massive right um i've still got all my console.log nonsense that i that i had before called property blah blah blah but actually i'm i've got my mod smi so here's my my modulo on the three here's my modulo on the five and and you can see the ternary operator in this case is it's just doing a check on boolean so you've got this sort of jump it falls jumps etc so even though you're using a different syntax in the byte code it's just translating back down into jumps as we did before so jump it falls jumps blah blah blah so it's it's fairly efficient um it's a little bit of sort of syntactic sugar in this sense um so it's pretty cool and and it's generating new and efficient set of bytecode so that's kind of where we are on on this case so i think that's a good optimization um to make so we can get rid of all of this nonsense over here and we've got ourselves down into some pretty uh neat code that generates sufficient byte code but also is pretty much uh small in size now one of the things a lot of people then do is they try and get it down to the the smallest size possible so i'm i'm gonna sort of get rid of this uh lot here for a second and then you can start to play games if you're into sort of coding golf where you sort of try and bring it into one line of code as as i've done here um and then you're kind of good to go so if i if i save that and if we just look at the size of the file here you can kind of see that this is sort of 85 bytes which which isn't bad now if you were going to be absolutely insane about this you could bring it down even further um i think the the the smallest i've got it down to is about 62 bytes or something like that which was quite painful to do but of course if you if you want to indulge the madness you can so best i've managed to do and i've just sort of copied it in my screen and actually i got as far as 66 bytes and then i saw somebody else use an interesting technique so i've i've copied that in in this case um it's a little bit of a crazy technique if you really want to do this but i again you know please sort of try and avoid doing this if you can but but the basic technique in this sense is that what you've got here is you're getting rid of the uh the the extra kind of the the n plus plus and then what you're doing here is within your statement is doing a plus plus n is less than 101. so you're doing your increment over here um which is the interesting technique and then what you're now doing is moving your your console log into where normally you would do the iteration where you're doing the m plus plus because this is just a statement which is allowing execution and then what if you look at the the body that you've got here you're doing your n modulo 3 and and if that is equal to fizz that's coming back as a uh empty statement there and then because that's been stored in f then you're using this sort of ternary operator to then do the n modulo 5 check against the f so you're seeing if that's uh if that's been uh you know it's got a fizz in there or not then you're doing your statement against there and then that allows you to put the buzz in so it's using a sort of really horrible horrible techniques of things that are supported in the for loop but and you can kind of see that so if you look here for a second you'll see that that brings it down to 62 bytes again if i were to run this for a second you see it works you it's generating fizz buzz where it should so we were to look at some of the underlying byte code of this and i'll just bring this up for a second you see fizzbuzz where it says as it did before um you're not really gaining anything it's it's kind of equivalent to what you've got but it's it's some fairly nasty stuff you've got some jumpers etc a bunch of stuff moves around you know you've got the loops there so the is the byte code any more efficient than it was before not really no so i i don't really see what you're gaining there but again you can mess around and you can have fun with it um that's not really the point of this video anyway the point of this video is not for you to sort of sit and optimize your code and play code golf the point of this video is for you to really understand the uh if statements and the for loops and ternary operators and how four and wires and all that compile um but i hope you get the idea that that when you're playing something like coding cutters or coding golf etcetera it's a lot of fun to do these optimizations but the most important thing that you can do is write code that is completely readable because if if you come back to the the code that we generated uh before um if i look at the the line that i had this this kind of this for loop is completely unreadable how do you expect somebody to understand the nuances of what's going on there where is a very simple for loop with a bunch of fl statements really easy to read and understand you're not gaining anything by trying to save file size um you're not gaining anything by trying to get all of those little tiny optimizations from the bytecode as as we saw they're roughly the same so the best thing that you can do is write vaguely efficient code right in a nice style where people can understand your code where it's very readable and not focus on like the nth degree of performance optimizations because you may have cut down the file size that's for sure but you may end up messing up the bytecode underneath so write good code right clean code that's understandable and focus on that have fun with coding counters have fun with coding golf but but don't obsess with it and people that turn around and say hey this is better for this reason or this is better for that reason you know it probably isn't when you get down to a bicode level so just kind of be aware of that anyway i hope you've enjoyed this video i hope you managed to get it sort of deeper understanding of what's happening under the hood with if statements and branching and uh and for loops and while loops etc and that's giving you that sort of deeper level of what's going on and anyway we'll speak soon thanks very much [Music] you

Channel: Chris Hay

Views: 131

Keywords: chris hay, chrishayuk, javascript, node.js, advanced js, byte code, javascript v8 engine, computer science, assembly, advanced javascript tutorial, for loop, for loops javascript, for loop while loop do while loop, for loop explanation, for loops explained, javascript mastery, javascript interview questions and answers, v8 javascript engine tutorial, computer science course, javascript v8 engine explained

Id: wh79DrpypNc

Length: 45min 52sec (2752 seconds)

Published: Wed Oct 20 2021