If Statements

[00:00:00]
>> WebDevSimplified: Normally in JavaScript your code runs top to bottom, but with control flow we can determine what code actually runs, if it runs, if it doesn't run, how many times it runs. It allows us to do much more complex stuff inside of our code. So an if statement is the most basic term for a control flow, and that allows you to do something if a statement is true, otherwise don't do it at all. So here we have an age variable age is equal to 18.

[00:00:21]
If the age is greater than or equal to 18, then we can run some code like you can vote. Otherwise it'll run some other code afterwards. So let's just copy this over to see exactly what's going on, paste that in, get rid of these comments that are not needed. There we go, and you can see here inside of our code, we run, you can vote, and we're running the program continues. So that if statement, essentially to create one, you write out the code if for if, followed by a space.

[00:00:46]
Technically, the space is optional, but to make it easier to read, I like to put a space. Then inside of these parentheses we put whatever condition we want to check, and this would be a condition that returns true or false. So here we're checking is age greater than or equal to 18, since technically in our case age is greater than or equal to 18, this will return true and if the stuff in this parentheses returns true, all the code in these brackets are run.

[00:01:10]
But let's say our age is actually only 10. Well, 10 is not greater than or equal to 18. So you'll notice when we run our code, it skips everything inside of these brackets because this evaluates to false. So if allows you to actually run certain code if something is true, otherwise it skips it if that value is false. So this allows us to conditionally run different aspects of our code. You'll also notice the code outside the parenthesis or the brackets, sorry, is run every single time because if only cares about the code directly inside of those curly brackets.

[00:01:41]
Now with if you can also do something called an if else statement. So sometimes you want to run one set of code if something's true and a different set of code if something is false. This is where the else keyword comes in. So all you need to do to create an if else statement is you take your normal if statement as is. All you do is add the word else directly after your final closing bracket right here, and then you put in new curly brackets, which you're going to define the code that runs in the else statement condition.

[00:02:08]
So I can just say console.log, you are too young. And now you can see it actually prints out you are too young because this evaluates to false, and if it evaluates to false, it'll run whatever code is inside the else section. And this can be multiple lines of code or a single line of code, you know I could have 10 different lines of code inside of here. It doesn't matter, just all the code inside those curly braces will run based on if the condition is true or if this condition is false.

[00:02:30]
If I change this back to 18, you'll now see it runs you can vote and completely skips everything inside this else section. We can even take this a step further by checking multiple different things by using an else if condition. So here is another example. We'll just keep modifying our code here, but if you want to do an else if, all you need to do is after your if statement, you write out the word else followed by the word if, and then you put another set of parentheses with a new check that you want to do.

[00:02:58]
So let's say here now if the age is greater than or equal to 15, we can run a different set of code. It can just say console.log close, but not old enough. There we go. And then we have our normal else statement still there. Technically, I don't need this else, it's entirely optional, but I'll leave it on there for now. So now we can run our code, and if the person is between 18 and 15, for example, they are 15, you'll see it runs close but not old enough.

[00:03:24]
So what happens inside of our code is first it's going to check to see if they are old enough by checking age greater than or equal to 18. This returns false, and if it returns false, it skips down to the next if statement, and then it checks that one. In our case, age is greater than equal to 15. This is true, so it runs the code inside of these brackets, and then it goes to the very end after all of our other stuff and continues on with our program.

[00:03:47]
If for example our age was only 12, which is not old enough for either, it'll do this check, which returns false. It'll move to the next check, which also returns false, and then it'll move down to the else statement, which is kind of our fallback for if everything returns false, and it'll run the code directly inside of here. While if they were old enough, for example 18, this one will turn true, it'll run the code inside those brackets and then skip all the way to the very end.

[00:04:09]
So this allows us to essentially run one of many different blocks based on different conditions that we have true or false inside of our code. The important thing to note though is with an if it only ever runs at most one of these conditions, so you can never run multiple different conditions. And if I were to remove this else, for example, and I had the age set too young, you'll notice none of the code inside of here runs cause none of my conditions returned true.

[00:04:34]
Now inside of an if condition, you may want to check multiple different values, and we've kind of already seen how we can do this by using the and and the or operator. This is just allowing us to combine together different booleans into one larger boolean. So here is another example where we have an age variable and a has license variable, and we need them to both be over the age of 18 and to have a license to be able to drive in this particular case.

[00:04:58]
So if the age is greater equal to 18 and they have a license, it'll print you can drive. But if, for example, the has a license is false, it won't print anything, or if their age is not old enough, it'll also not print anything at all. So this allows us to combine together these two different things. Now if we wanted to have a little bit more free flow in our state that we were doing this in, we could use an or here instead, and or only requires one of these two things to be true.

[00:05:22]
So while this user may not be old enough, they do have a license, so this will print out true in this case because we're doing an or check here instead of an and check. And this works just like normal booleans because essentially it's just taking this two sets of booleans and combining it down into one set of booleans that'll either be true or false. Now both of these values were false, obviously it would not run the code inside of here because we don't have any of these evaluating to true, so they'll just completely skip over this section.

[00:05:47]
So we can do that with and or with the or syntax. You can also use the not symbol to reverse a condition just like we saw with the boolean. So here, if a user's logged in, we want to do something, but in our case we want to do something if they're not logged in. So if the user is not logged in, we will say please log in. So you'll often see this question mark syntax at the very start of a boolean variable, just saying, do the opposite of whatever that boolean variable is.

[00:06:12]
Now we also talked a little bit in JavaScript about truthy or falsy variables, and technically inside a JavaScript zero, an empty string, null, undefined, and not a number are all considered falsy. That means if I do a check that just says if 0, that's going to evaluate to false. You can see it doesn't run my code, but if I do something that's not falsy, for example, the value 1 is not falsy, you can see it runs my code.

