WEBVTT 0 00:01.280 --> 00:02.910 Welcome back. 1 00:02.910 --> 00:05.510 Let's now make coding even more fun 2 00:05.510 --> 00:08.330 and actually take decisions with our code 3 00:08.330 --> 00:10.883 to make it look a lot more real. 4 00:12.320 --> 00:15.220 So let's say it that we want to write a program 5 00:15.220 --> 00:16.990 which checks whether a person 6 00:16.990 --> 00:21.030 is allowed to start taking a driver's license or not. 7 00:21.030 --> 00:24.520 And if she is, then it will print that to the console. 8 00:24.520 --> 00:28.130 And if not, it will print how many years are left 9 00:28.130 --> 00:31.593 until the person can start taking the driver's license. 10 00:32.760 --> 00:37.760 So let's start with an age and let's set it to 19. 11 00:38.480 --> 00:40.930 So we have this age and we already know 12 00:40.930 --> 00:44.640 how to check if this age is at least 18, 13 00:44.640 --> 00:48.810 which is the legal required age to start a driving license 14 00:48.810 --> 00:50.780 at least here in Europe. 15 00:50.780 --> 00:53.423 So let's actually create a variable with that. 16 00:54.710 --> 00:57.300 And I think we actually already did that. 17 00:57.300 --> 00:59.417 Let's call this one 'is old enough'. 18 01:00.540 --> 01:03.250 So again, with a variable name 19 01:03.250 --> 01:05.473 that describes exactly what we want here. 20 01:06.900 --> 01:11.010 So remember to check if the age is at least 18, 21 01:11.010 --> 01:16.010 we need it to be greater or equal than 18. 22 01:16.620 --> 01:19.140 And so this will then include 18. 23 01:19.140 --> 01:22.950 So if the age is 18, the result of this operator here 24 01:22.950 --> 01:25.660 or of this operation will then be true. 25 01:25.660 --> 01:29.810 Only if the age is 17 or 16 or anything below, 26 01:29.810 --> 01:31.573 it will turn out to be false. 27 01:32.410 --> 01:33.370 Okay. 28 01:33.370 --> 01:35.550 So we have a Boolean value now, 29 01:35.550 --> 01:36.870 and we can use this 30 01:36.870 --> 01:40.680 to take decisions using an 'if statement' 31 01:40.680 --> 01:43.300 and the 'if statement' works like this. 32 01:43.300 --> 01:47.880 All we have to do is write 'if' then open parenthesis 33 01:47.880 --> 01:51.650 and then in here goes a condition that is evaluated. 34 01:51.650 --> 01:54.250 And if this condition turns out to be true, 35 01:54.250 --> 01:57.530 then this block will be executed. 36 01:57.530 --> 01:59.720 So basically whatever code that we write 37 01:59.720 --> 02:02.380 into this block, which is denoted by 38 02:02.380 --> 02:04.690 these curly braces will be executed 39 02:04.690 --> 02:08.320 whenever the condition that's here is true. 40 02:08.320 --> 02:09.581 So in this case, let's put the condition, 41 02:09.581 --> 02:13.360 and with condition I basically mean something 42 02:13.360 --> 02:15.400 that is a Boolean value. 43 02:15.400 --> 02:18.840 So let's use, 'or is old enough' variable here 44 02:18.840 --> 02:22.200 because we already know that this will always be a Boolean. 45 02:22.200 --> 02:25.813 So again, whenever this value here is true 46 02:25.813 --> 02:29.750 then the code that's in this block here will be executed. 47 02:29.750 --> 02:34.080 And if it's false, well, then it's not going to be executed. 48 02:34.080 --> 02:37.763 So let's log to the console. 49 02:40.280 --> 02:44.023 Sarah can start driving license 50 02:46.880 --> 02:49.300 and let's just add a fun emoji here 51 02:50.660 --> 02:54.700 and on the Mac, that's Command + Control + Space 52 02:54.700 --> 02:56.600 and on Windows 10, the shortcut is Windows + . 53 02:56.600 --> 02:57.860 and on Windows 10, the shortcut is Windows + . 54 02:57.860 --> 03:00.763 but, adding the emoji here is not really important. 55 03:01.800 --> 03:05.373 So let's give it a safe and try this out now. 56 03:06.630 --> 03:11.350 And indeed we get, Sarah can start her driving license 57 03:11.350 --> 03:14.380 and that's because the age is 19. 58 03:14.380 --> 03:16.620 And so it's above 18. 59 03:16.620 --> 03:18.490 So this is true. 60 03:18.490 --> 03:21.610 And so if 'is old enough' is true 61 03:21.610 --> 03:25.030 then this block of code here will be executed 62 03:25.030 --> 03:27.360 which in this case is just one line 63 03:27.360 --> 03:30.150 but it could of course be multiple lines. 64 03:30.150 --> 03:33.010 So now let's put it to something else. 65 03:33.010 --> 03:34.360 So 15. 66 03:34.360 --> 03:36.520 And so now this is false. 67 03:36.520 --> 03:41.520 And so then this code block here should not be executed. 68 03:41.690 --> 03:44.030 So give it a safe, let's try. 69 03:44.030 --> 03:46.573 And indeed we get no output this time. 70 03:47.580 --> 03:50.373 And so that means that it worked. 71 03:51.420 --> 03:53.900 So let's put it back to 19. 72 03:53.900 --> 03:54.800 And in practice, 73 03:54.800 --> 03:59.280 we always write this condition directly here. 74 03:59.280 --> 04:01.180 So let's do that. 75 04:01.180 --> 04:04.530 So what we want is just this part. 76 04:04.530 --> 04:06.690 So let's get rid of this. 77 04:06.690 --> 04:09.790 And so this is a lot more common. 78 04:09.790 --> 04:11.570 Let's actually getting rid of this. 79 04:11.570 --> 04:14.980 And so we basically do this operation here. 80 04:14.980 --> 04:17.170 This will then return true or false. 81 04:17.170 --> 04:18.410 And depending on that, 82 04:18.410 --> 04:21.430 this code block will then be executed. 83 04:21.430 --> 04:24.010 And actually let's put it back to 15 84 04:24.010 --> 04:26.130 because now we can do something else 85 04:26.130 --> 04:29.840 which is to actually add an 'else' block. 86 04:29.840 --> 04:30.720 And we do that simply 87 04:30.720 --> 04:35.383 by writing else right after this first, 'if' block, 88 04:35.383 --> 04:37.160 and then we add another block. 89 04:37.160 --> 04:40.230 So what do you think this 'else' block is for? 90 04:40.230 --> 04:43.800 Well, this 'else' block will basically be executed 91 04:43.800 --> 04:47.090 whenever this condition here is false. 92 04:47.090 --> 04:49.500 So right now the age is below 18. 93 04:49.500 --> 04:50.830 And so this is false. 94 04:50.830 --> 04:52.240 And so as we already know, 95 04:52.240 --> 04:54.940 this block here will not be executed. 96 04:54.940 --> 04:57.800 Instead, the 'else' block will be executed. 97 04:57.800 --> 05:00.190 So whatever code we have here. 98 05:00.190 --> 05:02.510 So let's write some code in here. 99 05:02.510 --> 05:03.930 And as I sad in the beginning, 100 05:03.930 --> 05:06.290 we will calculate how many years are left 101 05:06.290 --> 05:09.820 for Sarah to start taking her license. 102 05:09.820 --> 05:13.560 So let's calculate that, 'years left'. 103 05:15.610 --> 05:20.133 And so that's simply, 18 minus the age. 104 05:21.360 --> 05:22.193 Right? 105 05:23.950 --> 05:26.520 And then we can log in a nice string into the console, 106 05:26.520 --> 05:29.070 which contains this variable. 107 05:29.070 --> 05:31.030 And as we learned in the last lecture 108 05:31.030 --> 05:34.720 the best way of doing that is to use a template literal. 109 05:34.720 --> 05:36.290 So back ticks. 110 05:36.290 --> 05:41.047 And then we say, Sarah is too young'. 111 05:42.160 --> 05:44.193 'Wait another' 112 05:45.630 --> 05:50.050 and then we insert or placeholder here basically. 113 05:50.050 --> 05:51.480 So years left 114 05:53.140 --> 05:55.700 and then years. 115 05:55.700 --> 05:57.330 Okay. 116 05:57.330 --> 06:02.330 So the result of this should be 18 minus 15, which is 3. 117 06:03.290 --> 06:06.320 And so we should see 'Wait another 3 years". 118 06:06.320 --> 06:07.453 So let's checked that. 119 06:09.060 --> 06:12.180 And indeed, that's exactly what we got. 120 06:12.180 --> 06:15.270 And so again, since this condition here 121 06:15.270 --> 06:18.920 so this operation basically turned out to be false 122 06:18.920 --> 06:22.350 then this block of code was executed. 123 06:22.350 --> 06:23.270 Great. 124 06:23.270 --> 06:25.180 Just keep in mind that this 'else' block 125 06:25.180 --> 06:27.340 is actually optional, right? 126 06:27.340 --> 06:29.840 So in the beginning we didn't have this 'else' block 127 06:29.840 --> 06:31.550 and it still did work. 128 06:31.550 --> 06:33.310 So when there is no 'else' block, 129 06:33.310 --> 06:36.730 JavaScript will then simply move on to the next line 130 06:36.730 --> 06:38.200 after the, 'if' statement 131 06:38.200 --> 06:41.390 in case that the condition is false. 132 06:41.390 --> 06:42.223 Great. 133 06:42.223 --> 06:44.820 Now, you know what an 'if', 'else' statement is 134 06:44.820 --> 06:46.680 and how it works. 135 06:46.680 --> 06:49.420 And this is actually one of the most important things 136 06:49.420 --> 06:50.640 in programming. 137 06:50.640 --> 06:52.930 We take decisions with code all the time 138 06:52.930 --> 06:55.290 which is essentially what we did here 139 06:55.290 --> 06:58.400 so that we can execute certain parts of our program 140 06:58.400 --> 07:00.740 based on certain conditions. 141 07:00.740 --> 07:01.820 Okay. 142 07:01.820 --> 07:04.780 Now what we have here is 'if', 'else' statement, 143 07:04.780 --> 07:06.380 which is the official name 144 07:06.380 --> 07:09.160 of this kind of construction here, 145 07:09.160 --> 07:10.993 is called a control structure. 146 07:12.170 --> 07:13.250 So basically this 147 07:16.658 --> 07:19.400 if this structure here is called an 'if', 'else' 148 07:19.400 --> 07:20.946 control structure 149 07:20.946 --> 07:23.590 and it is called a control structure 150 07:23.590 --> 07:26.050 because this structure actually allows us 151 07:26.050 --> 07:30.850 to have more control over the way that our code is executed. 152 07:30.850 --> 07:33.120 For example, in this, 'if', 'else' statement 153 07:33.120 --> 07:36.820 the whole code does not just execute in a linear way. 154 07:36.820 --> 07:39.430 So JavaScript does not execute 155 07:39.430 --> 07:41.600 all of this code here, linearly. 156 07:41.600 --> 07:44.590 Instead we can now control blocks of code 157 07:44.590 --> 07:46.010 that should execute 158 07:46.010 --> 07:48.620 and blocks that should not execute. 159 07:48.620 --> 07:51.120 And so again that gives us a lot more control 160 07:51.120 --> 07:52.990 over how our code works 161 07:52.990 --> 07:55.603 and that's why this is called a control structure. 162 07:56.670 --> 07:57.503 Okay. 163 07:57.503 --> 07:59.100 And there are other control structures 164 07:59.100 --> 08:00.950 that we're gonna go into a bit later. 165 08:01.790 --> 08:02.623 All right. 166 08:02.623 --> 08:06.620 So I hope that you can see how this really takes our code 167 08:06.620 --> 08:08.520 to the next level. 168 08:08.520 --> 08:09.500 Now just to make sure 169 08:09.500 --> 08:11.570 that you really understood this concept 170 08:11.570 --> 08:15.470 let's create another, a very small and simple example here. 171 08:15.470 --> 08:19.430 And this time let's actually create a variable conditionally 172 08:19.430 --> 08:22.730 and not just always use''console.log'. 173 08:22.730 --> 08:27.150 So let's create a birth year variable. 174 08:27.150 --> 08:31.223 I think we don't have it in this lecture yet. 175 08:32.100 --> 08:33.313 That's right. 176 08:34.680 --> 08:36.060 And so now what we want to do 177 08:36.060 --> 08:39.030 is to create a variable called 'century' 178 08:39.030 --> 08:41.950 which will basically contain the century 179 08:41.950 --> 08:44.320 in which this person was born. 180 08:44.320 --> 08:48.030 So in this case, it was the 20th century. 181 08:48.030 --> 08:50.490 But for example, if the person was born 182 08:50.490 --> 08:55.380 in, like, let's say 2015, then it would be the 21st century. 183 08:55.380 --> 08:57.370 So to do that, we can, of course write 184 08:57.370 --> 08:58.763 an 'if', 'else' statement, 185 09:00.450 --> 09:05.450 so we can say if the birth year is below 186 09:06.670 --> 09:08.383 or equal to 2000, 187 09:10.380 --> 09:13.880 then let century equal 20. 188 09:17.730 --> 09:20.423 And so that then means the 20th century. 189 09:22.690 --> 09:26.923 And if not, then let century be 21. 190 09:32.010 --> 09:35.130 So we're assuming that the person is not born 191 09:35.130 --> 09:38.210 in the 19th century. 192 09:38.210 --> 09:42.870 So we're not accounting for something like this, 193 09:42.870 --> 09:44.190 for example. 194 09:44.190 --> 09:47.293 So instead we always have the 20th or the 21st century. 195 09:49.040 --> 09:50.990 Now to actually make this work 196 09:50.990 --> 09:54.310 we need to define the century variable outside 197 09:54.310 --> 09:56.620 of the, 'if' or 'else' blocks. 198 09:56.620 --> 09:59.260 We will go deeply into why that is 199 09:59.260 --> 10:01.640 but for now, what you need to know is 200 10:01.640 --> 10:04.400 that this is because a variable that we define 201 10:04.400 --> 10:09.060 inside of any code block, which is what this year is, 202 10:09.060 --> 10:12.350 so this is a code block, and this is a code block. 203 10:12.350 --> 10:13.990 And any variable that we declare 204 10:13.990 --> 10:17.050 inside of one of these blocks will not be accessible 205 10:17.050 --> 10:19.500 outside of the block. 206 10:19.500 --> 10:22.693 So let me just show that to you very quickly. 207 10:24.400 --> 10:28.422 So if I try to read 'century' now, then I will get a 208 10:28.422 --> 10:33.422 an error here, you see, century is not defined. 209 10:33.440 --> 10:37.950 And so what we need to do is to define 'century' outside 210 10:37.950 --> 10:39.750 and simply leave it empty. 211 10:39.750 --> 10:43.853 And then in here we can then conditionally reassign it. 212 10:45.480 --> 10:46.820 Okay. 213 10:46.820 --> 10:49.053 And so now let's see how this works. 214 10:50.260 --> 10:53.600 And indeed now we get the century 20. 215 10:53.600 --> 10:57.270 So 1998 is below 2000 216 10:57.270 --> 11:01.080 and so this person was born in the 20th century. 217 11:01.080 --> 11:03.240 Now let's say 2012 218 11:03.240 --> 11:06.063 and so that should not be 21st century. 219 11:07.290 --> 11:10.973 And indeed that's exactly the result. 220 11:11.840 --> 11:15.270 So I hope that this example too made sense to you. 221 11:15.270 --> 11:17.050 Now, don't worry about the fact 222 11:17.050 --> 11:20.220 that we had to declare the century variable outside 223 11:20.220 --> 11:23.270 of the blocks, but matters here is that you understand 224 11:23.270 --> 11:26.640 the logic of the 'if', 'else' statement. 225 11:26.640 --> 11:27.473 Okay? 226 11:27.473 --> 11:29.890 And I hope that was clear enough 227 11:29.890 --> 11:32.610 but anyway, let's quickly recap. 228 11:32.610 --> 11:34.590 We can take decisions using code, 229 11:34.590 --> 11:36.370 using the, 'if', 'else' statement. 230 11:36.370 --> 11:40.720 And for that we write 'if', and then we open apprentices 231 11:40.720 --> 11:42.720 and in there we need a condition 232 11:42.720 --> 11:44.610 and the condition is essentially 233 11:44.610 --> 11:48.580 any code that returns a true or a false value. 234 11:48.580 --> 11:50.960 And so this is a perfect example of that 235 11:50.960 --> 11:55.540 because this operator here will return true or false right? 236 11:55.540 --> 11:59.220 And so we can use this operator to create a condition 237 11:59.220 --> 12:00.130 essentially. 238 12:00.130 --> 12:04.550 Then if the condition is true, this block will be executed. 239 12:04.550 --> 12:06.440 So all the code that is in there 240 12:06.440 --> 12:09.400 no matter how many lines of code there are. 241 12:09.400 --> 12:12.380 Now, if the condition turns out to be false 242 12:12.380 --> 12:16.070 then this 'else' block will be executed instead. 243 12:16.070 --> 12:19.480 So JavaScript will then skip this first block 244 12:19.480 --> 12:21.640 and go to the second block 245 12:21.640 --> 12:23.820 which is this one, but the 'else' block 246 12:23.820 --> 12:25.190 is actually optional. 247 12:25.190 --> 12:27.230 So if you don't have the 'else' block 248 12:27.230 --> 12:30.210 then simply no code will be executed. 249 12:30.210 --> 12:31.580 And this in a nutshell 250 12:31.580 --> 12:34.360 is how the, 'if', 'else' statement works 251 12:34.360 --> 12:37.580 and remember that this is really powerful. 252 12:37.580 --> 12:41.130 So make sure that you really understand how this works. 253 12:41.130 --> 12:43.870 And when you do understand, then you can move on 254 12:43.870 --> 12:46.760 to the next video where there is a small challenge 255 12:46.760 --> 12:47.763 waiting for you.