Complete Intro to Web Development, v2 Loops

Transcript from the "Loops" Lesson

[00:00:00]
>> Brian Holt: So what happens if I have these friends at my party, and more people show up, and I wanna keep adding one for every person who shows up to my party? I could do something like this, so first of all, notice that we're using let here instead of const.

[00:00:16] If I said const here, it's gonna say, hey, you already had friends at your party, you can't assign that to be something else. So if you know that friends at your party is going to change down the road, you say let.
>> Brian Holt: Some of you might ask, why don't I just always use lets, then I never have to worry about these errors?

[00:00:36] And there are people that do that, so that is a valid thing to say, but I do not. I like const, there's a thing called the principle of least power. That you use the most simple thing possible, so const does not have the power to change. Therefore, if I look way down in the code and I see friends at your party again, I know that that is not changing because I knew it was a const before.

[00:01:01] So there's an assumption i get to make about code that I wrote, and I think that's a really good thing, personally. And there are people who will disagree with me and I disagree with them. So screw you guys, I'm the one teaching. So this one does have to change, so that's why I say let.

[00:01:17] Right, so let friendsAtYourParty = 0, and then I say friendsAtYourParty is reassigned friendsAtYourParty + 1. Right, so whatever friendsAtYourParty was before is now assigned whatever it was + 1, and I can do that. I can reference friendsAtYourParty when I'm reassigning friendsAtYourParty, because this gets run first, and then it gets assigned to this, does that make sense?

[00:01:44] So I can reference in here, because here, at this particular moment, it's gonna be 0, because that's what it is, so it's gonna be 0 + 1. And then this is going to be the answer of 1 and it's gonna be reassigned here. So this is now 1, then 2, then 3, so on and so forth until you get down to the bottom and you have 10, make sense?

[00:02:06]
>> Brian Holt: So it'd be nice if there was a better way to do this so I didn't have to copy and paste this every time that I wanted to add someone to my party. There is, luckily, talked about let and const. Something that you will see that, this is old JavaScript, you will see var, V-A-R, I'm not gonna talk about it today because it is old.

[00:02:32] And you really shouldn't be using var, I'm gonna say ever, I don't think you should ever use var. I know Kyle Simpson would disagree with me, and again, he's in Texas, I am here, so I get to say what I want. var is the old way of doing it, I don't think it's good anymore, you should use let.

[00:02:50] There are some differences there, and they're not worth discussing. If you'd like to look at it, there's good blog posts on it, just Google it. So we're gonna do what's called a loop. Now, a loop allows us to execute something multiple times. So the first one that we're gonna learn here is called a while loop, which is really, really similar to an if statement.

[00:03:13] So I'm gonna say let friendsAtYourParty = 0. I'll say while friendsAtYourParty < 10, so as long as this statement is true, it's gonna keep doing whatever it's doing. So here I'm gonna say, friendsAtYourParty = friendsAtYourParty + 1, right?
>> Brian Holt: As long as that's true, then it's gonna keep adding something, eventually this is going to get bigger than 10, right?

[00:03:40] Eventually this is going to become false, and then it's gonna console.log, it's gonna break out of that and it's gonna keep going. Right, so it's actually gonna run this statement here on line 3, the one between the curly braces, ten times, and then it's going to break out of it.

[00:03:56] It's actually gonna run it 11 times, technically, and then it's gonna log it out here, which is why you're able to see 10 here. Does that make sense, so while this is true, do this. Now what happens if I made this 15?
>> Brian Holt: It doesn't even ever get run, because it's gonna ask us first, hey, while friendsAtYourParty < 10, well, 15 is never less than 10, so it's just gonna not ever run it.

[00:04:24] Now if I get down here and say negative 100, this is gonna get run 110 times until it's less than 10, and then it finishes, then it's done, right?
>> Brian Holt: Make sense? So this is a while loop, I will say that you do use while loops, I don't think I use them, I wouldn't say maybe daily, but maybe weekly, so they are useful to know.

[00:04:50] We're gonna get down and we're gonna see another kind of loop, and I use for loops every day.
>> Brian Holt: But I teach you this one first because it looks really similar to an if statement, right, and it functions relatively similar to an if statement.
>> Brian Holt: There's another, we're not gonna talk about it today, but there's another one called a do loop, it's really similar to a while loop, it works almost the same.

[00:05:18] The only difference between a do loop and a while loop is, a do loop is gonna happen at least once. A do loop will guarantee, I'm gonna run the body at least once and then I'm gonna ask the while question, whereas while loops just ask it. I never see do loops, but just know that they exist.

