(upbeat music)
- 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,
because you'll use it all the time.
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
a lid status, we would say, "Lid status: open" or "closed".
Now, the reason why it says "false" is because
in the code, we're just outputting
the value of this property inside the everydayPack object.
And it's a Boolean value so it will
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.
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 everydayPack, the object, and then look
at the lidOpen property, and we want to see
if that lidOpen 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 a 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 met, then we say "else".
Again, curly brackets wrapping around whatever
expressions happen if the condition is not met.
We 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 are looking for either
the condition to be true or false.
Now, in this particular circumstance,
because we are looking to see
if everyday backpack, lidOpen is true,
and it's a Boolean value, we don't actually have
to say equals true, we can just simply express
everyday backpack lidOpen, because if it's true,
we have everyday backpack lidOpen, and that will pass true.
If it says false, then it will pass false
and we go down to the else statements.
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 said "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.
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 shorthand 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, everydayPack.lidOpen.
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 output "open", otherwise output "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
everydayPack.lidOpen and I'll just
paste that ternary operator in.
So what'll happen now is when we get true,
this expression here, inside the template literal,
we are doing the same thing.
We're saying, "if everydayPack pack lid is open,
then output 'open', otherwise output 'closed'".
Save, go into the browser, look,
now it says "lid 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.
(upbeat music)