Complete Intro to Web Development, v2 Control Flow
This course has been updated! We now recommend you take the Complete Intro to Web Development, v3 course.
Transcript from the "Control Flow" Lesson
>> Brian Holt: So let's get into something called control flow. You don't really have to remember the word control flow. It is what it's called, but it's not really important. More commonly it's just called if statements, so here's a really really simple one. So I have this const called skyIsBlue, and I set it to true.
[00:00:21] So then I say here, I ask a question. That's what if statements allow you to do. They're called conditionals, because if something is true then it'll do one thing, if something is not true it will do something else. I think it follows, right? So if, and then I ask is skyIsBlue, and skyIsBlue is true, right, so it's going to do the first block.
[00:00:45] So it's gonna go into here and say, console.log("The sky is blue"). Otherwise it's gonna say, console.log("The sky is _ not blue?"). And it's gonna ask a question, because you have problems, but that's not true. So you can see here only one thing is logged, only this first block, that is a word that you should probably remember, block, this first block is run.
[00:01:09] So everything between the curly braces. I could have multiple things here, too. So if I have five of those, you notice it's gonna log out a bunch of those, and it doesn't log out anything there, right? How do we feel about that so far?
>> Brian Holt: So nothing in the else block gets run, so that's what the else block does.
[00:01:26] It says, if this thing is not true then do this.
>> Brian Holt: Now, if I change skyIsBlue to false, what do you expect to happen?
>> Brian Holt: It doesn't run this block, and it only runs this block
>> Brian Holt: So that's what conditionals are for, for doing something given some sort of condition.
>> Brian Holt: You can have anything in here that evaluates to true or false in some ways, right? Whatever happens inside the parentheses, the condition as you would probably call it, has to eventually come down to, is this true or is this false? So you might imagine what happens if you were trying to log out for temperatures.
>> Brian Holt: Sure, whatever we're just gonna do it right here. So if I had const temperatureToday =, I think I saw in Minneapolis it's gonna get to 86, which is way too hot. [LAUGH] So if temperatureToday,
>> Brian Holt: ===, that's annoying, I should probably change the font on this. So I have a special font that works here, If I put three equal signs together.
[00:02:53] So these are three equal signs, right? It combines them into this special triple-equals thing. Let me just change this, cuz this is gonna confuse people. Now you can see it's three equal signs. [LAUGH] My special font combines them into that one glyph that's three equal signs. It's really nice for me, but it's probably terrible to teach with.
[00:03:14] [LAUGH] So just so you know, this is three equal signs. So if temperature === 86, then I'm gonna console.log,
>> Brian Holt: Let's do double quotes, ("it's too damn hot".
>> Brian Holt: Okay, so triple equals is asking the question, is this temperatureToday equal to this? Is it equal to that? Yes, what is it saying here?
[00:03:59] Yeah, you need to close that.
>> Brian Holt: So now here it's saying, it's too damn hot. That backslash, don't worry about it, it's escaping the variable to make sure that it doesn't break anything. But suffice to say, it's not really something you need to care about at this junction in time.
>> Brian Holt: You know what, now you definitely don't have to worry about it. [LAUGH]
>> Brian Holt: Now, this isn't really terribly useful, because this only works in one temperature, which it can be any number of temperatures.
>> Brian Holt: So what would actually be useful is, if it is >= to let's say 80, then it says, it's too damn hot, otherwise it says, it's fine.
>> Brian Holt: Does that make sense? So you can do comparisons inside of here. Let's talk about triple equals just a second longer. So you might be asking, why is it just = 80? I don't want you to actually think about a single equal signs being equal to. Think of this as is assigned, so temperatureToday is assigned 80.
[00:05:23] So when you see one equal signs, mentally replace that in your head with, is assigned. And then when you see double or triple equals you're gonna say, is temperature equal to 80?
>> Brian Holt: There is. So in this particular case, you would see no difference.
>> Brian Holt: Let's just say that this was string 86 instead of 86. So I put quotes around this, so now this is equal to a string, and this is a number, right? So it's asking, is this number 86 triple equals to string 86? And obviously they are not, right?
[00:06:34] But if I did double equals, then they are equal. So double equals does this thing called coercion, that if you're trying to compare a number against a string it's gonna try and make it work as much as possible. And then if you do triple equals, it's gonna say, if you're not the same type, if you're not both numbers, I don't care, you are not equals.
[00:06:52] And I will promise you that if you do triple equals you will save hours and hours and hours of your life. I know that because it has happened to me [LAUGH]. So please just take my wisdom from me, cuz it's just not a fun bug to find. Cuz it's very subtle right?
[00:07:08] Trying to figure out that these two things are different. Imagine that those things are hundreds of lines apart, it's pretty subtle and pretty difficult to figure that out. So just always use ===.
>> Brian Holt: Questions?
>> Brian Holt: You feel okay about that?
>> Brian Holt: Okay.
>> Brian Holt: So this is more talking about triple, or quadruple, or there is no quadruple equals, triple equals.
[00:07:45] If you do 2 + 2 === 4 it says, Thank God, the fundamental principles of mathematics still hold true. You can tell how late at night I was writing some of these. [LAUGH]
>> Brian Holt: So you can see here this is how that works. Or if I made this string 4, this would not be true, it would tell you to panic.
>> Brian Holt: Here I tell you about, is Brian cool? That's assigned true, because it's definitely true. Sunglasses, just kidding.
>> Brian Holt: So yeah, just think of that, is assigned to true.
>> Brian Holt: And so if you want to ask the question, is not equal to, that's also a question you can ask.
[00:08:33] And here I also talk about coercion.
>> Brian Holt: So let's go up here, there's another thing you can do. If you replace the first equals here with an exclamation point, like that, this is asking the question, is not equal to? So if 2 + 2 is not equal to 4, then you would probably want to move this up here, right?
[00:08:59] But this is how you ask, is not equals 2. There's that as well, but again, you want to use !== always.
>> Brian Holt: So that is something else you can do, and then you have the ability to ask more than one question as well. So if you have friendsAtYourParty =, is assigned 10, so if friendsAtYourParty === 0, it says, Cool, now I have a lot of nachos to myself.
[00:09:30] I was hungry when I wrote this one. [LAUGH] I also wanted nachos, which is usually true.
>> Brian Holt: If friendsAtYourParty is >= 4, it is Perfect amount to play Mario Kart.
>> Brian Holt: Let's see, I probably meant to do this, <=, oops.
>> Brian Holt: So if you have <= 4, I get these mixed up all the time by the way.
[00:10:07] [LAUGH] So if this was 3, then I will say, Perfect amount to play some Mario Kart. And then if I change this to be 10, then it says, Wooooo turn on the dance music!
>> Brian Holt: But I kinda want it to be 0 right now, cuz I want nachos to myself.
>> Brian Holt: Any questions about that? So you use else if to ask another question.
>> Brian Holt: So it's gonna say, if this part's true do this, if this part is true then do this, otherwise do this. That's kind of the logical progression here,
>> Brian Holt: Makes sense?
>> Brian Holt: Please.
>> Brian Holt: I would say, on the whole, most people write their semicolons. If you wanna know what actually in practice happens for me, if I have this code over here, I actually don't usually hit the semicolons myself. So I'm gonna hit Cmd+Save right now, and watch the semicolons.
>> Brian Holt: My editor actually puts them in for me.
>> Brian Holt: And that way I don't have to write them, [LAUGH] cuz I'm all about saving that keystroke economy, which is a term that people use, and it's ridiculous. [LAUGH] But they get put in there so everyone's happy, I think. Or no one's happy, and I also don't care.
>> Brian Holt: In the end, it doesn't particularly matter.
>> Brian Holt: I guess what I should say is, there's some very strong held opinions by some people on this subject. And actually one of the workshops that I teach for Frontend Masters, it was the first version of Complete Intro to React.
[00:12:08] I did not use semicolons at all during that workshop. So even myself, I've kinda gone back and forth. I don't like writing semicolon, that's the fundamental premise. But when they came out with the thing called Prettier, that just does it for you, I was like, cool, I never have to think about this again or have this argument again.
>> Brian Holt: So I don't care, yeah.
>> Speaker 2: We have a question from the chatroom. If we use three equal signs, why don't we use less than equals to and then two equal signs?
>> Brian Holt: It doesn't work, I think is the answer. That's a good question, I think the answer to that question would be,
>> Brian Holt: I'm gonna say, first, I don't know, I don't actually know. If I were to speculate, it's because this has to be a number. The only way that this works is it's called a comparator, so this is comparing one thing to the other. It has to be a number, so no matter what it's going to be coerced, which is what you call it when you change a string to a number or a number to a string, when you're changing types it's called coercion.
>> Brian Holt: Good question, though.
>> Brian Holt: Cool, now I have a lot of nachos to myself.