1 00:00:01,080 --> 00:00:03,140 So, we already saw two ways 2 00:00:03,140 --> 00:00:05,060 of writing conditionals. 3 00:00:05,060 --> 00:00:09,290 The regular if/else statement and the switch statement. 4 00:00:09,290 --> 00:00:11,150 But there is another one. 5 00:00:11,150 --> 00:00:13,660 And that is the conditional operator. 6 00:00:13,660 --> 00:00:16,120 And this one is actually really nice. 7 00:00:16,120 --> 00:00:17,823 So let's check it out. 8 00:00:19,300 --> 00:00:21,490 So the conditional operator allows us 9 00:00:21,490 --> 00:00:24,630 to write something similar to an if/else statement 10 00:00:24,630 --> 00:00:26,660 but all in one line. 11 00:00:26,660 --> 00:00:30,980 So let's again start by defining an age variable. 12 00:00:30,980 --> 00:00:34,530 And this time I'm saying it to 23. 13 00:00:34,530 --> 00:00:39,530 And now, let's write, age, greater or equal 18. 14 00:00:40,700 --> 00:00:45,700 So this is your or test to check whether the age is 15 00:00:46,000 --> 00:00:47,400 at least 18. 16 00:00:47,400 --> 00:00:49,920 So basically if the person is of full age. 17 00:00:49,920 --> 00:00:52,580 And then after this condition, 18 00:00:52,580 --> 00:00:54,800 we use a question mark. 19 00:00:54,800 --> 00:00:58,400 And then here we write essentially or if block. 20 00:00:58,400 --> 00:01:01,220 So that's the code that we want to be executed 21 00:01:01,220 --> 00:01:04,443 in case that disc condition here is true. 22 00:01:06,130 --> 00:01:08,767 So let's say console dot log, 23 00:01:08,767 --> 00:01:13,767 "I like to drink wine." 24 00:01:14,110 --> 00:01:16,623 Let's again add a nice emoji here. 25 00:01:18,870 --> 00:01:20,834 So basically if the person is of full age, 26 00:01:20,834 --> 00:01:23,533 they are allowed to drink wine. 27 00:01:24,930 --> 00:01:27,040 In this if blog, so to say, 28 00:01:27,040 --> 00:01:30,380 we can only have essentially one line of code. 29 00:01:30,380 --> 00:01:34,490 So only one thing can be done if this condition is true. 30 00:01:34,490 --> 00:01:37,890 Then we also need basically a mandatory else block. 31 00:01:37,890 --> 00:01:40,543 And that goes after this colon. 32 00:01:41,476 --> 00:01:43,203 Let's just copy, 33 00:01:44,940 --> 00:01:45,773 this code, 34 00:01:47,650 --> 00:01:50,667 and say, "I like to drink water." 35 00:01:55,180 --> 00:01:57,930 Okay, and that's actually it. 36 00:01:57,930 --> 00:02:02,570 So let's check the result and then analyze this a bit more. 37 00:02:02,570 --> 00:02:05,227 So in fact what gets logged to the console is, 38 00:02:05,227 --> 00:02:07,160 "I like to drink wine." 39 00:02:07,160 --> 00:02:09,530 And that's because the age is 23. 40 00:02:09,530 --> 00:02:11,793 And so this condition is true. 41 00:02:13,330 --> 00:02:14,490 Right. 42 00:02:14,490 --> 00:02:18,230 And this means that this code here is gonna be executed 43 00:02:18,230 --> 00:02:19,730 and this one is not. 44 00:02:19,730 --> 00:02:21,280 So the second part here, 45 00:02:21,280 --> 00:02:24,320 which is essentially the else part. 46 00:02:24,320 --> 00:02:26,113 Now if we were 15, 47 00:02:26,980 --> 00:02:30,763 then of course the second part is executed. 48 00:02:33,440 --> 00:02:34,570 Okay. 49 00:02:34,570 --> 00:02:37,310 So that's essentially writing an if/else statement 50 00:02:37,310 --> 00:02:38,800 all in one line. 51 00:02:38,800 --> 00:02:40,680 But instead of using a statement, 52 00:02:40,680 --> 00:02:43,150 we use this conditional operator. 53 00:02:43,150 --> 00:02:45,460 And the conditional operator is also called 54 00:02:45,460 --> 00:02:47,100 the ternary operator. 55 00:02:47,100 --> 00:02:49,010 Because it has three parts. 56 00:02:49,010 --> 00:02:50,990 Unlike other operators. 57 00:02:50,990 --> 00:02:53,980 For example the plus operator has only two parts. 58 00:02:53,980 --> 00:02:56,050 For example, one plus two. 59 00:02:56,050 --> 00:02:58,530 But this one has three parts, 60 00:02:58,530 --> 00:03:00,170 so the condition, 61 00:03:00,170 --> 00:03:01,610 then the if part, 62 00:03:01,610 --> 00:03:03,343 and then the else part. 63 00:03:04,560 --> 00:03:09,460 Okay, now the conditional operator is in fact an operator, 64 00:03:09,460 --> 00:03:11,840 just as the name says. 65 00:03:11,840 --> 00:03:16,100 And remember that an operator always produces a value. 66 00:03:16,100 --> 00:03:20,637 So in other words an operator is an expression, right. 67 00:03:20,637 --> 00:03:24,500 So what this means is that if we have a value, 68 00:03:24,500 --> 00:03:27,780 we can then assign that value to a variable. 69 00:03:27,780 --> 00:03:31,720 So with this we can make the ternary operator really useful 70 00:03:31,720 --> 00:03:36,110 to basically conditionally declare variables. 71 00:03:36,110 --> 00:03:40,030 So, what we did here is not so much used indeed. 72 00:03:40,030 --> 00:03:43,120 Instead we do it more like this. 73 00:03:43,120 --> 00:03:45,543 So we would still test for this condition. 74 00:03:47,189 --> 00:03:49,680 So checking if the person is of full age. 75 00:03:49,680 --> 00:03:53,210 And if that's true then all we want is essentially 76 00:03:53,210 --> 00:03:55,713 to return this. 77 00:03:58,000 --> 00:04:02,253 And if not we, only want this. 78 00:04:03,820 --> 00:04:04,653 Okay. 79 00:04:04,653 --> 00:04:09,653 And so again, this whole operator here is now an expression. 80 00:04:09,850 --> 00:04:12,080 And an expression produces a value. 81 00:04:12,080 --> 00:04:15,230 And so now, we can go ahead and store that value 82 00:04:15,230 --> 00:04:16,343 into a variable. 83 00:04:18,240 --> 00:04:19,900 So let's call that "Drink" 84 00:04:19,900 --> 00:04:24,230 and then we can log this drink 85 00:04:25,850 --> 00:04:26,683 to the console. 86 00:04:28,110 --> 00:04:29,960 And let's comment out this part here. 87 00:04:31,840 --> 00:04:33,910 And check. 88 00:04:33,910 --> 00:04:38,540 And indeed we get wine as we declared up here. 89 00:04:38,540 --> 00:04:39,373 Great. 90 00:04:39,373 --> 00:04:42,730 So drink is now really defined conditionally, 91 00:04:42,730 --> 00:04:44,830 based on this condition. 92 00:04:44,830 --> 00:04:47,150 And all in one simple line. 93 00:04:47,150 --> 00:04:49,800 So without the conditional operator, 94 00:04:49,800 --> 00:04:52,700 we would have to use and if/else statement 95 00:04:52,700 --> 00:04:55,410 and with that this wouldn't be so easy. 96 00:04:55,410 --> 00:04:58,040 Remember, when we want to declare a variable 97 00:04:58,040 --> 00:05:00,850 inside of an if or an else blog, 98 00:05:00,850 --> 00:05:03,383 we need to first declare that variable outside. 99 00:05:05,060 --> 00:05:06,663 Let's actually do that. 100 00:05:07,920 --> 00:05:09,730 So simply call it "drink2" 101 00:05:11,330 --> 00:05:16,213 and then we would say, if the age is at least 18, 102 00:05:18,320 --> 00:05:19,590 then "drink2"... 103 00:05:21,060 --> 00:05:22,683 is gonna be wine. 104 00:05:23,600 --> 00:05:25,343 Just grab that here. 105 00:05:29,220 --> 00:05:30,200 Or else... 106 00:05:32,797 --> 00:05:35,823 "drink2" is gonna be this water here. 107 00:05:38,520 --> 00:05:39,353 Okay. 108 00:05:39,353 --> 00:05:42,550 And again we need to define a "drink2" variable 109 00:05:42,550 --> 00:05:45,970 outside of the if and the else blogs, 110 00:05:45,970 --> 00:05:49,200 because any variable that we define inside of a blog, 111 00:05:49,200 --> 00:05:51,500 is not available outside. 112 00:05:51,500 --> 00:05:53,420 So we declared a variable here 113 00:05:53,420 --> 00:05:56,233 and then reassign it inside of the blogs. 114 00:05:59,340 --> 00:06:01,583 So just to make sure it worked, 115 00:06:03,590 --> 00:06:05,930 let's log this one here as well. 116 00:06:05,930 --> 00:06:09,453 We really just did this for the sake of comparison. 117 00:06:11,300 --> 00:06:14,810 Okay, just so you can see the tremendous difference 118 00:06:14,810 --> 00:06:18,530 that the ternary operator introduces here in our code. 119 00:06:18,530 --> 00:06:19,410 So if you ask me, 120 00:06:19,410 --> 00:06:22,090 this one here is a lot easier to understand 121 00:06:22,090 --> 00:06:24,270 and a lot easier to write. 122 00:06:24,270 --> 00:06:25,860 Right. 123 00:06:25,860 --> 00:06:28,193 So just changing this to something else here. 124 00:06:29,340 --> 00:06:33,620 And yeah, in both cases we get water back. 125 00:06:33,620 --> 00:06:36,860 So using the ternary operator we were really able 126 00:06:36,860 --> 00:06:40,330 to transform this big block of code 127 00:06:40,330 --> 00:06:43,070 all into one small operation like this. 128 00:06:43,070 --> 00:06:45,990 And this is gonna be useful in so many cases. 129 00:06:45,990 --> 00:06:48,270 And we will really take advantage of this 130 00:06:48,270 --> 00:06:51,370 throughout the rest of the entire course. 131 00:06:51,370 --> 00:06:53,933 And now we can take it even further. 132 00:06:54,810 --> 00:06:59,170 Because since the ternary operator is really an expression, 133 00:06:59,170 --> 00:07:02,490 we can now use it, for example, in a template literal. 134 00:07:02,490 --> 00:07:05,330 So unlike a normal if/else statement, 135 00:07:05,330 --> 00:07:08,470 like we tried and failed in the last lecture. 136 00:07:08,470 --> 00:07:09,303 Remember? 137 00:07:10,310 --> 00:07:14,660 It was here where I tried to insert the if statement here 138 00:07:14,660 --> 00:07:16,350 and of course it didn't work. 139 00:07:16,350 --> 00:07:20,030 But using the ternary operator, which produces a value, 140 00:07:20,030 --> 00:07:22,300 we can actually have conditionals 141 00:07:22,300 --> 00:07:24,223 inside of a template literal. 142 00:07:25,190 --> 00:07:29,283 So let's simply try that. 143 00:07:30,190 --> 00:07:34,610 And so I can now say, "I like to drink" 144 00:07:34,610 --> 00:07:38,920 and then based on the age, I can say if I like to drink wine 145 00:07:38,920 --> 00:07:39,753 or water. 146 00:07:40,960 --> 00:07:43,430 So, here in this placeholder, remember, 147 00:07:43,430 --> 00:07:46,220 I can put any expression that I want. 148 00:07:46,220 --> 00:07:48,920 And this here is an expression. 149 00:07:48,920 --> 00:07:51,320 Again because it produces a value. 150 00:07:51,320 --> 00:07:53,310 So I grab it from here. 151 00:07:53,310 --> 00:07:54,283 Paste it here, 152 00:07:55,860 --> 00:07:56,817 and that's it. 153 00:07:56,817 --> 00:08:00,520 The template literal will now use whatever result we get 154 00:08:00,520 --> 00:08:02,570 from this operator. 155 00:08:02,570 --> 00:08:06,010 So that's either gonna be wine or water. 156 00:08:06,010 --> 00:08:09,763 And then it assembles that result into the final string. 157 00:08:11,010 --> 00:08:12,193 So let's check. 158 00:08:13,330 --> 00:08:15,110 And indeed, once more, 159 00:08:15,110 --> 00:08:17,393 the conditional operator works just fine. 160 00:08:19,020 --> 00:08:21,393 And with our age back to 23, 161 00:08:22,300 --> 00:08:25,510 then we got, "I like to drink wine." 162 00:08:25,510 --> 00:08:29,420 Great, so I hope that this makes sense. 163 00:08:29,420 --> 00:08:31,690 I know that especially this part here 164 00:08:31,690 --> 00:08:34,550 can be a little bit confusing for beginners. 165 00:08:34,550 --> 00:08:38,350 So take a minute to really understand what happens here. 166 00:08:38,350 --> 00:08:41,660 And always keep in mind the concept of operator 167 00:08:41,660 --> 00:08:42,980 and of expression. 168 00:08:42,980 --> 00:08:45,780 Which is something that produces a value. 169 00:08:45,780 --> 00:08:49,010 And thanks to that we can then put that value 170 00:08:49,010 --> 00:08:52,370 here in this placeholder in the template literal. 171 00:08:52,370 --> 00:08:53,203 All right. 172 00:08:54,100 --> 00:08:56,300 Now to finish, I just wanted to mention 173 00:08:56,300 --> 00:09:00,750 that the ternary operator is not thought as a replacement 174 00:09:00,750 --> 00:09:03,250 of if/else statements. 175 00:09:03,250 --> 00:09:05,700 We still need if/else all the time. 176 00:09:05,700 --> 00:09:08,200 For example when we have bigger blocks of code 177 00:09:08,200 --> 00:09:11,180 that we need to execute based on a condition. 178 00:09:11,180 --> 00:09:14,690 In that case the ternary operator is not gonna work. 179 00:09:14,690 --> 00:09:16,950 But the ternary operator is perfect 180 00:09:16,950 --> 00:09:20,170 when we just need to take a quick decision, 181 00:09:20,170 --> 00:09:22,900 for example, like this one. 182 00:09:22,900 --> 00:09:25,040 And that's especially true in places 183 00:09:25,040 --> 00:09:28,050 where JavaScript really expects an expression, 184 00:09:28,050 --> 00:09:30,600 just like here in this template literal. 185 00:09:30,600 --> 00:09:33,400 So here we could not use an if/else statement 186 00:09:33,400 --> 00:09:37,660 and so the ternary operator really comes to our rescue here. 187 00:09:37,660 --> 00:09:39,520 So I think you can understand 188 00:09:39,520 --> 00:09:41,760 that this one is really, really important. 189 00:09:41,760 --> 00:09:45,740 So make sure that you absolutely understand how it works. 190 00:09:45,740 --> 00:09:47,360 And once you do understand, 191 00:09:47,360 --> 00:09:50,781 then let's move on to the final lecture of this section, 192 00:09:50,781 --> 00:09:54,190 which is yet another coding challenge for you to see 193 00:09:54,190 --> 00:09:57,640 if you did actually understand how the conditional 194 00:09:57,640 --> 00:09:59,703 or ternary operator works.