Transcripted Summary
We've covered a lot of the fundamentals of programming with JavaScript, such as data types, arrays, objects, and functions.
While there is so much more to learn with JavaScript, there's one more topic that we should cover in the fundamentals - one that'll give you a little bit more control over how you build your applications. Let's dive in.
When you are writing code, your code executes from the top down, line by line.
But in reality, we see that we usually need to make decisions based on some conditions. Let me explain.
Before going outside, you'd like to check the weather. But why do you do that?
You check the weather, because you want to dress appropriately for going outside.
If it's cold outside, you grab a jacket or a sweater.
If it's warm outside, you might grab your sunglasses and a water bottle.
We need to be able to perform specific actions based on the information you have access to.
In programming, we do this with control structures.
We're going to be exploring if and else.
These allow you to perform specific actions if a condition is true, and have a different path of action otherwise - this is the else.
Now let's break that down just a bit more.
The decision that we're talking about is the code that will run next.
For example, let's take an app that takes attendance to an event.
The maximum number of people that can attend it - let's say 15.
We can write a code like this in the file 06-if-else.js:
let attendance = 14;
if (attendance === 15) {
console.log("We're at full capacity");
}
Let's run through how this works. With our variable attendance defined, we can give it a value of, say, 14.
Let's see what the code outputs. We'll save it, go to the browser, open up the console and run this code.
There's nothing being output here. Let's set the value of attendance to 15.
Now, let's see what the code outputs.
I like that energy. Look at what we're doing here.
See, "We're at full capacity", which means that we've satisfied our condition.
Now, what if we want to do something if the attendance is less than 15?
Because right now, if the attendance is less than 15 or greater than 15, we actually don't have anything output.
Let's have a look. So what can we do?
Well, there's another component to the decision tree that we are creating.
Let's look at else.
let attendance = 14;
if (attendance === 15) {
console.log("We're at full capacity");
} else {
console.log("We have room");
}
Okay, next, you see that console.log "We have room", if the attendance is not 15.
So this is what we will call an else condition - where it is - otherwise, this is what we see.
This is what we call our else condition.
If the attendance is 15, we'll output, "We're at full capacity", but if it's anything else, we're going to see, "We have room".
Let's try this in action. I'll change attendance to 16.
You see, "We have room", but that's actually not true because in our initial condition, we said, what if the attendance is 15? That's full capacity.
So if you're greater than 15, it shouldn't say, "We have room."
What will it say if it's less than 15? If attendance is 14 it still says, "We have room."
Despite the fact that we have some more work to do, we've made it really far. Quit playing.
Here's what I want you to do. I want you to get that left hand up. I want to give yourself a high five right now.
You hear this? That's the sign of me giving you a high five for being awesome!
Now that we know how the code is working so far, if the number is anything other than 15, we output... actually the wrong message.
Let's make our condition more specific. To do that, we'll have to incorporate some new tools.
When you see the triple equals or three equal signs ===, then what that means is absolutely equals.
But we can also use greater than, and less than, too.
And the best thing about this is that we could have multiple decision points with different conditions.
Let's see how that looks.
First, we'll say if attendance is less than 15, we will say, "We have room."
Then we'll add a special condition called an else if.
So if the else by itself is just an otherwise, the else if allows us to say, "Okay, if it's not the first thing, maybe it could be the second thing."
So we could still be specific with our conditions.
And we can add one more condition.
So if we're less than or greater than, there's one more condition where we can be at capacity, which is equal to, so we'll just do an else.
let attendance = 14;
if (attendance < 15) {
console.log("We have room");
} else if (attendance > 15) {
console.log("We're over capacity");
} else {
console.log("We're at full capacity");
}
Okay. Let's save this and run it.
You could see we have room at 14. So what happens when we're at 15?
We're at full capacity. Now, what about if we have 16? Let's save it.
We're over capacity.
So we have - if attendance is less than 15, we have one set of code that's going to run.
If attendance is greater than 15, we have a different set of code that's going to run.
And then finally, if it's neither of those, which means if it's not less than and it's not greater than, that means it's equal - well, that's where we're going to have our console.log, "We have full capacity".
We just introduced something called else if, and that allows us to have decisions that are linked, but separate.
Here's an example...
We only get to the else if condition when the condition before it fails, or meaning it evaluates to false.
Then we try the second condition. That condition happens to be true for our case, and then we skip the else.
When you're doing if else, if else, you can have one if, multiple else ifs, and a single else, and you go from the top all the way down. And it'll try each condition until it either evaluates to true or finally gets to the else.
I hope you've enjoyed this look at making decisions with if else and else if.
Come back to the next video, where we can talk about more complex conditions. Stay tuned and stay awesome. We'll see you in the next one.
Resources
Quiz
The quiz for this chapter can be found in section 5.2
