 So I just want to have a count of how many videos we started with so So last time we spoke about code on hdb203 we looked at tree shaking Pipeline operator the bind operator like really future-facing stuff But I thought this time we'll go and look at something that has been there Forever or for a long time and how a feature has developed over time this Now for loop well done. You're still good at quizzes One point for me. So I wanted to talk about how for loops actually work under the hood Right. You say actually as if there was like a big twist to the story. Wow Here's how it goes So this bit runs, right? Mm-hmm. Yeah, so it's like like for the pet like three instructions like the in the initializer the condition and the Increment or whatever the yeah, they're just expressions So this one runs and this one runs and then the body runs and then this one runs and Then this one runs and then the body runs and then this one runs and this one runs and the body runs and this one runs and it only stops if this bit Evaluates to like something falsely. Mm-hmm. And that is how for loops work but It has gotten more complicated in the past. I was about to say I haven't learned anything I mean that was all correct. It is just that like for loops were really really simple I mean they have been in the oldest programming language exactly this format with this these three statements that get evaluated in that Specific order over and over. Let's have a look at this What is going to be logged in in this piece of code what we have in here, which is kind of hidden as a closure, right? So yes, yes Closure to set time and saying execute this closure in some amount of time this apparently zero milliseconds I think it would default to zero with a browser will add a padding to it Yeah, or 15 in the browser's allowed to do whatever. So the key is that this is going to happen Asynchronously after the folder who's closed over the I variable which in this case is a primitive value Mm-hmm and therefore the value will be captured. So this would mean that We will see Three logs zero one and two Not quite There is only one I in this story Interesting and that's going to be scoped to the parent function or the global scope if there's no parent function. Oh, right. Yeah So when we increment it It incremented it will be when the closure is being executed. So that's actually when it looks up the value exactly I see so we're gonna get console log of two twice three times twice We we We're professional developers. I had to stare at that as well as I ran this code earlier. Maybe I don't know It's okay, you've got time to regain it there we go But Dun-dun-dun Okay Things have changed so intuitively I would Think and hope that wouldn't change anything But I'm guessing you set this up in a way that it actually does Things have changed. I mean, yeah, I think you hinted at it because you said that previously the eye was Declared as a var meaning it is being declared within the function scope Which if there's nothing else out of this this would be the global scope. Yes So like let's take a look at this So so what we have here is like an if true so this block is always going to run Mm-hmm, and we're declaring in there like we've got a var a const and a let's Mm-hmm logging them all out the var is is scoped to the parent function or the global scope Whereas const and let's are I think the term is lexically scoped to the block to the block Right. So what happens here with these console logs? This first one works. It will log one Yeah, but what we hit here with this console log in a const and in a let's is that's gonna throw Yeah, because it has no access to those they are scoped within there and like you say this and it's all blocks and Some I love the focus doesn't seem to know this, but yeah, you can just have a bare block like that I actually find that really useful. It can be I have users since constant that I have used that every now and then to just Declares this variables just needed for these through in three instructions. Yes, especially if you've got like a Global if you're doing some inline script in a script tag, I just wrap it in these to make sure Something just for a specific number of lines exactly that. Yes. That's what I've used it for so Back to this example. So you're saying same as var So now that we have caught up on that the question now is The let is technically like I want to say geographically the lettuce outside of the block Yeah, but is it though but is it though? It is a fourth statement. So I Actually my my intuition would still be it should work the same But I would also understand if it didn't but I don't know what the answer is the Eggman script spec Actually special cases this okay this situation So I agree with you like geographically this this let statement looks like it's outside the block of before but it does Magic tricks and this is where like for loops are just like hold this this thing That was really simple before is now actually really complicated. So what you'll actually get here is a console log of zero and one Interesting it creates a lexical scope Okay, each iteration So bait it's literally a new eye. It's not just the same variable assigned a new value. It's a new Variable it is yes, it is a new variable Wow, and there's a lot of trickery in here And this this exposes some interesting behaviors I'd never really thought about the four about how for loop suspect and one of them is like so this plus plus at the end the Incrementer I always thought of that as being at the end of a for loop iteration like okay, so, you know do This do this do that and then well, that wouldn't work if it's a new variable, right? Well, this is I guess I could well because this logs zero Rather than one we know that this is not happening as part of that Same iteration and what actually happens is this it could be could be just after the body, right? It could be still well no because then this is a closure. So this is being logged. Oh, you're right. Yeah Yeah, and so this is this is the weird thing It's like it exposes that the incrementer runs at the start of every iteration except the first one I Know right this is for all the elegans out of the window So the way the way it actually works Well, actually let's let's introduce like an extra thing So now the question is Does it copy like the end the value at the end of the body in to the first value of the next iteration? And then apply the I think you've got your credibility back because that is exactly what it does Yes, I mean it will happen because if you go back to our lands It would Behave like that. Yeah, you can alter the value of IE within. Yeah. So what happens is it? It does this like bit this special bit that it treats as a declaration It records all of the things that are sets. It's all has some bookkeeping there of like so in this case It's like I just I but you could declare many It runs its its check. Yeah, it's cool And then it well it so it actually creates a new lexical environment before it runs this check And it copies the value of I into it because that check can actually be side-effective, right? It can be all kind of stupid thing. It can all be side-effective, which is the amazing thing So then it runs the body in that same lexical environment that we did this bit So we've got a set time out. We're logging so at this point I is zero Recuring our task then we're doing I plus plus and so this is where we're mutating I to be one And then that's the end of that lexical environment because it then creates a new lexical environment to do the next iteration Which begins with this and yes, you're right It copies the value from one into the other for every everything listed in this section It copies the value so now it's taking I which is one into the new lexical environment We do our plus-plus on it. I is now two we do our check it is not less than two So you get a log of one and we get a lot of one even though we incremented after scheduling the task Yes, because it's it's still pointing at that instance of one that we so just for the record for the people at home Don't no that is like if you have to know these intricacies if your coast code relies on these intricacies Most likely it's a bad idea, right? I would say that this is actually pretty intuitive because as you say it works a lot like va did But it's doing so many like jumping over Yeah, I mean I would say the same thing about var if you rely on I mean this is kind of out of order then right like you Do things to a variable that's already been used beforehand and you rely on the value these things while possible If don't use the mission any way to avoid it Yeah, you can use a sink of weights rather than yeah, that's your codes a lot more sensible But yeah, so that the copying between stuff only happens with things declared there So if you have sort of you know another variable in there It is not copying that between the yeah excuse context because it's not one of the ones declared It's got a special thing where it deals with that. So that's cons behave any different Well, so if you you can actually put cons there Yeah, I know but then it will fail as soon as this happens. Oh really well, it's constant You can't reassign to it. I mean if it's a new variable every time well No, because it creates the new variable and then you were executing this so that's when the mutation happens Okay, so it is odd that it the spectre sort of allow that to happen, but it will only ever work I mean it could still be a valid for loop if you'd have no code in your exactly a bit, right? So the spec still has to deal with it so Final one if you format your code like this, I'm gonna slap you The reason is because I'm gonna do this So what okay, so I'm jumping through some hoops here all I'm doing is I'm assigning zero to I But I'm just using the statement so I can stuff like I miscount the parentheses. I was like wait you're storing the timeout ID in I but it's not a lot of print So this is another thing that people not necessarily know that you can if you want to concatenate Commands and JavaScript you can use and and You can use a semi colon and you can use a comma They all have slightly different meanings in how they concatenate and when they abort to coordinate But yeah, that's where I could have used and and here. I didn't think about that But yes, just calling us. This is not this is not a function parameter comma. This is a concatenating to Individual expressions comma. Yes, because I can't I can't use Semi-colon because that's part of the for loop stuff. I mean you could have used an anonymous function that you immediately Look, I would have to make the font even smaller to do that so I You know, you've talked around some of the problem So my question is what what is going to be logged here? So I've got the my I plus plus here You've got your I plus plus there What do you think I do know I and I'm you know, I didn't know this until I looked at the spec Okay, like I wanted to talk about the complication behind a for loop and I only discovered this particular thing so what I what I kind of assume is that This parentheses expressions, which is the set timeout and the return zero in a way That is being assigned to I once at the start Right, but this but this I it's it's going so this this call here What do I think what is the actual question like the for loop should the body should should run once right? the question comes down to which Lexical scope is this code going to be running in that we sort of said there are many within a for loop, but So what possible mutations are going to happen to I before this code runs because I this for loop is going to run to completion I mean, this is a task this will run after the for loop is done because so I'm gonna so technically You said this I plus plus is creating a new lexical scope, but does it mean it's referring to a different variable now or not? I'm having so much fun. I'm gonna say it logs a one logs a one and That is what I would have said as well, but it is not correct No, I seriously I so so here's the weird thing it creates an additional lexical scope for this Initial statement of a for loop. Okay, so it creates a lexical scope runs this line Mm-hmm, and once it's run that it goes Well, what are the values of everything declared and then it copies them into a new? Lexical scope boy to do the rest of the for loop to do this and then log a zero Because it never hits any of these mutation points And it's really weird. So you get so many lexical scopes in just a simple for loop So what we're saying is don't use for loops. Yeah, our general advice. No use use four of That's the story you don't have to worry about any of this just use iterators and four of I've essentially just wasted everyone's time Well done. Welcome to HTTP 203. We're back Maybe we should be one of those podcasts that has a little like jingle between how we need to transition The welcome back listeners. We were talking about lasers, but we're now gonna pick up on today. We're sponsored by Google micro kitchen Sponsored by Google Chrome again, please do it download Chrome everyone