[00:05:34]
>> Brian Holt: Any questions about while loops before I move on?
>> Brian Holt: If you put a bad thing here, I'm not gonna do it right now because it's gonna crash my browser if I do it. But let's say, I'm just gonna, while friendsAtYourParty,
>> Brian Holt: Is greater than 10, so if I did this,

[00:06:07]
>> Brian Holt: And I made this equal to 10. If I uncommented this line and then commented the line underneath it out, what would happen?
>> Brian Holt: You're gonna get what's called an infinite loop, because this is never ever going to be false. It's cuz it's just gonna keep adding itself because, while 10 is, is 11 greater than 10, yep, is 12, is 13, is 14, is 15?

[00:06:32] And it's just gonna keep going forever and ever until eventually it's gonna crash. It's gonna crash the browser, this is called an infinite loop. They're very easy to do, it will crash your program. And that's fine, we all do it, but actually, I would have to make this 11 anyway.

[00:06:51]
>> Brian Holt: Or the infamous while true loop [LAUGH] right. This is just gonna keep running forever and ever and ever. So be aware that there's a thing called an infinite loop, it's really easy to do. I don't wanna crash my browser right now, cuz I'm teaching you things, but that's what it would do.

[00:07:10]
>> Brian Holt: Questions about that? If you ever see your browser lock up, it's probably an infinite loop. That's the most common reason that if I wrote code that. I guess we can just do it in here, it wouldn't be very hard. So while true, console.log(i), and then here, I said let i = 0.

[00:07:45] It's good to see what it looks like when it crashes, okay? So I save this, this is gonna be an infinite loop, right? I'm gonna come over here and just, you can see that it's really locking up my browser. It's really unresponsive right now, you can see I'm beach balling.

[00:08:10]
>> Brian Holt: At some point it's gonna say, hey, I think something's wrong [LAUGH]. Eventually Firefox will just kill the tab.
>> Brian Holt: Right, but this is not responding. I can't scroll, I can't do anything. I'm just gonna close the tab.
>> Brian Holt: Okay, this is not what I wanted to do [LAUGH].

[00:08:39] I have made a mistake [LAUGH].
>> Brian Holt: Anyway, if this happens to you, you've probably got an infinite loop.
>> Brian Holt: Yeah, this is right gone.
>> Brian Holt: Okay, so please close, there we go, thank god. [LAUGH] Any questions while Firefox puts its shit together?
>> Brian Holt: Yeah.
>> Speaker 2: We have a question from the chatroom.

[00:09:24] What is the difference between var and let?
>> Brian Holt: I will give you the one sentence answer to that question cuz I don't wanna get in to it. It's a lengthy explanation, and the difference is scope, it's the way that they handle scope. Let has block level scope and var has function level scope.

[00:09:44] If you are unsatisfied with that answer, then I would invite you to Google it. Something that I did wanna show you for just a little bit, there's these things that are are called unary operators, which is not something you need to know, but I'm just gonna throw it out there.

[00:10:00] Unary is in contrast to binary, right, binary has two options or two things, and unary has one. So I have this first line right here, friends = friendsAtYourParty + 1. Right, plus would be what's called a binary operator because it requires one on this side and one on this side.

[00:10:19] Whereas here, you only need one thing. Again, that's not really that useful a distinction to know, it's just FYI. So these four lines of code right here, 2 through 5, do exactly the same thing. This adds 1 to friendsAtYourParty, this adds 1 to friendsAtYourParty. This adds 1 to friendsAtYourParty, and so does this.

[00:10:45] So you can see down here when I console.log that, it's 4. Now you might ask, why is there so many ways to add 1 to something? I think part of it's just legacy, JavaScript is based in the language C, C is a language from the 70s. And C has all these features and JavaScript just kind of adopted them.

[00:11:06] And most languages that are C based, like Java and Go and a lot of these have legacy that comes from C, and that's why. So += right here is going to add 1 back into this. And so for example, I could put 5 here, and it would add 5.

[00:11:28] Right, so it's just going to add whatever this number is to this total. And I think down here, I don't show it, but there is also -=, so that would subtract 5. *=, /=, by the way, that's the way you do divide in JavaScript, is slash. And there's even, I'm gonna make this 2, **, I think that should work.

[00:12:03] It's one, so ** is exponent, so if I have, I don't need to do it up here, console.log(5 ** 2), that is 5 squared, just so you know. 5 times 5, or cubed, 5 times 5 times 5, so that's what ** is. Anyway let's go back to += 1, just wanted you to see that pattern cuz it does get used.

