This course has been updated! We now recommend you take the Complete Intro to Web Development, v3 course.

Check out a free preview of the full Introduction to Web Development course:
The "JavaScript If Statements" Lesson is part of the full, Introduction to Web Development course featured in this preview video. Here's what you'd learn in this lesson:

If statements allow developers to add conditions in their JavaScript code. This allows the program to make decisions and execute different lines of code given a specific condition. For more complex conditions, “else if” statements can be appended.

Get Unlimited Access Now

Transcript from the "JavaScript If Statements" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Nina Zakharenko: So far, we've been writing a lot of lines of code, and all of them have just been getting executed one by one by one. So an if statement is a way for JavaScript to decide what piece of code it wants to execute, depending on which condition is true.

[00:00:23] So here's a super simple example. The anatomy of an if statement is lowered if, followed by open parentheses, a condition which most evaluate to a Boolean expression, closing parentheses, and then open bracket, the code that will be executed only if that condition is met, and closing bracket. So let's try this out.

[00:00:54]
>> Nina Zakharenko: We're gonna make a variable called number of apples. We're gonna set it to 5. And we're gonna write our first if statement.
>> Nina Zakharenko: So let's say, if we have more than three apples, and if you're using the current developer console and you wanna continue on line by line without having, it just evaluate when you press Enter, press Shift and Enter and it will go to the next line.

[00:01:32]
>> Nina Zakharenko: So if we have more than three apples, that's console.log and message to ourselves say, I'm apple rich!.
>> Nina Zakharenko: So if we run it, we will see that I'm really, really apple rich. I have all of five apples. If I go ahead and change this variable, say, I make it 1, and I rerun my if statement, you guys can do that by pressing up until you get to the line of code which you wanna rerun, nothing happens because I'm apple poor.

[00:02:22]
>> Nina Zakharenko: So there's ways to add on to one if statement. The first way to do it is an else. So if your condition is not met, you always run the line of code that's in the else statement. There's no other path of execution so one or the other line of code will get wrong.

[00:02:45] There's also something called an else if and you can have as many of those in between your if and your else as you want and those are subconditions. So let's do an exercise.
>> Nina Zakharenko: I hope you guys like fruits. Brian was tupperware and I'm fruits, so.
>> Students: [LAUGH]

[00:03:09]
>> Nina Zakharenko: Here we have this long if, else if, and else statement. Let's just go over the anatomy of this really quickly. So the if statement stays in the same format. The else if must be on the line after it. And besides for adding an else in front, the format is the same, the else is little bit different.

[00:03:34] There is no condition for it, no parentheses. Because it will always get run. So we have three conditions here. One for if we have more than zero apples, one if we have less than three apples, and the other one is like we're out. So let's try and change this variable and see how our path of execution changes.

[00:04:08] So if I have -99 apples, everything's the same. If I have 2 apples, someone tell me which of these conditions will get executed?
>> Nina Zakharenko: What's that?
>> Students: [CROSSTALK]
>> Nina Zakharenko: Yep, an apple.
>> Nina Zakharenko: We'll also print Go to the store. Let's run this. I'm sorry. We won't print go to the store because we're in an else if.

[00:04:51] If we change our number to a value that's greater than three, we will print.
>> Male Student 1: [INAUDIBLE]
>> Nina Zakharenko: Yeah, let's change this.
>> Female Student 1: It looks like if you had it set to two, if you had five set to two, then it's going through and reading the conditions and it just happened to come to eat an apple first, even though it meant both conditions, right?

[00:05:20]
>> Nina Zakharenko: Yeah, so if I go and I change this, let's say less than five, even though these two things conflict, it'll go to this one first.
>> Male Student 1: Does JavaScript have the concept of a switch statement?
>> Male Student 2: It does.
>> Nina Zakharenko: Does this make sense to everyone?
>> Female Student 1: Apples are greater than five.

[00:05:53] It makes more sense.
>> Nina Zakharenko: Okay.
>> Nina Zakharenko: It's not greater than five, it's not less than three so we've got no apples left. So it's a nice subtle logic bug
>> Nina Zakharenko: And in order to fix this, we would put equals here.
>> Nina Zakharenko: So that should fix our, oops.
>> Female Student 1: Four is sitting right in between three and five, so [INAUDIBLE]

[00:06:38]
>> Nina Zakharenko: This will print Go to the store.