Original subtitles

So, we already saw two ways

of writing conditionals.

The regular if/else statement and the switch statement.

But there is another one.

And that is the conditional operator.

And this one is actually really nice.

So let's check it out.

So the conditional operator allows us

to write something similar to an if/else statement

but all in one line.

So let's again start by defining an age variable.

And this time I'm saying it to 23.

And now, let's write, age, greater or equal 18.

So this is your or test to check whether the age is

at least 18.

So basically if the person is of full age.

And then after this condition,

we use a question mark.

And then here we write essentially or if block.

So that's the code that we want to be executed

in case that disc condition here is true.

So let's say console dot log,

"I like to drink wine."

Let's again add a nice emoji here.

So basically if the person is of full age,

they are allowed to drink wine.

In this if blog, so to say,

we can only have essentially one line of code.

So only one thing can be done if this condition is true.

Then we also need basically a mandatory else block.

And that goes after this colon.

Let's just copy,

this code,

and say, "I like to drink water."

Okay, and that's actually it.

So let's check the result and then analyze this a bit more.

So in fact what gets logged to the console is,

"I like to drink wine."

And that's because the age is 23.

And so this condition is true.

Right.

And this means that this code here is gonna be executed

and this one is not.

So the second part here,

which is essentially the else part.

Now if we were 15,

then of course the second part is executed.

Okay.

So that's essentially writing an if/else statement

all in one line.

But instead of using a statement,

we use this conditional operator.

And the conditional operator is also called

the ternary operator.

Because it has three parts.

Unlike other operators.

For example the plus operator has only two parts.

For example, one plus two.

But this one has three parts,

so the condition,

then the if part,

and then the else part.

Okay, now the conditional operator is in fact an operator,

just as the name says.

And remember that an operator always produces a value.

So in other words an operator is an expression, right.

So what this means is that if we have a value,

we can then assign that value to a variable.

So with this we can make the ternary operator really useful

to basically conditionally declare variables.

So, what we did here is not so much used indeed.

Instead we do it more like this.

So we would still test for this condition.

So checking if the person is of full age.

And if that's true then all we want is essentially

to return this.

And if not we, only want this.

Okay.

And so again, this whole operator here is now an expression.

And an expression produces a value.

And so now, we can go ahead and store that value

into a variable.

So let's call that "Drink"

and then we can log this drink

to the console.

And let's comment out this part here.

And check.

And indeed we get wine as we declared up here.

Great.

So drink is now really defined conditionally,

based on this condition.

And all in one simple line.

So without the conditional operator,

we would have to use and if/else statement

and with that this wouldn't be so easy.

Remember, when we want to declare a variable

inside of an if or an else blog,

we need to first declare that variable outside.

Let's actually do that.

So simply call it "drink2"

and then we would say, if the age is at least 18,

then "drink2"...

is gonna be wine.

Just grab that here.

Or else...

"drink2" is gonna be this water here.

Okay.

And again we need to define a "drink2" variable

outside of the if and the else blogs,

because any variable that we define inside of a blog,

is not available outside.

So we declared a variable here

and then reassign it inside of the blogs.

So just to make sure it worked,

let's log this one here as well.

We really just did this for the sake of comparison.

Okay, just so you can see the tremendous difference

that the ternary operator introduces here in our code.

So if you ask me,

this one here is a lot easier to understand

and a lot easier to write.

Right.

So just changing this to something else here.

And yeah, in both cases we get water back.

So using the ternary operator we were really able

to transform this big block of code

all into one small operation like this.

And this is gonna be useful in so many cases.

And we will really take advantage of this

throughout the rest of the entire course.

And now we can take it even further.

Because since the ternary operator is really an expression,

we can now use it, for example, in a template literal.

So unlike a normal if/else statement,

like we tried and failed in the last lecture.

Remember?

It was here where I tried to insert the if statement here

and of course it didn't work.

But using the ternary operator, which produces a value,

we can actually have conditionals

inside of a template literal.

So let's simply try that.

And so I can now say, "I like to drink"

and then based on the age, I can say if I like to drink wine

or water.

So, here in this placeholder, remember,

I can put any expression that I want.

And this here is an expression.

Again because it produces a value.

So I grab it from here.

Paste it here,

and that's it.

The template literal will now use whatever result we get

from this operator.

So that's either gonna be wine or water.

And then it assembles that result into the final string.

So let's check.

And indeed, once more,

the conditional operator works just fine.

And with our age back to 23,

then we got, "I like to drink wine."

Great, so I hope that this makes sense.

I know that especially this part here

can be a little bit confusing for beginners.

So take a minute to really understand what happens here.

And always keep in mind the concept of operator

and of expression.

Which is something that produces a value.

And thanks to that we can then put that value

here in this placeholder in the template literal.

All right.

Now to finish, I just wanted to mention

that the ternary operator is not thought as a replacement

of if/else statements.

We still need if/else all the time.

For example when we have bigger blocks of code

that we need to execute based on a condition.

In that case the ternary operator is not gonna work.

But the ternary operator is perfect

when we just need to take a quick decision,

for example, like this one.

And that's especially true in places

where JavaScript really expects an expression,

just like here in this template literal.

So here we could not use an if/else statement

and so the ternary operator really comes to our rescue here.

So I think you can understand

that this one is really, really important.

So make sure that you absolutely understand how it works.

And once you do understand,

then let's move on to the final lecture of this section,

which is yet another coding challenge for you to see

if you did actually understand how the conditional

or ternary operator works.