Check out a free preview of the full Getting Started with JavaScript, v2 course
The "If & Else" Lesson is part of the full, Getting Started with JavaScript, v2 course featured in this preview video. Here's what you'd learn in this lesson:
Kyle introduces control flow in JavaScript in the form of if and else statements, and explains the power this gives to the programmer. Kyle then runs a program with an if else statement.
Transcript from the "If & Else" Lesson
[00:00:00]
>> Kyle Simpson: All right. So, we wanna do something useful with our programs. We don't just wanna save the number 42, and then add something to it. We wanna actually do things. And the way we're gonna figure out how to do things is, we're gonna have to make decisions. We're gonna have to decide If the user has added some item to their shopping cart and they wanna check on the Amazon.com or whatever.
[00:00:21]
We're gonna have to decide if that item is in memory. I mean if that item is in inventory so that we can sell it to them. We're gonna have to make decisions. And the primary that we're gonna make a decision, there are other ways to do so. But one of the primary way to make a decision is called the if statement.
[00:00:39]
So here we see line 1. That should look familiar. We're making a var age = 39. That's an assignment statement, if you remember. But line 3 is slightly different because we have the if keyword, and then we have a set of parentheses there. That's what we call the if clause or the test clause.
[00:00:58]
And then we have some stuff that we're gonna do inside of those curly braces. You see there's a curly brace at the end of line 3 and then another one at the end of line 5. They kinda group together a set of statements that would be kinda like a paragraph In a novel that you were reading.
[00:01:15]
We would group a set of sentences together into a paragraph. We group a set of statements together with curly braces. So we're saying if age is greater than or equal to 18, then we want to do everything that's inside of these curly braces. So we need to figure out what the results of the operation age greater than or equal to 18 is.
[00:01:37]
And remember, greater than or equal, that's one of our comparison operators so it's gonna go make a decision. It's gonna go say, yes, it is greater than or equal to 18, in which case it gives us true or no it isn't, in which case it gives us false.
[00:01:51]
And the if statement then says, I'm only gonna do the work inside of the curly braces, If I got a true back. That’s how we make a decision. Now it’s sometimes the case that we only want to do one thing if some condition like this is true. We want to make a decision and then do something.
[00:02:09]
But a lot of times, it’s like we’ve got to choose between two different things. We either need to do this or we need to do that. And that's a slightly different variation on the if statement form called the if else. So if, looks exactly the same, lines one through three, you see the if.
[00:02:27]
You see an expression there, which in this case is a function call. That's gonna either return something that looks like true, or something that looks like false. If it returns as true, then we're gonna do the stuff on line two. But if it returned as false, immediately we're gonna skip over that stuff and go right to the else clause.
[00:02:47]
And the else clause then executes only if the test clause returned false. So now you see the basic building blocks for making decisions. We can either do something or not do anything at all. Or in this case, as we see in this slide we can do one thing or do another thing depending upon some condition.
[00:03:09]
And you can chain these things. You can nest these and put these things together. Kind of like when you build with legos. You can put all of these pieces together and you start to build up more and more complex things in your application. Okay, let's test out how that if L stuff works.
[00:03:26]
Here, I've changed the code just a little bit. Instead of calling functions, I'm using a Boolean variable here. But if I run this code, you're going to see because enrolled as is enrolled is true. It's going to take the class. But if we change that to false, now all of a sudden it's gonna print a different message which is enroll first.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops