JavaScript 101 is a series of instructional videos given by DevMountain Web Development Instructors. Click here to see the entire video series.
Conditionals are code that tells the computer to look for specific conditions before they execute a different piece of code. This gives you the ability to code logical decisions in your applications. In this video, we’ll define what conditionals are and how to apply them throughout your code.
Video Transcription
Conditionals are code that tells the computer to look for specific conditions before they execute a different piece of code. This gives us the ability to code logical decisions into our applications. When you give a computer a conditional, you need to give it the specific condition to watch.
These conditions can be anything that you want. The computer will check if the condition is true and then execute the code. If it finds the condition is false, it will skip the code. Basically, we’re giving the computer some rules to follow. You’re telling it when it can and can’t do something. Conditionals can be as simple as a single rule or they can be more complex with multiple rules forming a group.
The Single Rule vs. Multiple Rules
The single-rule example would be something as basic as if x is true, then do y. In a multi-group scenario, the structure might be more like if a and b, but not c, then do f.
Conditionals are the primary way that we control the flow of code in our application. Without conditionals, we would be stuck doing the same thing over and over again like a little music box stuck on repeat. With conditionals, we can write code that is empowered to do different things in different scenarios.
Options and Logic
We can give it different options and logic that it can then choose from depending on the situation and how the user’s using our code. A real-world example would be trying to cross the street at a busy intersection. There’s probably gonna be a light at the other side of the street telling you when it’s safe to cross. If you see the little man, you know it’s safe to cross. If you see the stop hand, you know that you should pause and wait until you see the man. Otherwise, you could get hit by a car.
Conditionals are just like that. We wanna give the computer a set of rules to make smarter decisions in our code. Let’s talk about why these conditionals are useful while we’re programming. When a computer runs code, it reads everything in order and does exactly what you tell it. It’s the only thing a computer really knows how to do, but there’s many scenarios where you may want your computer to run only a few pieces of code. You might want it to choose between different parts of a code or skip over some code if the conditions aren’t right.
An Example of Using Conditionals
For example, a computer would use conditionals when determining if a user could log in to a website. If the user provides the right password, they are allowed to log in. If the user provides an incorrect password, they are locked out. It also plays a part in why you don’t see everybody’s posts on Facebook and only your friends. There is a condition somewhere determining whether or not you are friends with a person and if you are allowed to see their posts.
Using conditionals is gonna take some practice to really understand them, so let’s go move on to our next exercise and dive into some code.
Practice
Conditionals are our first major mechanism to control code flow in our applications. Let’s look at what I mean by that. Let’s take a common example: getting a driver’s license. If we have users who would like to get a driver’s license, they are gonna be all sorts of ages. A 10-year-old might want their driver’s license, but they’re not old enough where an 18-year-old definitely is.
So, let’s cut up a fictional program. I’m going to create a variable called “age” and we’ll just set that to 14 for now. This variable is going to represent the age of the user coming into our website. In a full-blown application, we’d probably ask them to enter their age and then we would work with it here in the code. We’re going to assume they already gave it to us and we have it here. Now, I need to decide what I’m going to tell the user about getting their driver’s license. Are they old enough or are they not old enough?
And I can do that with an “if” statement. If, an “if” statement starts with the “if” keyword like this. You’ll notice the purple color, letting me know that this is a reserved keyword. Dark blue here is a reserved keyword that is a data storage, whereas purple in this color scheme is used to indicate a mechanism or something that’s doing, it’s acting. In this case, “if” is acting like a gateway. The next thing I add into an “if” statement is a set of parenthesis and then a set of curly braces.
Now, here is where the condition needs to go and then inside of here is where the code needs to go. By putting our condition inside the parenthesis, the “if” statement will run our code and determine if that statement is true or false. If that statement is true, then it will run the code. If the statement is false, it will skip the code. Let’s use the age and see how this plays out.
I’m gonna say if age is greater than or equal to 16, because that is the age in the United States, you need to be to get a driver’s license. Then, let’s console log, you are old enough to take the test. Teenagers around the nation rejoice. I’m gonna press F5 to run my code and as I do that, you will see nothing got console logged. This is empty down here. Just to make sure that everything is working correctly, I’m gonna set this age to be greater than or equal to 16, press F5 again and this time, we see you are old enough to take the test.
So, what is happening here is when I have an age less than 16, what is inside the curly braces, this code is not run, because this is a false statement. If this feels a little fuzzy to you, go back and watch the operators videos again where we talked about how operators are turned into a true or false value based on whether or not the statement passes or fails.
This is a basic if statement. This is neat, but it’s not enough to let us adequately represent what we want our app to do. Not only do we want to tell 16 year olds they’re old enough, we would want to tell anyone younger than that that they are not old enough. So, if statements come with a complementary keyword called the “else” keyword. With the else keyword, I do not provide any other parenthesis, but I do provide the curly braces and I will place code inside of here.
This single condition of the if is enough to trigger both the code inside the if and the code inside of the else. If our condition is true, it runs the code inside of my if. If the condition is false, it runs the code inside of here. So, if you are not old enough, if this failed and you are not older than 16 then we need to console log “you are too young to take the test.” I’m gonna hit F5 again, and we should see “You are too young to take the test.”
If a 16-year-old takes the test, then we are old enough to take the test. You’re gonna see if and else statements a lot in code, but we’re not quite done yet.
There’s a third aspect to this that we need to talk about. In this case here, we have assumed that 16 is the age to get a driver’s license. It happens to be far more complex in the United States and some states, you have to be 16 and a half, in some states, you can be 15 and a half and in some states, you can be 15. I’m only gonna focus on a couple states where you can be 15 to get your license.
There’s a third way that we can control flow in an if, else block and that is with an if, else statement. The if, else statement, not if, else … else, if, an else, if statement. The else, if statement has parenthesis just like an if statement, it has an else like an else statement and it works somewhere in the middle. The code will fall through what we’ve set up here looking at each condition in order. If this condition is true, it runs this code and then it stops. If this condition is false, it will move on to the next else in the chain.
But it notices oh, this else is catching the leftovers of the if statement, but it is also adding it’s own if statement. If this condition is true, run this code. If the second condition is false, it gets caught by the next else statement and runs the code down below. So, here we need to put this condition in here to adequately represent the states where you can get your license at 15. Those happen to be Idaho and Montana, so if age is greater than or equal to 15, and state is equal to Idaho or state is equal to Montana.
I did lowercase for now just for the simplicity of checking things. Normally, when you’re comparing a string, case matters. An uppercase Idaho versus a lowercase Idaho are going to be evaluated differently. For now, let’s set the state equal to 15, set the age equal to 15 and the state equal to Idaho like so. And now let’s add our console log that says, “You can take the test in your home state.” It’s a little different than what’s above. That way, we’re gonna know we definitely went into this else, if statement and I’m gonna press F5 and we still see that “You are too young to take the test.”
And that is because I did the exact error we just talked about, we’ll show this. Capital Idaho is not equal to lowercase Idaho. If I change this to all lowercase Idaho and press F5, I should see “You can take the test in your home state.” Which is what we see down here in the console. Another great way to evaluate this is to use break points. When I use F5, I can click and add this red dot off to the side before I do so. When I do so and press F5, my code is actually going to pause at that exact moment.
As I pause, I can hover over my different variables and see their values. I have age of 15, state is undefined, because the breakpoint pauses before the line of code is run. Not only can I pause and look around, I can use these controls up top to either resume running, to continue on to the next line of code or to do some special stuff with functions that we’re not gonna dive into right now.
I’m going to click “step over” and that takes me to the next line of code. I can now hover over state and it shows me state as Idaho and age is 15. I can also hover over an expression like this and I can do debug evaluate and it’s going to throw it down here in the console for me and show me what the value it’s going to give me. If I do this age is greater than or equal to 16, that’s gonna give me a value of false. If this is false, it skips this line of code, so when I click our, go to the next line function, it’s gonna move down here to the else, if.
I can now highlight this whole statement if I wanted and do debug evaluate, right click debug evaluate. It’s gonna run that whole thing and I’m gonna get true. If I needed to dive in more fine grain, I could select only a part of it to start understanding different parts of my if statement in smaller pieces.
Now that I know that right here, sorry … age 15, state of Idaho evaluates as true, when I click the next line, I expect it to go into this console log, it does and I was able to use this stepper, the code stepper as it is called, to better understand my code and code flow. This can be a huge tool as you’re learning to code and diving in. This wraps up conditionals with a little bonus talking about the code stepper tool.
[cta id=”589″ vid=”0″]
