if in deatil
Welcome back to our forth hour of the JavaScript basics. if you have a background in any programing language you will feel really comfortable really quickly. we are in our forth hour and as such we covered many of the core topics needed to understand in JavaScript from variable types, functions , objects and arrays through most of the core concepts needed to be covered in a basics title. With it there are few topics we need to dig a bit deeper into such as conditions more known as conditionals. In this section we will explore more in depth the way if statements work with there various configurations.
Video Transcript
00:01Welcome back to our fourth hour of JavaScript Basics, where we're trying to get through a lot of stuff really quickly.
00:08So if you have a background in any programming language, you'd feel really comfortable really quickly.
00:14If you don't, then I really recommend that you start off not in our JavaScript titles, but start with the developer basics,
00:21which is a 12-hour step-by-step layer-by-layer teaching you the foundations of the building blocks of any programming language.
00:28But back to our JavaScript titles, where in our fourth hour, we already covered quite a lot of topics,
00:33from basic variables to functions and objects and arrays, and we built up all of our different complex object types.
00:41And that's really all the complex data types that we'll really explore deeply in this title.
00:47But with it, there's a couple of stuff that we touched briefly, but didn't explore deeply into,
00:52which was conditions, or conditionals, or if statements, or switches.
00:57There's a lot of different names to conditions in code, and really, when it comes down to code and conditions,
01:02you saw, for example, when we wanted to highlight only the element that was actually in the right date range,
01:10that we dynamically changed the if conditions to change the opacity of the different layers.
01:17In our case, we did that quite quickly, so let's take a gander at how that works.
01:24We'll start off by going into our index file and updating its direction to go into our 05-conditions.js,
01:33which is right now an empty file, so we can start exploring.
01:37So we'll do a quick reminder of what we've seen so far.
01:40I'll just create a variable, and let's create an age variable, and let's say my age is 29.
01:46And then we're going to have a condition here.
01:49If my age is smaller than 30, then we'll do one thing.
01:55So if my age is smaller than 30, well, let's make it even a little bit more realistic.
02:00So if my age is lower than 16, then maybe we'll put in a message.
02:05So let's put in a message.
02:08So our message will be empty.
02:11And our message will be, let's change our message value to be if my age is lower than 18,
02:16you need your parents to approve your membership.
02:22Or something like that.
02:24I think that's 13, right?
02:27Else if, which we've seen the else if already, the else if condition.
02:33And by the way, one thing that I always do is always open your curly bracket
02:37and close your curly bracket.
02:39And start off with opening and closing your round brackets,
02:42because that way you'll make sure that you're not going to have issues
02:44of a mistaken parameter that's missing, or a mistaken character that's missing.
02:50All right, so now we know that if we got into this else condition,
02:54we must be over 13 years old.
02:56Thus, if we have to be over 13 years old,
02:58we don't have to ask if the age is greater than 13 or smaller than 18.
03:05And now, actually in our scenario, we want that range from 13 to 18.
03:09So to do that, all we have to do is check if our age is smaller or equal to 18,
03:14because we want to capture 18 as well.
03:17So if our age is smaller or equal to 18, our message will be,
03:20you are a teenager.
03:23All right?
03:26And we can do another else if, let's start with an else.
03:29So the else condition will be message, you are an adult,
03:35or at least that's what we think.
03:37Last but not least, let's also alert this out so we actually could see this.
03:43So to do that, I'm just going to create an alert
03:45and I'm going to send out our message.
03:47Obviously, you would never want this,
03:49you would never want to have an alert inside of a real application,
03:52because it's a bad user experience.
03:54Really, alerts are only for our examples here
03:57when we're using the alert function,
03:59which will tell us that I am an adult and I am an adult,
04:02and then that is true because I'm over the age of 13,
04:05I am over the age of 18, and in this else range.
04:11So let's continue a little bit on.
04:12Now, let's say, just for the sake of complexity,
04:16let's say that we wanted also to check to see if my age is exactly 19.
04:20How would I do that?
04:21So I'm going to put your else if age equals equals 19.
04:26Now, it's really important to put two equals.
04:28If you put only one equal there, you're actually assigning.
04:32Exact same thing as when we were assigning our age 29.
04:35So if I put your equal 19 and I would put your,
04:39you are an adult and your age is, and we run it again,
04:46you'll see that it's going to superimpose 19.
04:49Basically, this would always be true if we got there
04:52and it would automatically assign the value 19 into age,
04:56which is not what we want.
04:57We want to compare.
04:58So to compare that, we're going to put two equal signs.
05:01All right?
05:02All right, so now that we put two equal signs,
05:04we're going to see if we refresh our application.
05:06We're going to get an empty alert
05:08because there are actually no value that correlates to that 19 age.
05:12Now, what if we wanted to have our age is 19
05:16and let's add here a few more variables.
05:19So variable, second variable, next variable would be name.
05:23Let's have a variable that doesn't come,
05:26give us a different color.
05:27So we'll put your user name.
05:30I'm going to set my username to be Ben.
05:33What if I wanted to in my L?
05:35So first of all, if I'm under 18, we don't care about my name.
05:38But if I'm over 18, the first thing we want to make sure
05:42that if my age is 18, if my age is 19 and my name is Ben,
05:48then only then we're going to give a user a specific message.
05:52All right?
05:53So let's see how that would work.
05:54So first of all, what if we wanted to,
05:56and by the way, I'm doing this deliberately
05:58to showcase all the different variations of if statements.
06:02So, so far we worked on if statements
06:04that had only one parameter, one kind of condition in it.
06:07So the first condition was that our age is under 13.
06:10The next one was that our age was under or equal to 18,
06:14followed by that our age exactly equals 19, excuse me,
06:18and we said also that we have to make sure
06:20that we don't use one equal sign
06:22because then it's an assignment and not a condition.
06:25So in this case, I actually want to test to see if it's Ben,
06:29then we're going to give one message.
06:30If it's not Ben, then we're going to give
06:32a completely different message.
06:33So I'm going to put another if statement inside of our if,
06:37inside of our age parameter.
06:39And this will be if, if user name equals equals Ben.
06:47All right?
06:50If it is Ben, then we're going to put this right there.
06:56If not, we're going to put another message.
06:58So let's copy the exact same message
07:00and we'll just change the if the condition was met.
07:03So if Ben, you are an adult in your ages.
07:07So let's change this message from you are an adult
07:10to Ben, you are an adult, right?
07:12So Ben, you are an adult and your age is, all right?
07:17So let's give this a try and see if we get Ben your ages.
07:21And so far, no good.
07:23So let's see what's going on here, what's wrong.
07:25And the problem that's going on here
07:27is that we're not really 19 years old, right?
07:29So let's change our age to 19 so we could actually
07:32get inside of the right age bracket here
07:34because if we're not 19, all this would never happen.
07:37It would go through and actually never do anything.
07:41So let's run this again.
07:43Here you go.
07:44Ben, you are an adult and your age is 19.
07:46Beautiful.
07:47So we're showing a little bit of more complexity
07:50in our if statements.
07:51Let's take it one step further.
07:53So, so far we were using only one parameter at a time.
07:57We've learned also how to create an else statement
07:59that would capture everything else,
08:01such as in our case else message equals
08:06you are older than 19 years old, all right?
08:11So if we're older than 19, any age in this case
08:14could be 25 as well.
08:16And we'll see that we are older than 19 years old.
08:19Now, what if we needed this statement to be true
08:23not only to 19, but we wanted it to be true for 20 as well?
08:27And only, or let's say we wanted it to be true
08:30for 19, 20, and 21.
08:32So let's start with that assumption.
08:34First of all, I'm going to change this logic here
08:37and I'm going to change this.
08:38First, I'm going to comment off this line.
08:40So I'm going to copy this line, comment this one out,
08:43put here another else if.
08:46So this one is kind of ignored.
08:49And I'm going to change here.
08:50So first of all, if my age is 19,
08:52end end would be my sign.
08:54End end, my age, well, end end would be actually not right
08:59because we don't want to ask if I'm 19 and 20.
09:01We want to actually say if I'm 19 or 20.
09:05And or sign is two pipelines.
09:08Not one.
09:09Again, one would be an assignment.
09:11We want to put there two because it's a condition.
09:13So basically we're saying if I'm 19,
09:15if the age is 19 or the age is 20,
09:18then commends the rest of the logic in here.
09:21So let's give this a try.
09:22If I put here now 20 and I run this again,
09:28we'll see that Ben, you're an adult and your age is 20.
09:31Perfect.
09:32So far so good.
09:33By the way, you hear seagulls yapping in the background
09:36because I live really, really close to the water lines.
09:39I apologize to that.
09:40It's just a really hot day
09:41and I don't want to close my window.
09:44All right.
09:45So next on, let's create another else if
09:47and this time around we're going to use the end.
09:49So in this case around, we're going to ask if, else if,
09:53our age is greater than 25.
09:58End end, our age is smaller than 50.
10:03All right.
10:04So now we created a new type of logic instead of or.
10:07So now we're checking to see if our grouping,
10:09if our age is above 25 and lower than 50.
10:13In that case, then we want to put here a new message.
10:18Hey, your age group is 26 to 49.
10:23And notice how I'm saying 26 to 49 because I had here a greater than 25.
10:28That means it's not 25 and lesser than 50, which means not 50.
10:32If I wanted it to be 25 until 49, I would just do greater or equal.
10:37And then my value would be 25 to 49.
10:40So let's test it out and I'm going to put here 29 as my age.
10:43And let's see if we're going to be in this.
10:45Hey, your age group is 25 to 49.
10:50And surely it's true.
10:52Our age group is now 25 to 49.
10:55All right.
10:56So let's put here one more logic and one more question,
10:58which I'm going to ask you guys before I actually answer.
11:00The question is, my question would be,
11:02what age groups would be valid inside of this else statement?
11:06And the answer to that is very simple.
11:08If no condition, if this didn't come true and that didn't come true
11:12and this didn't and this didn't, only then this else would happen.
11:16When would that be?
11:17In our case, it would be any value.
11:19Basically, we have everything covered all the way to 20.
11:2321, 22, 23, and 24 are not captured here.
11:27That means this else statement would happen.
11:30And we could put this in this message.
11:32Your age is 21, 22, 23, 24, or you are older than 50.
11:47You are 50 or older.
11:52Because every other capturing message,
11:54every other possibility is captured.
11:58So if I put here an age that's not in that group,
12:00such as 21, and I run the application one more time,
12:04we'll see that I'm in that age group.
12:06And the same is true if I put an age group of 99 years old.
12:10If I put my age as 99, I'm again in that group of the uncaptured
12:14with the ones that went into the else statement.
12:17And that's really everything I have to say about if statements.
12:20And if we run through this down,
12:22we learned quite a lot of stuff in this video.
12:25From working with one parameter of saying lesser than,
12:28lesser than, lesser or equal than,
12:31equals, equals or, equals to another thing.
12:36We checked also to see how to create a nested if statement
12:40inside of our if statement.
12:41So only if our age is 19 or 20,
12:43we have here another if statement within it.
12:46We checked to see also not only ors,
12:49we looked at and as well.
12:51And last but not least,
12:52we captured the idea of what is left over
12:55and that value of that else conditions
12:58when we use the else condition.
13:00Now before we wrap the topic of if conditions,
13:02there's just two more things that I wanted to talk about.
13:05And by the way,
13:06although we are running through this now
13:08in like 10 minutes or so,
13:10we created a really, really in-depth training for this.
13:13So if you're one of our members on zero2geek.com,
13:16just go into the chapter smooth operator,
13:19conditionals one, conditionals two,
13:21and you'll actually discover three full hours
13:24where we go down all the basics that you really need to know
13:28in any programming language
13:29from down to default values and equality,
13:33rational operators and on and on and on.
13:36And we basically go through all the different variations
13:39and mainly all the different exceptions
13:41because although now we're working with set conditions,
13:44what happens if your variable is not set?
13:47What happens in all these different scenarios
13:49that we're not covering in this video
13:50because we're trying to get you running
13:52and working as quickly as possible?
13:54So it's just a side note and a reminder,
13:56if you're one of our members at zero2geek,
13:58I strongly encourage you to read up on that
14:00and watch those videos
14:01because that will make sure that you really get
14:04all the ins and outs of if conditions,
14:05which are so critical to your success as a developer.
14:08And as I was saying,
14:09from smooth operator all the way down to conditionals two
14:12is that topic.
14:13So far we covered smooth operator and if conditions
14:16and we really only seen a touch of those stuff.