Loops

[00:00:00]
>> I just wanna point out that this is a fire hose. What I'm teaching you now, what we've learned in a couple of hours together here. I think they probably took weeks in my college courses to get through all of this stuff. So if this feels like a lot, it is, right?

[00:00:18]
So I'm validating if you're feeling like this is hard. Now watch, it's just gonna get more fun, okay? So let's say if you wanna model people showing up to your party. So you start with this many friendsAtYourParty. We use let, cuz obviously this is gonna change over time.

[00:00:40]
If I did const, this would say, hey, you're trying to reassign friendsAtYourParty, you told me you wouldn't do that, I'm not gonna let you. So I say let here. So notice I can reference friendsAtYourParty here, right? So, after line 2, what is the number that's stored in friendsAtYourParty?

[00:01:04]
1, right, cuz it takes the 0 here. This is what we started at and it adds 1. What happens after line 3? 2, 3, 4, 5, 6, 7, 8, 9, 10, and we end up at 10 here. So people sometimes have this problem with self referential, right? I just wanted to demonstrate that you can keep doing that and it's totally okay.

[00:01:29]
So you can reference what it was and then you can re-write over it later. Obviously, this is incredibly repetitive, right? So wouldn't it be great if there was some way that we could kind of do this faster, like if we wanted to add 10 friends to our party?

[00:01:48]
Obviously, we could just say, +10 here, I suppose, but I wanna do it in a much more roundabout way. Okay, So what I wanted to talk about is what's called a loop. So I have friends in my party, 0, we start at that. And then I'm gonna put a while statement, a while is a loop, it's gonna keep doing something until something is true.

[00:02:21]
So you're saying while friendsAtYourParty is less than 10, Keep doing this over, and over, and over again. So [LAUGH] I forgot this always happens to me when I teach this part of the course. Let's refresh the page, I crashed my browser. So there's a thing called an infinite loop, and your browser does not know how to recover from it, jeez, this is real crashed.

[00:02:56]
Okay, here we go. So let's do this, I'm gonna copy and paste it so I don't do that again. This is super easy to do because this is running your code literally every time that you type something, right? It's very easy to do this. So console.log friendsAtYourParty. Or let's say another friend joined your party.

[00:03:28]
I'm just gonna cut this and then I'm going to paste this here. How many times do you think it's gonna log out? Another friend joins your party, 10 times, right? I think, yeah, 10 times. Why? Well, we have this variables, friendsAtYourParty, right now it's signed 0. Then it's going to keep running this loop over, and over, and over again, while friendsAtYourParty is less than 10.

[00:04:05]
It's like an if statement, right, but it keeps evaluating that if statement over, and over, and over again. So while this condition is not yet true it's going to keep doing this. You can see here I have this kind of control variable that I keep adding one to.

[00:04:19]
Eventually this is gonna end up being what? 10, right? And at that point it's going to finish, and then it's done, Right, because when this is 9, or is 9 less than 10? Yes, then it's gonna end up being 10, is 10 less than 10? No, it's not, right?

[00:04:50]
So then this loop finishes and it logs out how many friendsAtYourParty which is 10. What happens if I put or equal to here? It's gonna run one more time, right? Just one more friend joins your party this ends up being 11. What happens if I make this 100?

[00:05:13]
Lot of friends join your party. So that's what loops are really useful for, they're useful for running code over and over again until some condition is met, right? I showed you a while loop first because while loops look like if statements, right? If you've seen an if statement, the while loop looks really familiar.

[00:05:38]
You actually don't really end up using while loops that much. I'm gonna show you the next one which is a for loop and we use those all the time. Let's refresh the page here. Most of the other code blocks or you can just like modify willy nilly and it's totally fine.

[00:05:54]
Be careful with the loops because it's really easy to turn them into a infinite loop. So for example, Whatever, I'm gonna show you just for fun. We're gonna open this in another tab here though, cuz I don't wanna wait. What happens if I flip this to be going the other way?

[00:06:19]
Right, so that it's, well, friendsAtYourParty is greater than 10. Well, it's actually not gonna run, right? But now what happens if I put like 11 or 20 here? If I put 20 here, I've now locked up my browser again, why? This is never gonna come back by the way.

[00:06:49]
Eventually Firefox would be like, hey, I think something bad happened. What's the bug here in this five lines? Okay, well, let's just work through it piece by piece. I'm asking while friendsAtYourParty is greater than 10, right? Is 20 greater than 10? After the first loop, what it is friendsAtYourParty?

[00:07:15]
21, then 22, then 23, then 24. Is this ever gonna be not true? So it's gonna keep doing it forever and ever. This is called an infinite loop, it's a type of bug. And unfortunately for us, if you do this in your browser, your browser just crashes, right?

[00:07:39]
Your browser doesn't know what to do about, your browser has no guard against this. To this, it looks like it eventually gave up. Nope, it didn't. But notice that Mike, it's really struggling here to keep up with this cuz it's just running this infinitely. Okay, I'm gonna close that.

[00:08:03]
So infinite loops, those are super fun, it will lock up your browser if that's happening to you that's what happened. You hit some sort of infinite condition. Okay, So I keep showing you this friendsAtYourParty = friendsAtYourParty + 1. There's a bunch of shorthand ways to do this and I just wanted to show you those really quick.

