Introducing If Statements0:00
Okay, let's take a look at if statements, which are also known as conditionals. If statements allow you to execute a block of code based on some sort of condition. So the condition evaluates to a boolean, so either true or false. Now if you remember in the video we did on booleans, we looked at the different types of operators that result in a boolean. So things like greater than or less than, we looked at strict versus loose equality, we looked at logical operators, and truthy versus falsy. So make sure to re-watch that video if you don't remember, as booleans are directly related to using if statements. So the syntax for an if statement is to use the if keyword, and then within brackets we
to using if statements. So the syntax for an if statement is to use the if keyword, and then within brackets we have our condition. So this evaluates to either true or false. So for now we can just hard code true or false in here. And then within our curly braces, whatever is in here will get executed, because this is true. But for now let's just console.log this is the true part of the if statement. Let's save that, and we do see it in our console.log. And if I were to change this to false, then we wouldn't see that.
Age-Based Condition Example0:57
Let's save that, and we do see it in our console.log. And if I were to change this to false, then we wouldn't see that. Let's take a look at a few examples here. So how about we make two variables, one for the age of a person, let's say they're 15, and how about we add one for the legal drinking age. So drinkingAge, and in Canada it's 19 I believe. So for our condition, let's say if age is greater than or equal to drinkingAge, then how about we console.log, I can drink beer. And if we save that, we get nothing in the console, because in this case, this condition is false.
Adding Else Branch1:34
And if we save that, we get nothing in the console, because in this case, this condition is false. That's because 15 is not greater than or equal to 19, it's less than. But if I were to change the age here, let's say 22, this condition is now true. So we should see the code in here. So in this case, it should console.log, I can drink beer. And it does. Now, what if we wanted to execute code for the false case? So in this case, when age is less than drinking age, so we can use the else keyword. And there's no condition here, because it's just the opposite of this, we can add our
So in this case, when age is less than drinkingAge, so we can use the else keyword. And there's no condition here, because it's just the opposite of this, we can add our {}. And how about we console.log, I cannot drink alcohol yet. Okay, let's save that. And we still get I can drink beer. But if I change it back to less than 19, then we should see I cannot drink alcohol yet. Okay. And technically speaking, you can get rid of the {} here, but only if you have one line of code to execute.
And technically speaking, you can get rid of the curly braces here, but only if you have one line of code to execute. So if I were to get rid of these, it will work. So let's try that. Still works. And if you want, you can even put it on one line. And that still works. But generally speaking, for readability, it's better to add the curly braces. Let me just put that back. And you tend to see it like this, where the opening curly brace is on the same line as
Password Equality Check2:54
Let me just put that back. And you tend to see it like this, where the opening curly brace is on the same line as the if statement in the condition, and then it closes down here. And if you have an else case, it starts here, where the curly brace ends here. But even if you don't write it like that, it should still work. Okay, let's take a look at a few more examples here. Let's grab this entire if else block. And let's just change it up a bit. So let's add some variables here. Let's say $passwordTypedIn equals somePassword.
So let's add some variables here. Let's say $passwordTypedIn equals $somePassword. And let's make another variable. Actually, we can make this const, actually doesn't matter. Because I'll be changing them directly. And let's say $actualPassword for this one. And the $actualPassword is going to be $password. Okay. And for our condition, we want to check if the $passwordTypedIn is equal to the $actualPassword.
And for our condition, we want to check if the $password typed in is equal to the actual $actualPassword. So let's remove this. And let's say if the $password typed in is equal to, and I'll use the === here for strict equality. So again, it checks the value and the type, let's check against the actual $actualPassword. And if it's true, let's just console.log, 'correct password, logging you in'. And if it's not true, we'll just say 'password incorrect. Please try again'. And in this case, the $passwords are not the same.
So again, I will grab this if else block, let's put it down here, but we'll have some new variables in here. So how about we have a variable for the month, let's say October. And how about the actual day? So const day, say 31st. And for this example, I want to check if it's Halloween. So the condition is going to be two checks. So we have two conditions. So we have to check the month. So if the month has to be October, again, I'll use triple equals here.
So we have to check the month. So if the month has to be October, again, I'll use === here. But we use the and logical operator, so &&. And we also have to check if the day is 31. So if these two conditions are true, then it is Halloween. So we can just console.log, it is Halloween. But if it's not, we can just say, it is not Halloween. And for the values of our two variables, it is Halloween. So we should get that message. We do if I change this to September, that will not work, or it will work, but we get.
Else-If Grade Ladder6:32
And I'll just paste in a comment here, which has the letter grading system. So anything above 80 is an A, 70 to 80 is a B, 60 to 70 is a C, 50 to 60 is a D, and less than 50 is an F or a fail. So let's see if we can work with this. So let's start with a variable for our grade. Let's say 72 for now. And we just want to print out the letterGrade here. So based on this chart here, or this data. So if the grade is greater than or equal to 80, then that's an A. So let's console.log, let's say, letterGrade A.
So the syntax for that, let me just move this up, is else if, and we also need a condition for this. And in this case, let's handle the B grade. So grade is greater than or equal to 70. And then we'll get letter grade B. So let's just copy and paste that in here. Letter grade B. We can do the same for letter grade C and D. And then everything else will be in F. So let's just do that. This will be greater than or equal to 60. This will be C. Let's do it for D as well. So this will be greater than or equal to 50.
Using Ternaries9:35
And after it does, it executes that code and then stops checking the rest of the conditions. So in this case, it sees that this condition is true. It executes the code within these curly braces. And then it doesn't continue on, even though these conditions are true as well. And the last thing I want to take a look at is using a ternary, which is a short form of the if-else. So let's go down here. Let's say a ternary. And let me just grab some code up here. So remember, we have age and drinkingAge. I just want to put this down here so you can see it as I'm converting it over to a ternary.
So remember, we have age and drinkingAge. I just want to put this down here so you can see it as I'm converting it over to a ternary. And we'll just comment it out. So let's just comment this out. So an alternate way of writing this would be to use a ternary. Actually, I'll leave it in for now, just so it's colored. So again, this is a short form of if-else. And the way you would write it is to first take the condition. In this case, the condition is age is greater than or equal to drinkingAge. So let's add that.
In this case, the condition is age is greater than or equal to drinkingAge. So let's add that. And then let's add a question mark. And then next is everything within the true case. So in this case, everything within these curly braces. So let's console.log, I can drink beer. Okay. And we don't need the semicolon here. And then for the else case, we can add a colon. And then we can just grab this and put it there.
And then for the else case, we can add a colon. And then we can just grab this and put it there. And this will be the equivalent of this. But this is called a ternary. Again, the short form for an if-else. So let me just comment this out now. And we should still get the same as what we have up here. So let's save this. Okay, so we get the same as what we have up here. But if I change the age, that should still work as well.
Okay, so we get the same as what we have up here. But if I change the age, that should still work as well. So 22. And it does. Now, there's an even shorter way of writing this, which I'll show you here. But let's take it in steps. So again, I'll write it using if statements first. So in this case, I'm going to use let. Let's define a variable named canIdrinkMessage. And it's empty to start.
Let's define a variable named canIdrinkMessage. And it's empty to start. And we'll use if. It's basically the same as this. So I'll just copy this. We'll paste this in. Let's comment it back in. But instead of console.log, we will assign the variable to an actual message. So in this case, instead of console.log, let's say canIdrinkMessage is equal to this.
So in this case, instead of console.log, let's say this canIdrinkMessage is equal to this. And same for the else case. So let me just change that. And at this point, canIdrinkMessage will either be 'I can drink beer', or 'I cannot drink alcohol yet'. So let's just console.log that. console.log canIdrinkMessage. So now we should have the same thing three times. Because we have the one above, we have this one, and we have this one.
So now we should have the same thing three times. Because we have the one above, we have this one, and we have this one. So let's save that. Okay, so we have this, this, and this. But again, we can shorten this using ternaries. And this is where I tend to use it, where I'm assigning a variable. So let's try that out. Let's just get rid of this for now. And also this. So we can just define it directly in here and use a ternary.
And also this. So we can just define it directly in here and use a ternary. And this might seem weird at first. As a beginner, I think it's just better to write it out directly like this. But as you gain more experience, you might find that ternaries are useful in some cases. So let's define the same variable. So let canIdrinkMessage =, and now we'll use a ternary. So let's grab the condition. So it's age is greaterThanOrEqualTo drinkingAge. And if it's true, we can assign it with this string.
Okay. And this should result in the same thing. And if you wanted to, instead of using this $variable, we can just grab the value of the $variable and just use it directly within the console.log. So let's just leave this in here as a comment. But we will paste this in here, and that should be the same. And it is called. So again, a ternary is a short form of writing an if else. Like I said, if you're just starting out, I think it's better to just use if else. But as you gain more experience, you might start making use of ternaries.