[00:12:40] ++, this is one that you'll see a lot in conjunction with for loops. It just means increment it by 1. There is also, as you might imagine, --, which is subtract 1. There is no **, it's just ++ and So that's why if you've ever heard of the language C++.

[00:13:02]
>> Brian Holt: It's C incremented by 1, right? That's kind of the joke, anyway, it wasn't funny then, it's not funny now. [LAUGH] And then also, you can put the ++ on the front, and you can put the ++ on the back. There is a minor difference between the two, it is not important.

[00:13:22]
>> Brian Holt: The difference is when it gets incremented, which in these two cases, because it's the only thing on the line, doesn't actually matter. In JavaScript, you will always see people put it on the end, I don't think I've ever seen anyone put it on the front. I would even venture to say most JavaScript developers don't know you can put it on the front.

[00:13:43]
>> Brian Holt: But if you're writing C, I guess in C best practices, it's on the front. I'm not a C developer, so don't believe me, but that's what I've heard. Okay, any questions about incrementing things, make sense? Okay, the reason why I show you this is, you don't really see ++ a ton.

[00:14:03] Did I use ++ when I did my code thing, where's my code? I did, right there, it's one of those things that's so automatic that I just forget to explain it. So, sorry, now hopefully I've explained it so you get it. [LAUGH] So going down here, friendsAtYourParty = 0.

[00:14:24] We're gonna talk about this kind of loop right here, which is called a for loop. Okay, obviously named after the for, right here. So you're gonna have three parts to a for loop. Okay, the first part is, you declare what's called your control variable. For whatever reason, since the beginning of time, the control variable for a for loop has always been i.

[00:14:49] I don't know what it stands for, I don't think it stands for anything, but it is always i. You can put on the things, there's no reason it wouldn't work. It's just that everyone calls it i, so you will always see that called i. If I have a for loop within a for loop, then they just start going up the alphabet.

[00:15:03] So, the next one will be j, the next one will be k, the next one will be l, m, n. If you're going past n, you have serious problems. Honestly, if you're going past maybe k, you're gonna have some real big problems.
>> Brian Holt: Anyway, so this is always called i, it needs to be let, right, because if it's const, const can't change, you can't change const.

[00:15:28] So it's gonna be let i = 0, the second part is the condition, like the while loop. As long as i <= 10, right, so as long as this is true, it's gonna keep doing it, as soon as this is false, it breaks out of the loop. And the last thing here is, what do I do at the end of every loop, right?

[00:15:51] So when it gets down here to the bottom, it's gonna run whatever is here. So here, I'm gonna run i++, I'm gonna increment i by 1, that's what I'm trying to say. Now you absolutely could say, let's just break this, so I could totally make this 0, I can make this part 10.

[00:16:24]
>> Brian Holt: And as long as i >=, shit, I broke it, this is exactly what I was trying to avoid doing. Because every time it runs my code as soon as I type it, now I'm stuck in an infinite loop. It's gonna say, hey, your web page is slowing down, what would you like to do?

[00:16:39] Stop it, thank you, refresh the page, that's exactly what I was trying to avoid doing, and I did it. And now everything's back to FiraCode again, whatever. We're just gonna deal with this being FiraCode for the moment, and during the next break, I will fix it. So just so you know, this little character right here, the less than or equal to, is two separate characters.

[00:17:06] It's less than and equal, but when I put them together, my font combines them into one thing. This is called a ligature, if you wanna do that for your own code, there's a thing called FiraCode. There's also Operator, which is what everyone swears by. You have to pay $200 to use Operator.

[00:17:24] It's a stupid font for $200, don't buy it [LAUGH] it's dumb. Anyway, FiraCode is free and it's from Firefox, or Mozilla, rather. Anyway, that's what's happening there. What I was trying to demonstrate to you, let's just do this like this.
>> Brian Holt: For let i = 10, i >=,

[00:17:59]
>> Brian Holt: 0, i--, so you can have it go the other way too, right. So now I can do this and not break everything, and this works exactly the same way. Because now it's, rather than counting up to ten, it's counting down to zero. And if I wanted to make that even bigger, I could start from a greater number and it would come down even more, even more, even more, even more, right, make sense?

[00:18:33]
>> Brian Holt: Now why would I use this over a while loop? In this particular case, a while loop actually would probably work a little bit better. But the reason why for loops end up being really useful is, this i variable ends up being useful because on every loop, it's a different number.

[00:18:49] And so sometimes that's useful, that's kind of abstract for me to say right now. But we'll see examples of that of where that i variable becomes very useful to use, particularly with arrays, that we will get to in a little bit.