‫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 they first operate.
‫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 operant,
‫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 false, 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 that's gonna be quite helpful
‫basically in order to use this as an if.
‫So for example, we could do hasMovieAdaptation
‫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 and, 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 falsy 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 upper end is true
‫and will then return it.
‫So if we have true or some string,
‫that doesn't really matter here the word,
‫then we immediately get true.
‫But if we have false, 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 here, 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.translations.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.translations.spanish or 'not translated.'
‫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's no short circuiting.
‫And so here we are then using that to our advantage
‫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 truthy 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.
‫Sometimes that can have some consequences.
‫So let me show you what I mean by that.
‫So in book.reviews.libranything.
‫And now .reviewsCount is zero.
‫So each of these books has this reviews property
‫and there we have some reviews
‫from good reads 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 and 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 libranything 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 countWrong.
‫So book.reviews.libranything.reviewsCount 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 countWrong 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 countWrong 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 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.reviews.libraanything.reviewsCount.
‫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 nullish coalescing.
‫And so now the count will indeed not be 'no data,'
‫but will be zero.
‫So this nullish 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.