All language subtitles for 7. Short-Circuiting And Logical Operators &&, ,

In this lecture.

Let's review how short circuiting works with some logical operators.

So in JavaScript, some logical operators such as the End and the Or operator have a feature called

short circuiting.

So short circuiting in logical operators means that in certain conditions the operator will immediately

return the first value and not even look at the second value.

And this probably sounds confusing.

So of course, let's write some code here.

So starting with the end operator, the end operator short circuits when the first operand, so when

the first value is false and then will immediately return that first value.

So let's use a console.log here.

And let's do what I just said.

So when the first value is true, the end operator will automatically return the second operand.

So the second value, no matter what that is.

So let's say some string.

And so indeed, immediately we get some string here.

And so here we have no short circuiting the short circuiting works in the end.

Operator When the first value is false.

So here, if we have faults, then there is a short circuit and the operator does not even look at the

second value.

So instead it immediately returns the first one here, and this can be quite helpful.

Basically, in order to use this as an if.

So for example, we could do has movie adaptation and.

This book.

Has a movie.

And so here the operator, just like in this previous line, immediately returns this false value because

as we can see here, has movie adaptation is false.

And so the end operator short circuits and doesn't even look at this other part here.

But of course, if we go back to using the first book right here.

Then we get this book has a movie.

So again, this acts a little bit like an if, right?

And so sometimes in React, we use that to our advantage.

And this also works with so-called truthy and falsy values.

So a truthy value is basically any value that is not a falsy value and the falsy value.

Just write that here.

Is zero.

An empty string.

Null.

And undefined.

And I think there's actually one more which I can't think of right now.

So, yeah, these are the ones that actually matter.

So this one is not one of these files values and therefore it's a truthy value, which means that for

the end operator it is as if this was actually really a true value because basically behind the scenes

this gets converted to true.

And so since this is true, we get the second value out of the operation.

But if we use a falsy value.

Let's say zero.

Then we get that first one.

So here, once again, we have short circuiting in action because this is a falsy value.

All right, so that's enough for the end operator.

Now let's go to the Or operator, which works exactly in the opposite way.

So this one short circuits whenever the first operand is true and will then return it.

So if we have true or some string, it doesn't really matter here the word, then we immediately get

true.

But if we have faults.

Then we get some string.

And so from this example, we can see that the short circuiting happens here in this case whenever the

first value is true.

So this is true.

So the operator doesn't even look at the second value.

Now we can use this year actually to our advantage in order to set default values.

Let's try an example actually with the data that we're working with.

And let's first look at book dot translations.

Dot Spanish.

And so we get this Spanish string here.

And that's because we have a Spanish translation for this book.

But for the other book.

Again, book number two, I think there is none.

So, yeah, it's undefined.

And so let's say that we wanted to set a default value in case there is none.

So we can use the end operator for that.

So let's say Spanish.

Translation.

Is book.

Dot translations dot Spanish or.

Not.

Translate it.

So the result of Spanish translation right now is not translated because remember, this one was undefined

and undefined is one of these falsy values, right?

And as we saw here, when the value is false or falsy, then the end operator goes to the second part

of the operator.

So there is no short circuiting.

And so here we are then using that to our advantage by well, by setting this default string right here.

And so this is then what will become the result of this entire operation, And then it will get assigned

to this variable.

And if the book was number one, which I'm not going to do now, but yeah, you remember that it had

a translation.

And so then this here would become a truth value and then we would have short circuiting so this one

would not be evaluated.

And then the value of Spanish translation would simply be this one.

Great.

However, this can also go wrong because this works for all the falsy values such as zero as well.

So sometimes that can have some consequences.

So let me show you what I mean by that.

So in book dot reviews.

Not laborer anything.

And now dot review count is zero.

So each of these books has this reviews property, and there we have some reviews from Goodreads and

from library anything or something.

And so then in there.

Well, this one doesn't have anything.

Or actually it does.

But as you saw down here, that's only available in the pro edition, which you have to pay.

And so yeah, inside reviews we have good reads in library anything.

And then each of those has a rating rating count and reviews count.

But for this book, number one that we're using right now, the reviews count for library anything is

zero.

And so let's use this value so I can show you that this can also go wrong.

So this setting a default value.

So count.

Let's call it actually count wrong.

So book.

Dot reviews dot library anything.

Dot reviews count.

Or.

No data.

So basically we want to get the reviews count, but if there is no value there, then we want it to

be no data.

So let's see what count wrong is.

Well, it says no data, but we know that it is actually zero.

So we would want the count to be zero and not no data because there is actually data.

Right.

So for the book one.

For example, or any other book.

There is this other number, so something that is not zero.

And so here then the count wrong is actually correct.

So here 452 is is exactly what we want.

But not when it is zero.

So when this value is zero, it is a falsy value.

And so when this is a falsy value, which zero is the result of this operation, of this operator will

be the second part, which in this case is again wrong.

Now to solve this, JavaScript has recently added a new logical operator which is called the Nullish

coalescing operator.

So a very weird name, but what matters is that it works very similarly to the Or operator, but it

does also short circuit for Falsy values.

So let me show you what that means.

So again, const.

Now let's just call it count is equal to book dot reviews dot library anything.

Dot reviews count and then question mark.

Question mark.

No data.

So here we have basically exactly the same.

But instead of using or we're using the knowledge coalescing.

And so now the count will indeed not be no data, but will be zero.

So this knowledge coalescing operator will only return the second value when the first value is null

or undefined, but not when it is zero or an empty string.

And I get that this sounds super confusing probably right now, but you will see in practice that this

makes all the difference and it is yet another nice addition here, this one to JavaScript.