Control Flow

[00:00:00]
>> Let's say I wanna have branching logic inside of my program here. So I have this Boolean, skyIsBlue, which, depending on the day in Seattle is not always true, it's frequently gray. Sometimes, there was one time it was red, when there was forest fires in California, so that would have made this false.

[00:00:17]
Anyway, so I can ask an if statement. An if statement just is saying, if this is true, do a thing, if this is false, do a different thing. So I'm asking, inside of the parentheses here, is this true or false? Obviously I set this to be true up here, so this is always gonna evaluate as true.

[00:00:39]
But you can also give it an else statement to say, else the sky is not blue. So for example, if it was gray in Seattle today I could say false here, and then it would say the sky is not blue, or true, the sky is blue. And that is how you do if statements.

[00:00:57]
Everything between these curly braces here, Will be evaluated, so I could also have another console.log here. Right, and it's gonna evaluate everything here and nothing in here, which is great. This allows me to set good branching logic of doing something one time and not doing it different time.

[00:01:21]
And I can also have anything here, I can have 2 + 2 === 4, right? So anything that can be evaluated to true or false can be evaluated here between these. And then this is an arbitrary long block. Something between these curly braces would be called a block, it's a block of code.

[00:01:46]
So the first block would be evaluated, the second one would not. Okay, questions about that? It's nice cuz it kind of reads like you would expect it to, right? If this is true, then do this, else, do this. So I actually do the exact same thing down here, you can see I'm very creative with my thought process.

[00:02:21]
So some of you might be looking at that triple equals and being, what is that? It's actually just my font shoving them together. It's actually three equal signs put together, but my font puts them together. So that's a double equal right there, and that's a triple equals there.

[00:02:42]
So you might ask me, Brian, why are you using three equal signs? Why can't I just do that, right, one equal signs? Well, if you remember, up here, what is one equal sign do in JavaScript? I want you to replace one equal sign in your brain with is assigned, right?

[00:03:02]
So skyIsBlue is assigned true. So if I'm doing this, 2 + 2 is assigned 4, that doesn't make any sense, I have to ask a question, right? I have to say is this true or false, because this if statement, this block here, it has to end up somehow being true or false, right?

[00:03:21]
So I can either put double equals, which technically would work here. But I'm gonna say just go ahead and do a triple equals, and there's no such thing as a four equals, so that's fine. I'll explain to you why that's important just momentarily, just bear with me for a second.

[00:03:38]
So 2 + 2 === 4, this is asking the question, is this side of this equal to this side of this? So up here I could ask, is skyIsBlue === true? It is. Right, or is it equal to false? It's not equal to false, so this can be a little confusing, but skyIsBlue is not equal to false, right?

[00:04:07]
So therefore, it's going to do this. So that triple equals sign just asked the question, is the left side of this and the right side of this the same thing? Now, let's talk just a moment about double equals versus triple equals, do I have it done? I do.

[00:04:34]
So single equals is assigned, And this triple equals asks the thing, is this both the same thing as well as the same type? So let's make this a string. So by putting the quotes around this, I've now made this a string, right? Just like this could be any arbitrary amount of things, but let's make it an actual just a string of 4.

[00:05:03]
If this is double equals, it's gonna be true, because it's the same thing even though it's not the same type. So this ends up being 4, this is a string 4, right? So those end up being true, and double equals will say, hey, as long as these end up being the same thing, even if they're different data types, by all means, return true.

[00:05:27]
By putting triple equals here, That it's gonna say, this is not the same data type, these are not both numbers, therefore, I'm not going to accept this. I'm gonna say, always use triple equals, unless you really intend on using double equals. You'll fall into some weird traps by using double equals, it's called type coercion.

[00:05:51]
You'd never have to care about that term that I just said, you can just literally throw it out of your brain. And I don't really wanna get too much into it because it's weird, there's a lot of things that you wouldn't expect to work the way that it does.

[00:06:07]
I'll just give you an example here, is false == 0? Yes, would you expect that? Maybe, is false === 0? No, that's my point, there's weird things. By putting triple equals here, you're making things very explicit, right? This is what I'm telling that you're writing code for your future self here.

[00:06:30]
You're being very explicit that I expect this to be false, or expect this to be 0. Okay, I think that's enough on that. There's a bunch of JavaScript kind of fundamental courses from Kyle Simpson on Frontend Masters, and he really digs into this kind of stuff. So definitely check that out if you're interested.

[00:06:53]
Let's talk about else ifs. So you have friends at your party, and let's say ten friends show up, and then we can do branching logic on what to do with how many friends you have. So if you have 0 friends at your party, then you get a lot of nachos to yourself.

[00:07:09]
It's definitely not a bad thing, I could definitely go for some nachos right now. If friends is less than or equal to 4, it's the perfect amount to play some Mario Kart. And if you have more than that, then you probably should turn on some dance music, right?

[00:07:31]
So let's talk about this glyph for a second, this is an angle bracket, so this is the less than. Yeah, I always gotta think of how you verbalize these. Again, my font, if you put a less than and then another equal sign next to it, it puts that into one glyph, right?

[00:07:52]
So if less than or equal to 4, then play this. But what I'm trying to demonstrate to you here is you can have multiple sets of branching logic, right? You can have, if it's 0, do this, if it's less than or equal to 4, then do this, otherwise, do this.

[00:08:10]
So it's gonna ask multiple questions before you end up wherever you are. You also don't even have to have this else here, right? So if I just delete that, what's it gonna do? Nothing, right? 10 is not equal to 0, and it's not less than or equal to 4, so it just skips everything here, right?

[00:08:34]
There's no else block, the else block just basically says, if nothing else is true, then run this. And you can mess around this, like if I put 3 here, what do I expect to happen? All right, if I put 0 here, what do I expect to happen? If I put -1, what do I expect to happen?

[00:09:05]
Is that what you expected to happen? Is -1 less than or equal to 4? It is, so if you have -1 person attend your party, so I guess if you leave your party, that's the perfect amount to play Mario Kart. I'm doing this just to show you how bugs creep up in your code, right?

[00:09:23]
What happens if you get unexpected input? Weird things start happening, and that's how you get bugs in your code. That's why that joke to me is always so funny, like it's a QA person walks into a bar, orders a beer, orders ten beers, orders green beer, orders a cat, right?

[00:09:37]
And they just start trying to do everything to try and cause bugs in your code, that's exactly demonstrating what's happening here.