- [Narrator] Much of programming centers
around conditional logic statements.
If this condition is true, then do this.
If not, then do the other thing.
The if else statement is the most basic
and probably most used conditional statement in JavaScript
and most other programming languages.
So let's take a closer look at how this works
'cause you'll use it all the time.
In the exercise files for this movie,
I've brought back our backpack packer example.
Now, if we look at it in the browser,
there's one thing in this example
that's really irking me and it's down here at the bottom.
It says lid status: false.
This makes sense if you know what it means,
but it's not really
the way we would communicate the lid status.
We would say lid status open or closed, right?
Now, the reason why it says false is because in the code
we're just outputting the value of this property
inside the everyday pack object.
And it's a Boolean value, so it'll either be true or false.
So I want to output some human readable text here instead.
And for that, I'm going to use a conditional statement.
Now, before we put it into the actual code,
let me just show you
how a conditional statement works down here.
So we'll set up a new conditional statement, if.
The conditional statement tests to see
whether a condition is true or false,
and it can be any expression that we're testing here,
it just needs to return either true or false.
So in our case, we want to look at everyday pack,
the object, and then look at the lid open property.
And we want to see if that lid open property is equal to true.
If that's the case, then everything
inside the curly bracket will happen.
And here we can place any expression, a function,
whatever we want.
So in our case, we just want our console log out.
Lid is open.
Now, if we want to,
we can also append an else statement here.
This is entirely optional,
but if we want to have something else happen,
if the statement is not meant,
then we say else.
Again, curly brackets wrapping around
whatever expressions happen if the condition is not met.
Let me say else, console log, lid is closed.
Sad face.
Save that, go check out the console.
And here you'll see it says lid is closed
because the value is currently false.
So if we go up and change the value
in our object to true, and check again,
it'll now say lid is open because it's now true.
This is a really basic conditional statement.
And it perfectly demonstrates
how conditional statements work.
We are testing for a condition, and then we're looking
for either the condition to be true or false.
Now, in this particular circumstance,
because we are looking to see if everyday backpack
lid open is true and it's a Boolean value,
we don't actually have to say equals true.
We can just simply express everyday backpack lid open
because if it's true, we have everyday backpack lid open,
and that will pass true.
If it says false, then it will pass false
and we go down to the L statement.
If I save this, you can see everything is still working.
This is only because
we are using a Boolean statement though.
If we were testing for something like a string match
to see if a string matches, this would not work
because any time there is a string, it would pass as true.
So if, for example, I said up here, it's not true like this
but it's a string that says true and save it.
It's still true because there is a value sitting there.
But if I took the value away and set undefined,
it would be false.
And if I said null,
it would also be false because these aren't real values.
So if I want to match a string, like true,
I have to make sure I actually do a proper comparison.
And in that case, I need to say equals equals equals true.
That way, it'll only mark true
if it is actually the same string, otherwise.
So if I test for, let's say true
with a capitalized T, it'll say false, right?
So that's how the conditional statement works.
Now, in our circumstance,
because we are doing an if else statement
and we want to put it into some other code,
we can also use a short hand version of this
called a ternary operator.
The ternary operator looks like this.
I'll say console log.
And then first I put out the condition, in this case,
everyday pack lid open.
Then I say, if that is true with a question mark,
then output open else using a colon, closed.
So if everyday backpack lid is open, then I would put open.
Otherwise I'll put closed.
Save that.
Now it says open.
If I scroll up and change this value to false,
it says closed.
All right, so now we have the output we want
and we need to put it into our template literal here.
So I'll scroll all the way to the bottom again
and just grab this, copy it,
and then find the place where I have everyday pack lid open.
And I'll just paste that ternary operator in.
So what will happen now is,
when we get to this expression here,
inside the template literal, we are doing the same thing.
We're saying if everyday pack pack lid is open,
then output open, otherwise output closed.
Save, go into the browser.
Look, now it says lead status closed.
And if I scroll up to the top here
and change it to true and save, now it says open.
So there you have it.
Conditional statements working through ternary operators.