1 00:00:01,160 --> 00:00:04,180 Let's go back to two logical operators 2 00:00:04,180 --> 00:00:06,100 that we already used before, 3 00:00:06,100 --> 00:00:08,910 but we didn't use their full potential yet. 4 00:00:08,910 --> 00:00:11,110 And I'm talking about the AND operator 5 00:00:11,110 --> 00:00:12,990 and the OR operator, 6 00:00:12,990 --> 00:00:14,460 and how we can use them 7 00:00:14,460 --> 00:00:17,063 for something called short circuiting. 8 00:00:19,080 --> 00:00:20,690 So up until this point, 9 00:00:20,690 --> 00:00:22,740 we have used logical operators 10 00:00:22,740 --> 00:00:25,480 only to combine Boolean values. 11 00:00:25,480 --> 00:00:27,990 But the truth is that we can do a lot more 12 00:00:27,990 --> 00:00:30,840 with the AND and OR operators. 13 00:00:30,840 --> 00:00:35,400 So let's start with the OR operator here. 14 00:00:35,400 --> 00:00:38,090 And so let me log, three, 15 00:00:38,090 --> 00:00:41,240 or Jonas. 16 00:00:41,240 --> 00:00:44,160 So that's something that we didn't do before, 17 00:00:44,160 --> 00:00:47,912 which is to use basically non Boolean values here 18 00:00:47,912 --> 00:00:50,093 as the operands, okay? 19 00:00:51,010 --> 00:00:54,123 So let's see what the result of this is gonna be, 20 00:00:54,960 --> 00:00:58,150 and for some reason I have to reload here, 21 00:00:58,150 --> 00:01:01,230 and you see that the result is three. 22 00:01:01,230 --> 00:01:03,050 And so that means that the results 23 00:01:03,050 --> 00:01:05,450 of the OR operator doesn't always 24 00:01:05,450 --> 00:01:07,070 have to be a Boolean. 25 00:01:07,070 --> 00:01:09,770 And so that's something that I didn't show you before. 26 00:01:11,780 --> 00:01:13,310 So there are three properties 27 00:01:13,310 --> 00:01:16,890 that I didn't tell you before about logical operators. 28 00:01:16,890 --> 00:01:21,063 So first, they can use any data type. 29 00:01:23,970 --> 00:01:28,430 They can return any data type 30 00:01:28,430 --> 00:01:29,460 and they do something 31 00:01:29,460 --> 00:01:32,293 called short circuiting, 32 00:01:34,870 --> 00:01:38,950 or as we also call it short circuit evaluation. 33 00:01:38,950 --> 00:01:42,090 So in fact, here we used two values 34 00:01:42,090 --> 00:01:44,740 that are not Booleans, okay? 35 00:01:44,740 --> 00:01:46,600 And it then returned a value 36 00:01:46,600 --> 00:01:48,560 that was not a Boolean. 37 00:01:48,560 --> 00:01:51,140 And now about short circuiting, 38 00:01:51,140 --> 00:01:53,210 in the case of the OR operator, 39 00:01:53,210 --> 00:01:56,700 short circuiting means that if the first value 40 00:01:56,700 --> 00:01:58,500 is a truthy value, 41 00:01:58,500 --> 00:02:02,270 it will immediately return that first value. 42 00:02:02,270 --> 00:02:04,100 So that's exactly what we see here 43 00:02:04,100 --> 00:02:07,790 with the three which is a truthy value. 44 00:02:07,790 --> 00:02:12,130 So again, if the first operand is truthy here 45 00:02:12,130 --> 00:02:13,680 in the OR operator, 46 00:02:13,680 --> 00:02:17,300 then the other operand will not even be evaluated. 47 00:02:17,300 --> 00:02:20,480 So JavaScript will not even take a look at it. 48 00:02:20,480 --> 00:02:23,383 And so that's what we mean with short circuiting. 49 00:02:25,689 --> 00:02:27,390 And now let's do some more, 50 00:02:27,390 --> 00:02:29,610 let's use the empty string 51 00:02:29,610 --> 00:02:32,373 or Jonas now. 52 00:02:34,290 --> 00:02:39,023 Then let's say, true or zero, 53 00:02:41,401 --> 00:02:43,903 and then let's say undefined or null. 54 00:02:47,110 --> 00:02:49,830 And now before taking a look at the result, 55 00:02:49,830 --> 00:02:52,170 try to take a guess of what the results 56 00:02:52,170 --> 00:02:54,853 of these three operations here will be. 57 00:02:55,960 --> 00:02:57,520 So did you do that? 58 00:02:57,520 --> 00:02:58,483 So let's see. 59 00:02:59,370 --> 00:03:02,990 So the first result of this one here is Jonas. 60 00:03:02,990 --> 00:03:07,020 And so that's because this here is a falsy value. 61 00:03:07,020 --> 00:03:08,820 And so then, the second operand 62 00:03:08,820 --> 00:03:12,980 will actually also be evaluated, and that's Jonas 63 00:03:12,980 --> 00:03:15,250 and it will then be returned. 64 00:03:15,250 --> 00:03:18,060 And so here we see again that the result 65 00:03:18,060 --> 00:03:19,600 of the OR operator 66 00:03:19,600 --> 00:03:21,780 doesn't have to be a Boolean. 67 00:03:21,780 --> 00:03:25,070 It will simply return the truthy value here. 68 00:03:25,070 --> 00:03:28,100 Next up we have true or zero. 69 00:03:28,100 --> 00:03:30,750 And so this first value here is truthy, 70 00:03:30,750 --> 00:03:32,610 and in fact, it's even true, 71 00:03:32,610 --> 00:03:35,320 and so therefore that will simply be the result 72 00:03:35,320 --> 00:03:36,840 of the operator. 73 00:03:36,840 --> 00:03:38,490 And so that's what we see here. 74 00:03:38,490 --> 00:03:41,840 And then, here we have undefined or null, 75 00:03:41,840 --> 00:03:45,450 and as you already know, undefined is a falsy value, 76 00:03:45,450 --> 00:03:48,360 and so we then go to the second operand, 77 00:03:48,360 --> 00:03:50,380 so there is no short-circuiting, 78 00:03:50,380 --> 00:03:53,670 and so that's then the one that's gonna be returned. 79 00:03:53,670 --> 00:03:55,110 So here we see null, 80 00:03:55,110 --> 00:03:57,480 and that happens even though null 81 00:03:57,480 --> 00:04:00,480 is also a falsy value. 82 00:04:00,480 --> 00:04:02,660 And let's actually now generalize this 83 00:04:02,660 --> 00:04:04,450 to more operators. 84 00:04:04,450 --> 00:04:06,950 So I can give you basically the general rule 85 00:04:06,950 --> 00:04:09,060 of how this operator works, 86 00:04:09,060 --> 00:04:11,520 no matter with how many values. 87 00:04:11,520 --> 00:04:16,100 So let's say undefined or zero 88 00:04:16,100 --> 00:04:18,820 or empty string, 89 00:04:18,820 --> 00:04:21,253 or hello, 90 00:04:22,190 --> 00:04:24,263 or 23, 91 00:04:25,520 --> 00:04:26,793 or null. 92 00:04:27,630 --> 00:04:30,763 So what do you think that the result of this one will be? 93 00:04:32,280 --> 00:04:33,940 And it is hello. 94 00:04:33,940 --> 00:04:36,660 And that's essentially because hello here, 95 00:04:36,660 --> 00:04:38,840 is the first truthy value 96 00:04:38,840 --> 00:04:42,130 in this chain of OR operations. 97 00:04:42,130 --> 00:04:43,720 So we start with this one, 98 00:04:43,720 --> 00:04:46,040 so undefined is falsy. 99 00:04:46,040 --> 00:04:48,887 And so then we go to the next one, which is also falsy. 100 00:04:48,887 --> 00:04:52,440 And so then to the next one, which is also falsy, 101 00:04:52,440 --> 00:04:54,530 and then we get hello 102 00:04:54,530 --> 00:04:56,180 and hello is truthy 103 00:04:56,180 --> 00:05:00,480 and so therefore it will short circuit the entire evaluation 104 00:05:00,480 --> 00:05:03,860 and it will be the returned value, okay? 105 00:05:03,860 --> 00:05:05,800 And if we think about this, 106 00:05:05,800 --> 00:05:07,710 then it actually makes sense. 107 00:05:07,710 --> 00:05:10,310 Because remember, in the OR operation, 108 00:05:10,310 --> 00:05:11,490 the result is true, 109 00:05:11,490 --> 00:05:15,030 if at least one operand is true, right? 110 00:05:15,030 --> 00:05:17,420 So if the first operand is already true, 111 00:05:17,420 --> 00:05:19,890 for example, as it happens here, 112 00:05:19,890 --> 00:05:22,450 then JavaScript doesn't even have to look 113 00:05:22,450 --> 00:05:25,620 at the other values because the result of the expression 114 00:05:25,620 --> 00:05:27,920 will already be true anyway. 115 00:05:27,920 --> 00:05:30,870 And so it will short circuit and then simply return 116 00:05:30,870 --> 00:05:32,093 that first result. 117 00:05:32,940 --> 00:05:37,320 And now let's see a more practical application of this. 118 00:05:37,320 --> 00:05:40,220 So let's say that there might be a property 119 00:05:40,220 --> 00:05:44,040 on the restaurant object with the number of guests. 120 00:05:44,040 --> 00:05:45,493 So something like this: 121 00:05:46,600 --> 00:05:50,410 Restaurant dot num guests, 122 00:05:50,410 --> 00:05:53,520 but again, we don't know if it exists. 123 00:05:53,520 --> 00:05:56,830 However, we want to basically define a variable 124 00:05:56,830 --> 00:05:59,250 based on this number of guests. 125 00:05:59,250 --> 00:06:01,380 And we want to set a default value 126 00:06:01,380 --> 00:06:03,080 if this doesn't exist. 127 00:06:03,080 --> 00:06:05,573 So basically, what we want to do is this. 128 00:06:07,950 --> 00:06:10,943 So guests, I'm gonna call it one here, 129 00:06:12,150 --> 00:06:14,850 and so what we want to do is this, 130 00:06:14,850 --> 00:06:16,810 we want to check if it exists, 131 00:06:16,810 --> 00:06:19,174 and then the result should be 132 00:06:19,174 --> 00:06:23,950 actually restaurant dot num guests, 133 00:06:23,950 --> 00:06:25,620 but if it doesn't exist, 134 00:06:25,620 --> 00:06:29,053 then we want to set a default value of 10. 135 00:06:30,240 --> 00:06:33,133 So let's log guests one to the console, 136 00:06:34,840 --> 00:06:37,210 and so you see that now it is 10. 137 00:06:37,210 --> 00:06:40,360 And so that's because restaurant dot num guests 138 00:06:40,360 --> 00:06:43,017 doesn't exist, so this is undefined, 139 00:06:43,017 --> 00:06:45,980 and so therefore 10 will be the result 140 00:06:45,980 --> 00:06:50,200 of this turnery operator, okay? 141 00:06:50,200 --> 00:06:52,910 But now if we do set the property 142 00:06:54,440 --> 00:06:55,323 like this, 143 00:06:56,250 --> 00:06:58,470 for example, to 23, 144 00:06:58,470 --> 00:07:01,133 then guests one is gonna be 23. 145 00:07:02,020 --> 00:07:04,250 So, but instead of doing this, 146 00:07:04,250 --> 00:07:07,260 we can take advantage of short circuiting 147 00:07:07,260 --> 00:07:08,563 and the OR operator. 148 00:07:10,000 --> 00:07:14,830 So let's again write restaurant dot num guests, 149 00:07:14,830 --> 00:07:18,710 and then simply or 10. 150 00:07:18,710 --> 00:07:20,673 So let's analyze why this works. 151 00:07:21,950 --> 00:07:25,150 And first actually store this into a variable. 152 00:07:25,150 --> 00:07:27,070 So guests two 153 00:07:27,070 --> 00:07:28,040 equals this 154 00:07:29,623 --> 00:07:32,773 and then console log guests two. 155 00:07:33,660 --> 00:07:35,930 So let's take a look at why this works 156 00:07:35,930 --> 00:07:39,390 and starting again with disabling this. 157 00:07:39,390 --> 00:07:42,570 And so right now restaurants dot number of guests 158 00:07:42,570 --> 00:07:43,930 is undefined. 159 00:07:43,930 --> 00:07:45,550 So it's a falsy value, 160 00:07:45,550 --> 00:07:47,040 and as we already know, 161 00:07:47,040 --> 00:07:48,870 then the second value here 162 00:07:48,870 --> 00:07:51,820 will be the result of the OR operator. 163 00:07:51,820 --> 00:07:56,010 And so, that's basically our default value of 10. 164 00:07:56,010 --> 00:07:59,343 So let's take a look and indeed we get 10 here. 165 00:08:00,290 --> 00:08:02,860 But now if we put it back on, 166 00:08:02,860 --> 00:08:07,430 then restaurant dot number of guests is now 23, 167 00:08:07,430 --> 00:08:09,100 which is a truthy value, 168 00:08:09,100 --> 00:08:12,210 and therefore the OR operator short circuits 169 00:08:12,210 --> 00:08:15,480 and it will become the return value, 170 00:08:15,480 --> 00:08:18,850 or let's say the result of the operation. 171 00:08:18,850 --> 00:08:21,720 And so now indeed, we get 23. 172 00:08:21,720 --> 00:08:24,020 And so this is a way easier method 173 00:08:24,020 --> 00:08:25,960 of setting default values 174 00:08:25,960 --> 00:08:28,580 than having to deal with this turnery operator 175 00:08:28,580 --> 00:08:32,960 or even worse an if else statement, okay? 176 00:08:32,960 --> 00:08:36,010 So that is short-circuiting with the AND operator, 177 00:08:36,010 --> 00:08:39,300 but we can also do the same with the OR operator, 178 00:08:39,300 --> 00:08:42,380 but the AND operator also has short circuiting. 179 00:08:42,380 --> 00:08:43,600 So let's take a look 180 00:08:44,500 --> 00:08:48,170 and it will start by log something to the console here, 181 00:08:48,170 --> 00:08:49,833 like a string to separate, 182 00:08:54,360 --> 00:08:57,600 so that we don't get confused by the results 183 00:08:57,600 --> 00:08:58,803 and the console then. 184 00:09:01,500 --> 00:09:05,010 Oh, but before we talk about the AND operator here, 185 00:09:05,010 --> 00:09:06,520 there's actually one more thing 186 00:09:06,520 --> 00:09:08,140 that I need to tell you here, 187 00:09:08,140 --> 00:09:11,350 which is that both of these solutions here, 188 00:09:11,350 --> 00:09:13,630 this and this will not work 189 00:09:13,630 --> 00:09:16,033 when the number of guests is zero. 190 00:09:17,000 --> 00:09:18,300 So let's see what happens. 191 00:09:19,680 --> 00:09:21,940 And so now they're both 10. 192 00:09:21,940 --> 00:09:24,330 And that's not the result that we want, 193 00:09:24,330 --> 00:09:27,330 but given what we already know, it makes sense 194 00:09:27,330 --> 00:09:28,950 because this is now zero, 195 00:09:28,950 --> 00:09:30,630 so it's a falsy value, 196 00:09:30,630 --> 00:09:33,840 and therefore the second one here will be the result 197 00:09:33,840 --> 00:09:38,220 of the operation and therefore assigned to guests two. 198 00:09:38,220 --> 00:09:41,720 However, zero is the real number of guests. 199 00:09:41,720 --> 00:09:43,580 And so that's the value that we actually 200 00:09:43,580 --> 00:09:46,680 would guests two to have. 201 00:09:46,680 --> 00:09:49,900 But instead it's set the default value of 10. 202 00:09:49,900 --> 00:09:52,480 So that's obviously not what we want 203 00:09:52,480 --> 00:09:55,360 and we will explore a great solution to this problem 204 00:09:55,360 --> 00:09:56,810 actually in the next lecture. 205 00:09:58,470 --> 00:10:02,270 But now, let's talk about the AND operator. 206 00:10:02,270 --> 00:10:06,090 And basically when it comes to short circuit evaluation, 207 00:10:06,090 --> 00:10:09,570 the AND operator works in the exact opposite way 208 00:10:09,570 --> 00:10:11,313 of the OR operator. 209 00:10:12,940 --> 00:10:14,330 So let's see. 210 00:10:14,330 --> 00:10:18,950 Zero and Jonas. 211 00:10:18,950 --> 00:10:22,280 And now the result of this is zero. 212 00:10:22,280 --> 00:10:24,120 And so what this means is that 213 00:10:24,120 --> 00:10:26,350 the AND operator short circuits, 214 00:10:26,350 --> 00:10:29,160 when the first value is falsy. 215 00:10:29,160 --> 00:10:32,320 And then immediately returns that falsy value 216 00:10:32,320 --> 00:10:35,710 without even evaluating the second operand. 217 00:10:39,440 --> 00:10:41,240 So again, that's exactly the opposite 218 00:10:41,240 --> 00:10:44,260 of what happens with the OR operator, 219 00:10:44,260 --> 00:10:47,823 which short circuits when the first operator is true. 220 00:10:49,500 --> 00:10:52,840 So let's now set it to a true value here, 221 00:10:52,840 --> 00:10:54,800 or actually a truthy value. 222 00:10:54,800 --> 00:10:59,310 And then at this case, Jonas is actually returned. 223 00:10:59,310 --> 00:11:03,847 So when it is truthy, it means that the evaluation continues 224 00:11:03,847 --> 00:11:07,350 and then simply the last value is returned. 225 00:11:07,350 --> 00:11:11,110 And once again, this makes sense if we think about it. 226 00:11:11,110 --> 00:11:13,670 So the AND operator is only true 227 00:11:13,670 --> 00:11:16,020 if all the operands are true. 228 00:11:16,020 --> 00:11:19,090 And so, if the first one here is false, 229 00:11:19,090 --> 00:11:22,430 then it means that the entire result of the AND operation 230 00:11:22,430 --> 00:11:24,500 will already be false anyway. 231 00:11:24,500 --> 00:11:26,520 And so there is no need to even look 232 00:11:26,520 --> 00:11:28,643 at any of the other operands. 233 00:11:30,040 --> 00:11:32,150 So I think that's a good way to memorize 234 00:11:32,150 --> 00:11:34,203 how both of them work. 235 00:11:35,270 --> 00:11:38,040 Anyway, let's again generalize. 236 00:11:38,040 --> 00:11:40,930 Add this to multiple operands here 237 00:11:40,930 --> 00:11:42,980 and 23, 238 00:11:42,980 --> 00:11:44,193 and null, 239 00:11:45,730 --> 00:11:48,590 and Jonas, 240 00:11:48,590 --> 00:11:53,230 and so what do you think this time the result will be? 241 00:11:53,230 --> 00:11:55,150 Well, let's see. 242 00:11:55,150 --> 00:11:57,450 And it is indeed null. 243 00:11:57,450 --> 00:12:01,700 And to understand why let's apply the same logic as before. 244 00:12:01,700 --> 00:12:03,560 So this is a truthy value, 245 00:12:03,560 --> 00:12:06,130 and therefore the evaluation continues, 246 00:12:06,130 --> 00:12:08,163 23 is also truthy, 247 00:12:08,163 --> 00:12:10,670 but then null is a falsy value 248 00:12:10,670 --> 00:12:14,120 and therefore evaluation no longer needs to continue 249 00:12:14,120 --> 00:12:16,360 because at this point, the whole result 250 00:12:16,360 --> 00:12:19,760 of the end operation is gonna be false anyway. 251 00:12:19,760 --> 00:12:21,390 And then as a result, 252 00:12:21,390 --> 00:12:24,390 this is then simply the value that's gonna be returned 253 00:12:24,390 --> 00:12:27,810 and it's short circuits the rest of the evaluation. 254 00:12:27,810 --> 00:12:30,923 So it will not even take a look at Jonas here. 255 00:12:33,610 --> 00:12:34,460 Alright. 256 00:12:34,460 --> 00:12:38,150 And so now let's see another practical example. 257 00:12:38,150 --> 00:12:40,250 So, let's say 258 00:12:40,250 --> 00:12:45,250 if restaurant dot order, order pizza. 259 00:12:46,930 --> 00:12:49,720 So basically we're checking if this method exists 260 00:12:50,570 --> 00:12:52,240 and then if it does exist, 261 00:12:52,240 --> 00:12:53,863 we want to call it. 262 00:12:54,780 --> 00:12:58,143 So restaurant dot order pizza, 263 00:12:59,310 --> 00:13:02,150 let's say with mushrooms 264 00:13:03,870 --> 00:13:05,143 and spinach. 265 00:13:09,730 --> 00:13:12,300 So many times we can use the AND operator 266 00:13:12,300 --> 00:13:16,090 to actually avoid an if statement like this one, 267 00:13:16,090 --> 00:13:18,330 where all we want to do is to check 268 00:13:18,330 --> 00:13:22,253 if a certain property or value actually exists. 269 00:13:24,660 --> 00:13:26,450 Okay, so in this case here, 270 00:13:26,450 --> 00:13:28,940 what we're doing is to basically pretending 271 00:13:28,940 --> 00:13:32,030 that we don't know if order pizza exists. 272 00:13:32,030 --> 00:13:34,630 And so we first check if it exists 273 00:13:34,630 --> 00:13:36,293 and only then we execute it. 274 00:13:37,620 --> 00:13:41,010 And so this now gives us mushrooms and spinach, 275 00:13:41,010 --> 00:13:42,790 but with the knowledge that we gained 276 00:13:42,790 --> 00:13:44,880 about the AND operator, 277 00:13:44,880 --> 00:13:46,623 we can do this in a simpler way. 278 00:13:48,220 --> 00:13:52,123 So we can say restaurant dot order pizza, 279 00:13:56,301 --> 00:14:00,430 and then basically if restaurant dot order pizza 280 00:14:00,430 --> 00:14:03,070 does not exist, so it's undefined, 281 00:14:03,070 --> 00:14:05,580 it will then short circuit the evaluation 282 00:14:05,580 --> 00:14:07,650 and nothing else will happen. 283 00:14:07,650 --> 00:14:09,960 And so that's essentially exactly the same 284 00:14:09,960 --> 00:14:11,913 as this if block here is doing. 285 00:14:13,120 --> 00:14:15,250 All right, but if it does exist. 286 00:14:15,250 --> 00:14:17,173 So if it's a truthy value, 287 00:14:17,173 --> 00:14:20,120 then the second part here will be evaluated. 288 00:14:20,120 --> 00:14:22,830 And so here in this second operand, 289 00:14:22,830 --> 00:14:26,053 we can then call the function. 290 00:14:33,560 --> 00:14:34,400 Okay. 291 00:14:34,400 --> 00:14:37,280 And it's perfectly fine to use this operands, 292 00:14:37,280 --> 00:14:39,843 the second operand` here to call a function. 293 00:14:39,843 --> 00:14:41,560 We can put anything here. 294 00:14:41,560 --> 00:14:44,163 It doesn't just have to be a single value. 295 00:14:46,070 --> 00:14:48,520 Now I'm not saying that you should go ahead 296 00:14:48,520 --> 00:14:50,890 and replace all your if statements 297 00:14:50,890 --> 00:14:53,850 with the AND or the OR operators, 298 00:14:53,850 --> 00:14:56,370 so please definitely don't do that 299 00:14:56,370 --> 00:14:58,880 because it's gonna make your code very hard 300 00:14:58,880 --> 00:15:01,020 to read in the future. 301 00:15:01,020 --> 00:15:03,570 But anyway, let's now summarize. 302 00:15:03,570 --> 00:15:07,580 So the OR operator will return the first truthy value 303 00:15:07,580 --> 00:15:09,290 of all the operands, 304 00:15:09,290 --> 00:15:13,210 or simply the last value if all of them are falsy. 305 00:15:13,210 --> 00:15:17,300 So that's what happened here, right? 306 00:15:17,300 --> 00:15:18,600 On the other hand, 307 00:15:18,600 --> 00:15:22,900 the AND operator will return the first falsy value 308 00:15:22,900 --> 00:15:26,470 or the last value if all of them are truthy. 309 00:15:26,470 --> 00:15:28,590 And as for practical applications, 310 00:15:28,590 --> 00:15:32,310 we can use the OR operator to set default values, 311 00:15:32,310 --> 00:15:34,360 and we can use the AND operator 312 00:15:34,360 --> 00:15:37,870 to execute code in the second operand 313 00:15:37,870 --> 00:15:40,510 if the first one is true. 314 00:15:40,510 --> 00:15:43,020 So play around some more with this maybe, 315 00:15:43,020 --> 00:15:45,570 and then let's just move on to the next video 316 00:15:45,570 --> 00:15:48,860 where we will solve this problem that we had here 317 00:15:48,860 --> 00:15:51,260 with this OR operator 318 00:15:51,260 --> 00:15:52,653 and this zero.