1 00:00:01,140 --> 00:00:02,160 ‫In this lecture 2 00:00:02,160 --> 00:00:04,680 ‫let's review how short circuiting works 3 00:00:04,680 --> 00:00:06,903 ‫with some logical operators. 4 00:00:08,460 --> 00:00:11,190 ‫So in JavaScript, some logical operators, 5 00:00:11,190 --> 00:00:14,730 ‫such as the end and the or operator, 6 00:00:14,730 --> 00:00:18,060 ‫have a feature called short circuiting. 7 00:00:18,060 --> 00:00:21,540 ‫So short circuiting in logical operators, 8 00:00:21,540 --> 00:00:24,030 ‫means that, in certain conditions, 9 00:00:24,030 --> 00:00:27,750 ‫the operator will immediately return the first value 10 00:00:27,750 --> 00:00:31,050 ‫and not even look at the second value. 11 00:00:31,050 --> 00:00:33,570 ‫And this probably sounds confusing 12 00:00:33,570 --> 00:00:37,140 ‫so, of course, let's write some code here. 13 00:00:37,140 --> 00:00:39,780 ‫So starting with the end operator, 14 00:00:39,780 --> 00:00:43,770 ‫the end operator short circuits when they first operate. 15 00:00:43,770 --> 00:00:46,800 ‫So when the first value is false 16 00:00:46,800 --> 00:00:49,893 ‫and then will immediately return that first value. 17 00:00:51,000 --> 00:00:53,080 ‫So let's use a console.log here 18 00:00:54,120 --> 00:00:56,220 ‫and let's do what I just said. 19 00:00:56,220 --> 00:00:57,870 ‫So when the first value is true 20 00:00:57,870 --> 00:01:00,240 ‫the end operator will automatically return 21 00:01:00,240 --> 00:01:01,770 ‫the second operant, 22 00:01:01,770 --> 00:01:05,160 ‫so the second value, no matter what that is. 23 00:01:05,160 --> 00:01:06,660 ‫So let's say some string. 24 00:01:06,660 --> 00:01:10,080 ‫And so indeed, immediately we get some string here. 25 00:01:10,080 --> 00:01:12,930 ‫And so here we have no short circuiting. 26 00:01:12,930 --> 00:01:15,840 ‫The short circuiting works in the end operator 27 00:01:15,840 --> 00:01:17,883 ‫when the first value is false. 28 00:01:19,080 --> 00:01:22,920 ‫So here if we have false, then there is a short circuit 29 00:01:22,920 --> 00:01:26,730 ‫and the operator does not even look at the second value. 30 00:01:26,730 --> 00:01:30,330 ‫So instead it immediately returns the first one here. 31 00:01:30,330 --> 00:01:32,490 ‫And that's gonna be quite helpful 32 00:01:32,490 --> 00:01:36,003 ‫basically in order to use this as an if. 33 00:01:38,160 --> 00:01:41,103 ‫So for example, we could do hasMovieAdaptation 34 00:01:42,219 --> 00:01:44,552 ‫and 'this book has a movie.' 35 00:01:49,008 --> 00:01:50,803 ‫And so here the operator, just like in this previous line, 36 00:01:52,380 --> 00:01:55,020 ‫immediately returns this false value 37 00:01:55,020 --> 00:01:58,860 ‫because, as we can see here, has movie adaptation is false. 38 00:01:58,860 --> 00:02:01,200 ‫And so the end operator short circuits 39 00:02:01,200 --> 00:02:04,470 ‫and doesn't even look at this other part here. 40 00:02:04,470 --> 00:02:07,680 ‫But of course if we go back to using the first book, 41 00:02:07,680 --> 00:02:09,300 ‫right here, 42 00:02:09,300 --> 00:02:12,000 ‫then we get this book has a movie. 43 00:02:12,000 --> 00:02:15,657 ‫So again, this acts a little bit like an if, right? 44 00:02:15,657 --> 00:02:19,770 ‫And so sometimes in React, we use that to our advantage. 45 00:02:19,770 --> 00:02:24,183 ‫And this also works with so-called truthy and falsy values. 46 00:02:27,870 --> 00:02:31,380 ‫So a truthy value is basically any value 47 00:02:31,380 --> 00:02:33,510 ‫that is not a falsy value. 48 00:02:33,510 --> 00:02:36,273 ‫And the falsy value, just write that here, 49 00:02:38,400 --> 00:02:43,400 ‫is zero and, empty string, null and undefined. 50 00:02:45,120 --> 00:02:46,560 ‫And I think there's actually one more, 51 00:02:46,560 --> 00:02:48,960 ‫which I can't think of right now. 52 00:02:48,960 --> 00:02:51,410 ‫So yeah, these are the ones that actually matter. 53 00:02:52,380 --> 00:02:55,050 ‫So this one is not one of these falsy values 54 00:02:55,050 --> 00:02:57,090 ‫and, therefore, it's a truthy value, 55 00:02:57,090 --> 00:02:59,850 ‫which means that for the end operator, 56 00:02:59,850 --> 00:03:03,690 ‫it is as if this was actually really a true value 57 00:03:03,690 --> 00:03:06,030 ‫because, basically, behind the scenes 58 00:03:06,030 --> 00:03:07,953 ‫this gets converted to true. 59 00:03:13,320 --> 00:03:14,970 ‫And so since this is true, 60 00:03:14,970 --> 00:03:17,820 ‫we get the second value out of the operation. 61 00:03:17,820 --> 00:03:22,560 ‫But if we use a falsy value, let's say zero, 62 00:03:25,410 --> 00:03:27,480 ‫then we get that first one. 63 00:03:27,480 --> 00:03:30,930 ‫So here once again, we have short circuiting in action 64 00:03:30,930 --> 00:03:35,340 ‫because this is a falsy value, all right. 65 00:03:35,340 --> 00:03:37,860 ‫So that's enough for the end operator. 66 00:03:37,860 --> 00:03:39,540 ‫Now let's go to the or operator, 67 00:03:39,540 --> 00:03:42,420 ‫which works exactly in the opposite way. 68 00:03:42,420 --> 00:03:44,190 ‫So this one short circuits 69 00:03:44,190 --> 00:03:46,890 ‫whenever the first upper end is true 70 00:03:46,890 --> 00:03:48,483 ‫and will then return it. 71 00:03:54,900 --> 00:03:58,920 ‫So if we have true or some string, 72 00:03:58,920 --> 00:04:00,930 ‫that doesn't really matter here the word, 73 00:04:00,930 --> 00:04:02,673 ‫then we immediately get true. 74 00:04:03,990 --> 00:04:08,550 ‫But if we have false, then we get some string. 75 00:04:08,550 --> 00:04:09,840 ‫And so from this example, 76 00:04:09,840 --> 00:04:11,910 ‫we can see that the short circuiting 77 00:04:11,910 --> 00:04:16,910 ‫happens here in this case whenever the first value is true. 78 00:04:16,950 --> 00:04:17,940 ‫So this is true. 79 00:04:17,940 --> 00:04:21,153 ‫So the operator doesn't even look at the second value. 80 00:04:22,770 --> 00:04:26,160 ‫Now, we can use this here, actually to our advantage 81 00:04:26,160 --> 00:04:28,413 ‫in order to set default values. 82 00:04:29,400 --> 00:04:30,900 ‫Let's try an example, actually, 83 00:04:30,900 --> 00:04:33,210 ‫with the data that we're working with. 84 00:04:33,210 --> 00:04:38,210 ‫And let's first look at book.translations.spanish. 85 00:04:45,630 --> 00:04:48,760 ‫And so we get this Spanish string here 86 00:04:49,650 --> 00:04:52,440 ‫and that's because we have a Spanish translation 87 00:04:52,440 --> 00:04:53,400 ‫for this book. 88 00:04:53,400 --> 00:04:57,480 ‫But for the other book, again, book number two 89 00:04:57,480 --> 00:04:58,803 ‫I think there is none. 90 00:04:59,880 --> 00:05:01,740 ‫So yeah, it's undefined. 91 00:05:01,740 --> 00:05:02,820 ‫And so let's say 92 00:05:02,820 --> 00:05:06,690 ‫that we wanted to set a default value in case there is none. 93 00:05:06,690 --> 00:05:09,723 ‫So we can use the end operator for that. 94 00:05:12,570 --> 00:05:15,760 ‫So let's say Spanish translation 95 00:05:17,580 --> 00:05:22,580 ‫is book.translations.spanish or 'not translated.' 96 00:05:31,920 --> 00:05:35,280 ‫So the result of Spanish translation, right now, 97 00:05:35,280 --> 00:05:36,630 ‫is not translated 98 00:05:36,630 --> 00:05:39,330 ‫because, remember, this one was undefined. 99 00:05:39,330 --> 00:05:43,410 ‫And undefined is one of these falsy values, right? 100 00:05:43,410 --> 00:05:48,240 ‫And as we saw here, when the value is false or falsy, 101 00:05:48,240 --> 00:05:49,560 ‫then the end operator 102 00:05:49,560 --> 00:05:52,710 ‫goes to the second part of the operator. 103 00:05:52,710 --> 00:05:54,870 ‫So there's no short circuiting. 104 00:05:54,870 --> 00:05:57,460 ‫And so here we are then using that to our advantage 105 00:05:59,632 --> 00:06:02,040 ‫by setting this default string right here. 106 00:06:02,040 --> 00:06:05,250 ‫And so this is then what will become the result 107 00:06:05,250 --> 00:06:06,930 ‫of this entire operation. 108 00:06:06,930 --> 00:06:10,350 ‫And then it will get assigned to this variable. 109 00:06:10,350 --> 00:06:12,600 ‫And if the book was number one, 110 00:06:12,600 --> 00:06:14,250 ‫which I'm not going to do now, 111 00:06:14,250 --> 00:06:17,610 ‫but yeah, you remember that it had a translation. 112 00:06:17,610 --> 00:06:20,340 ‫And so then this here would become a truthy value 113 00:06:20,340 --> 00:06:22,650 ‫and then we would have short circuiting. 114 00:06:22,650 --> 00:06:24,690 ‫So this one would not be evaluated. 115 00:06:24,690 --> 00:06:27,000 ‫And then the value of Spanish translation 116 00:06:27,000 --> 00:06:28,803 ‫would simply be this one. 117 00:06:30,780 --> 00:06:34,410 ‫Great, however, this can also go wrong 118 00:06:34,410 --> 00:06:37,380 ‫because this works for all the falsy values 119 00:06:37,380 --> 00:06:40,200 ‫such as zero as well. 120 00:06:40,200 --> 00:06:43,350 ‫Sometimes that can have some consequences. 121 00:06:43,350 --> 00:06:45,933 ‫So let me show you what I mean by that. 122 00:06:46,770 --> 00:06:51,427 ‫So in book.reviews.libranything. 123 00:06:56,280 --> 00:07:01,280 ‫And now .reviewsCount is zero. 124 00:07:02,250 --> 00:07:04,980 ‫So each of these books has this reviews property 125 00:07:04,980 --> 00:07:07,020 ‫and there we have some reviews 126 00:07:07,020 --> 00:07:11,910 ‫from good reads and from library anything or something. 127 00:07:11,910 --> 00:07:13,023 ‫And so then in there, 128 00:07:14,010 --> 00:07:15,933 ‫well this one doesn't have anything, 129 00:07:18,540 --> 00:07:19,373 ‫or actually it does, 130 00:07:19,373 --> 00:07:21,090 ‫but, as you saw down here, 131 00:07:21,090 --> 00:07:22,890 ‫that's only available in the pro edition 132 00:07:22,890 --> 00:07:23,990 ‫which you have to pay. 133 00:07:24,870 --> 00:07:25,980 ‫And so yeah. 134 00:07:25,980 --> 00:07:29,430 ‫Inside reviews we have good reads and library anything. 135 00:07:29,430 --> 00:07:30,990 ‫And then each of those has a rating, 136 00:07:30,990 --> 00:07:33,210 ‫rating count, and reviews count. 137 00:07:33,210 --> 00:07:37,020 ‫But for this book number one, that we're using right now, 138 00:07:37,020 --> 00:07:41,370 ‫the reviews count for libranything is zero. 139 00:07:41,370 --> 00:07:43,350 ‫And so let's use this value 140 00:07:43,350 --> 00:07:47,640 ‫so I can show you that this can also go wrong. 141 00:07:47,640 --> 00:07:49,893 ‫So this, setting a default value. 142 00:07:52,410 --> 00:07:54,993 ‫So count, let's call it actually countWrong. 143 00:07:57,810 --> 00:08:02,810 ‫So book.reviews.libranything.reviewsCount or 'no data.' 144 00:08:10,800 --> 00:08:13,350 ‫So basically we want to get the reviews count, 145 00:08:13,350 --> 00:08:15,060 ‫but if there is no value there, 146 00:08:15,060 --> 00:08:17,973 ‫then we want it to be no data. 147 00:08:20,430 --> 00:08:24,480 ‫So let's see what countWrong is, well, it says 'no data,' 148 00:08:24,480 --> 00:08:27,150 ‫but we know that it is actually zero. 149 00:08:27,150 --> 00:08:29,910 ‫So we would want the count to be zero 150 00:08:29,910 --> 00:08:34,740 ‫and not 'no data' because there is actually data, right? 151 00:08:34,740 --> 00:08:36,640 ‫So for the book one 152 00:08:40,920 --> 00:08:43,260 ‫for example, or any other book, 153 00:08:43,260 --> 00:08:44,460 ‫there is this other number. 154 00:08:44,460 --> 00:08:46,260 ‫So something that is not zero. 155 00:08:46,260 --> 00:08:48,990 ‫And so here then the countWrong is actually correct. 156 00:08:48,990 --> 00:08:52,983 ‫So here 452 is is exactly what we want, 157 00:08:55,770 --> 00:08:58,500 ‫but not when it is zero. 158 00:08:58,500 --> 00:09:01,710 ‫So when this value is zero, it is a falsy value. 159 00:09:01,710 --> 00:09:03,570 ‫And so when this is a falsy value, 160 00:09:03,570 --> 00:09:05,100 ‫which zero is, 161 00:09:05,100 --> 00:09:10,020 ‫the result of this operator will be the second part, 162 00:09:10,020 --> 00:09:13,320 ‫which in this case is, again, wrong. 163 00:09:13,320 --> 00:09:14,700 ‫Now to solve this 164 00:09:14,700 --> 00:09:18,000 ‫JavaScript has recently added a new logical operator 165 00:09:18,000 --> 00:09:21,750 ‫which is called the nullish coalescing operator. 166 00:09:21,750 --> 00:09:23,373 ‫So a very weird name. 167 00:09:24,420 --> 00:09:25,410 ‫But what matters 168 00:09:25,410 --> 00:09:29,250 ‫is that it works very similarly to the or operator, 169 00:09:29,250 --> 00:09:33,840 ‫but it does also short circuit for falsy values. 170 00:09:33,840 --> 00:09:36,150 ‫So let me show you what that means. 171 00:09:36,150 --> 00:09:40,380 ‫So again, const, now let's just call it count, 172 00:09:40,380 --> 00:09:43,983 ‫is equal to book.reviews.libraanything.reviewsCount. 173 00:09:47,250 --> 00:09:52,250 ‫And then question mark, question mark, 'no data.' 174 00:09:52,650 --> 00:09:55,020 ‫So here we have basically exactly the same, 175 00:09:55,020 --> 00:09:56,520 ‫but instead of using or, 176 00:09:56,520 --> 00:09:58,830 ‫we're using the nullish coalescing. 177 00:09:58,830 --> 00:10:02,700 ‫And so now the count will indeed not be 'no data,' 178 00:10:02,700 --> 00:10:04,290 ‫but will be zero. 179 00:10:04,290 --> 00:10:06,600 ‫So this nullish coalescing operator 180 00:10:06,600 --> 00:10:09,090 ‫will only return the second value 181 00:10:09,090 --> 00:10:12,540 ‫when the first value is null or undefined, 182 00:10:12,540 --> 00:10:15,423 ‫but not when it is zero or an empty string. 183 00:10:17,130 --> 00:10:19,260 ‫And I get that this sounds super confusing, 184 00:10:19,260 --> 00:10:20,580 ‫probably right now, 185 00:10:20,580 --> 00:10:22,260 ‫but you will see in practice 186 00:10:22,260 --> 00:10:24,300 ‫that this makes all the difference 187 00:10:24,300 --> 00:10:27,450 ‫and it is yet another nice addition here, 188 00:10:27,450 --> 00:10:29,253 ‫this one, to JavaScript.