[00:06:36]
So it's important to understand how falsy values work. For example, zero or an empty string evaluate to false when they get converted to a boolean. And we can kind of see an example of this here. I have an empty string and I'm checking if my empty string, this console.log will never run because empty strings are considered false. Now you can also nest together if statements as much as you want. Here is a rather complicated piece of code that's nesting multiple if statements together to check the weather to give us a certain statement.

[00:07:02]
So if the weather is sunny and if the temperature is greater than 70, we run this console lock. Now if the weather is sunny, we go inside these brackets again, and if the temperature is not greater than 70, well then we move down to this else statement to say it's sunny but a bit cold. Finally, if the weather is not equal to sunny, we skip all the way down here to this else condition to say it's not a sunny day.

[00:07:20]
Now this code can be a little bit confusing to understand because once you start nesting if statements, you need to remember what the first if statement said and then what the second if statement said, and so on, which makes it a lot of cognitive overhead to understand what's going on inside of this particular code. So I recommend not nesting your if statements unless you absolutely need to. There's obviously cases where it makes sense, but the less you nest your if statements, the better off your code will be.

[00:07:44]
And here is an example of using guard clauses, which is a technique inside of programming that allows you to write code without nesting if statements. The code up here is going to be exactly the same as the code down here, but one will use nested if statements and the other does not. So here you can see, first I'm checking to see if my weather is not equal to sunny. So essentially I do the opposite of my check that I originally had.

[00:08:04]
If the weather is not equal to sunny, well then I know I would end up inside this else condition down here. So I'm just going to log out, not a sunny day, and then usually you would do this inside of a function. I'm going to use the return keyword since I normally would be in a function to completely exit my function, which means none of the code down here runs. So once this first check evaluates, if the weather is not sunny, it'll log out and return.

[00:08:27]
Otherwise, if the weather is sunny, it completely skips this if statement. So now down here, I know my weather is sunny, so I can continue the rest of my if checks inside my code. So this is an alternative way of writing the exact same code. One uses if statements that are nested together, and the other uses something called guard clauses, which is just returning early from a function to make sure that we don't have to worry about nesting our if statements together.

[00:08:50]
You can do either one depending on personal preference, but I find, especially with more complicated code, guard clauses are much easier to read than nested if statements. Now you can also do something called the single line if statement. I would highly recommend not doing this for the most part, especially with more complicated code, but we'll just copy this over and I'll show you exactly what this does.

[00:09:09]
You can see if I expand my screen a little bit by getting rid of these comments. We are creating if and else conditions that actually don't have any curly brackets at all, and that's because kind of like with an arrow function, if you write your code directly on the same line with no curly brackets, JavaScript is just going to look at the next piece of code and it's going to run that inside your if if it is true.

[00:09:27]
So instead of having to put this in curly brackets, I can put it on the exact same line and JavaScript will just run that code for me. So if my age is greater than 18, greater than equal in our case, it'll log you can vote. Otherwise it'll move on to our else and run this particular code if it's not true. Otherwise it'll just skip off to the end of my program. For example, if I left this else statement off and I had my age not old enough, it would just skip to the very end of my program.

[00:09:50]
Now I recommend not really doing this too much. First of all, it's just harder to read, especially if you have else statements. I would never use single lines if I have both if and else statements because this code is just a pain to read. It's very condensed together, but also it's just hard enough to understand how if statements work on their own. So adding in this alternative way to write them just gets a little bit more confusing.

[00:10:10]
Pretty much the only time that I use a single line if statement is if I want to create a guard clause that just has a simple return after it. This is pretty much the only time I use these single line if statements. It's a personal preference. This isn't like an industry standard or anything, but this is just one way that I would use an if statement if I want to do like an early return and a single line if statement makes writing that code a little bit more concise than writing my code essentially like this.

[00:10:33]
They both do the exact same thing. One is slightly more condensed than the other one. Again, entirely personal preference, which one that you decide to do. So for this exercise, what we're going to do is we're going to try to write an if statement just to practice writing and they're quite important and common in code. So the first thing I want you to do is I want you to check if a person can get a driver's license.

[00:10:50]
That's the whole idea of this if statement. The requirements for them to get a driver's license is they must be 16 years old and they must have completed driver's ed, so they must be at least 16 and completed driver's ed. So if they can get a license, if they're both greater than 16 years old and have a completed driver's ed, you can print out, you can get your license. If they're too young, log out, you must be at least 16, and if they haven't completed driver's ed, you can log out, you need to complete driver's education.

[00:11:19]
So I'm just going to give you a second to try to actually do this and then we'll go through the solution. What we first need to do is I'll actually have two different solutions here as well if the age is less than 16, well, we're going to log out that you're not old enough, so you must be at least 16, else if we know if we get to this particular case that they were greater than 16 years old, greater than equal to.

[00:11:38]
So now we're going to check, do they have driver's education. If they don't have driver's education, we'll just log out, you need to complete driver's education. Finally, we know that if they pass both of these different checks that they are both greater than or equal to 16, and that they've completed driver's ed, so we can log out, you can get your license. Now the other way to do that is with guard clauses.

[00:11:57]
So here is a guard clause way of doing things if we were inside of a function. First we can check the age to make sure it's valid. If it's invalid, we log essentially hey, your age is invalid, and we return out. Next we can check to see if they have the correct driver's education. If they don't, give them an error warning or whatever and return from the statement. Finally, at the very end, we know that if we got past both of these different if checks that we are successfully able to get a license so we can, you know, log out, get a license or do whatever code we need to render their license for them.