[00:08:28]
So you have line 2 here = friendsAtYourParty + 1. There's another way you can write that as +=, it's saying take whatever's in here and add 1. That's what += does, which by the way, -= works, ×=, division is with slash, so /= works. Even exponents which is asterisk, asterisk also works.

[00:08:56]
Yeah, for that, if that was unclear, 2 asterisk asterisk to the third, right? This is 2 to the power of 3. So this would be 8, double asterisk, okay? Anyway, +=. What's nice about this is I can put like 10 here, right? If you just wanna add something to a number, you could do that, right?

[00:09:21]
Whatever you wanna put there. There's also a ++, take whatever is in this and add 1. You can also have ++ on the beginning. So, I'm sure many of you have heard of C++, it's one better than C, that's the joke there. I don't actually know the truth of this, but I've heard that the joke with C# is it's a ++ ++, right?

[00:09:54]
It was like the hash is 2++'s shoved together. I don't actually know if that was intentional or not. Anyway, all these four lines do exactly the same thing. Now don't get petty with me, I know that there is a very, very slight difference between ++ at the beginning and ++ at the end.

[00:10:20]
99.999% of people never have to know or care because you should not be using ++ on anything other than its own line. To prove my point to your friendsAtYourParty, Let's say, Or maybe this is actually even more clear if I do it this way. Now we'll just take this one out so you don't have to see it.

[00:11:13]
Why is this 5 and why is this also 5? If you put the ++ at the beginning, before the statement is evaluated it adds 1. If you put the ++ at the end, then it's evaluated at the end. So if I put console.log friendsAtYourParty without anything, what would you expect one more time?

[00:11:38]
It is 6, right, because it evaluates this so it logs this out, then it adds 1. That's why this is 6. So this is 5 when it starts and then ends up being 6. Whereas ++ at the beginning evaluates that before and then does it so this was 4 beforehand.

[00:11:54]
So it's 4 here then after this, it ends up being 5, right? So before 4, after 5, This is not important at all, but it's interesting, right? Before this is 5 and then after it's 6. And that's why these are both ended up being 5, okay. Never have to know, just wipe that out in memory because this should never be important.

[00:12:35]
If you're writing code where this is important, you're doing it wrong. Okay, that's all, that's my entire spiel. So the reason why I wanna show you is that JavaScript people almost always write ++ at the end, JS almost always writes it at the end. There are other languages that preferred right at the beginning.

[00:12:55]
Doesn't matter, I would just say follow whatever the language prefers. In JavaScript, put the ++ at the end. Okay, so I wanna show you now the for loop. So I have friendsAtYourParty, and let's just make this simple for a second. No, I broke it again, hold on. So easy to make an infinite loop here, friendsAtYourParty equal to 0, right?

[00:13:25]
And I wanted to do it just like I did up here in the while loop. Where I wanted to add 10 friends to the party, right? That's what this for loop does. So every part of the for loop, it has these three distinct parts. The first part is you declare your control variable.

[00:13:48]
For whatever reason in the history of programming, that's always i. Doesn't stand for anything. I think it might stand for index, I'm not really sure, but just use i. And then you start at some variable so we're gonna start our for loop at 0, that's really common. This is the while part.

[00:14:11]
So while i is less than 10, do something. And then at the end of that loop, do something to the variable, usually it's i++. So this part here is a really common way of writing a for loop. Start at 0, run while this is less than 10, and at the end of every loop increment i by 1.

[00:14:34]
So this is gonna start at 0. This is gonna be true until this is 9, right? Once it's 10, it's no longer true so it will not run again. And then at the end of this it'll increment by 1. So how many times will this loop run? 10 times.

[00:14:57]
You're gonna write loops for the most part like this. So let's say you wanted this to run 100 times instead of 10, just like that. 1000 times, 10,000 times, 100,000 times. Notice this is running this loop 100,000 times, and it's going extremely fast. That's because browsers are really good at running for loops.

[00:15:30]
So let me do this so I don't cause an infinite loop. I'm just gonna write this in a comment really quick. You don't have to go from, typically it's just clear to go from 0 to something cuz that makes it really easy for people to wrap their head around.

[00:15:44]
But there's absolutely no reason that you couldn't do it like this either. Right, I could just delete that for a second or we can start from 10 and go down to 0. Yeah, there's absolutely no reason that you can't start at 10, and then go down until it's greater than 0, right?

[00:16:20]
And then as you might imagine you have ++ which which increments by 1, -- decrements by 1. So there's no reason that you have to climb up, I'm just trying to demonstrate your free to manipulate this however you want. You can have this go until it's 0, 5, right?

[00:16:44]
You would never write a loop like this cuz this is super unclear of why you're going from 10 to 5. But you could, right, so anyway. Again, be careful about infinite loops, as you've seen I've now hit it seven times in my course. It's very easy to do.

[00:17:11]
Yeah, so like this one, This is an infinite loop. Cuz your friendsAtYourParty starts at 1, and at the end of the first loop it's gonna be 2, then 3, then 4. 4 is always gonna be greater than 0, it's just counting up so this is going to always happen so this is gonna be an infinite loop.