All language subtitles for 5. Ternaries Instead of ifelse Statements

So in React, we need to define values based on a condition all the time.

And many times in situations where we cannot use an if else statement.

And so let's now learn how to use the ternary operator instead.

So in JavaScript, the ternary operator is a very special type of operator that has three operands.

So three parts that are needed for this operator to work.

So let's work here on the page's value again.

And so the first part of the ternary operator is a condition.

So let's say pages greater 1000.

So this is a condition and if this is true, the result of this operator will be whatever is after this

question mark.

So let's define a string here and let's say over.

1000.

Then let's add this colon.

And for now I will just write another string here and then I will explain what's happening.

So less than 1000.

So again, the ternary operator has three parts.

The first part is this condition here.

The second part is this second operand, which is the result of the operation in case that the condition

is true.

And in case that the condition is actually false, then the result of this operator will be this third

part of the operator.

Okay.

And in case that is confusing, just remember that an operator is a bit similar to a function, so it

always returns some value.

So for example, if we have two plus two, then the operator here is the two and it will result basically

this four.

Right.

And this operator here.

So the ternary operator again, will return this value here in case that the first operand is true.

So this condition is true.

And if it's false, then this part here will be the result of the operator.

And then we can, as always, store that result into a variable.

So let's just call this the pages range.

Let's lock that here.

And so.

Uh, our pages are currently 1210, which is, of course, more than 1000.

And so then here we get that pages rate is over 1000.

And if we had another book.

So if here a book was get book ID to.

Well, then our book still has 1210 pages because we are actually manipulating that value here.

Remember?

But let's take that out.

And then our book only has 295 pages, which will then result here in the string of less than 1000.

So then we can use this here, for example, to create another string.

Let's log that to the console.

And again using a template literal.

The book has.

Pages range.

Page.

And so now we get the book has less than 1000 pages.

Let's put this one here back and go also back to book number one.

And then we get the book has over a thousand pages.

Great.

So that's what we use the ternary operator for.

So to define a variable conditionally and let's just quickly do that here again, right here in the

summary string, just so I can show you that we can really use any JavaScript that returns a value here

in one of these blocks.

So the book.

Has.

Here will be our JavaScript block And then let me just write the end.

Been adapted as a movie.

And so here, basically, if the movie adaptation is true, then we want to return nothing.

And if it's false, we want to return not.

That makes more sense if we write it out.

So has movie adaptation, which we can again use because we already took it out of the object up here

in this destructuring.

So if has movie adaptation.

Then return nothing.

And if not, then return the string.

Not okay.

And well, that's a bit hard to see there.

So the book has been adapted as a movie, which makes sense because this year is true.

But once again if we change this to.

Number two here, then the book or.

Yeah, then the book is different.

It has no movie.

And so then or string should say.

The book has not been adapted as a movie.

Great.

So with this, we used a conditional right here inside the template literal and it would not have been

possible to use an if else statement here instead because an if else statement is well, as the name

says, it's a statement so it does not return a value.

So it would have been impossible to use that here.

And so then the ternary operator is exactly the way to go.

And as I said in the beginning, we do this all the time in React.

So this is one of these things that is really important to know before starting to write React applications.