1 00:00:01,280 --> 00:00:02,910 Welcome back. 2 00:00:02,910 --> 00:00:05,510 Let's now make coding even more fun 3 00:00:05,510 --> 00:00:08,330 and actually take decisions with our code 4 00:00:08,330 --> 00:00:10,883 to make it look a lot more real. 5 00:00:12,320 --> 00:00:15,220 So let's say it that we want to write a program 6 00:00:15,220 --> 00:00:16,990 which checks whether a person 7 00:00:16,990 --> 00:00:21,030 is allowed to start taking a driver's license or not. 8 00:00:21,030 --> 00:00:24,520 And if she is, then it will print that to the console. 9 00:00:24,520 --> 00:00:28,130 And if not, it will print how many years are left 10 00:00:28,130 --> 00:00:31,593 until the person can start taking the driver's license. 11 00:00:32,760 --> 00:00:37,760 So let's start with an age and let's set it to 19. 12 00:00:38,480 --> 00:00:40,930 So we have this age and we already know 13 00:00:40,930 --> 00:00:44,640 how to check if this age is at least 18, 14 00:00:44,640 --> 00:00:48,810 which is the legal required age to start a driving license 15 00:00:48,810 --> 00:00:50,780 at least here in Europe. 16 00:00:50,780 --> 00:00:53,423 So let's actually create a variable with that. 17 00:00:54,710 --> 00:00:57,300 And I think we actually already did that. 18 00:00:57,300 --> 00:00:59,417 Let's call this one 'is old enough'. 19 00:01:00,540 --> 00:01:03,250 So again, with a variable name 20 00:01:03,250 --> 00:01:05,473 that describes exactly what we want here. 21 00:01:06,900 --> 00:01:11,010 So remember to check if the age is at least 18, 22 00:01:11,010 --> 00:01:16,010 we need it to be greater or equal than 18. 23 00:01:16,620 --> 00:01:19,140 And so this will then include 18. 24 00:01:19,140 --> 00:01:22,950 So if the age is 18, the result of this operator here 25 00:01:22,950 --> 00:01:25,660 or of this operation will then be true. 26 00:01:25,660 --> 00:01:29,810 Only if the age is 17 or 16 or anything below, 27 00:01:29,810 --> 00:01:31,573 it will turn out to be false. 28 00:01:32,410 --> 00:01:33,370 Okay. 29 00:01:33,370 --> 00:01:35,550 So we have a Boolean value now, 30 00:01:35,550 --> 00:01:36,870 and we can use this 31 00:01:36,870 --> 00:01:40,680 to take decisions using an 'if statement' 32 00:01:40,680 --> 00:01:43,300 and the 'if statement' works like this. 33 00:01:43,300 --> 00:01:47,880 All we have to do is write 'if' then open parenthesis 34 00:01:47,880 --> 00:01:51,650 and then in here goes a condition that is evaluated. 35 00:01:51,650 --> 00:01:54,250 And if this condition turns out to be true, 36 00:01:54,250 --> 00:01:57,530 then this block will be executed. 37 00:01:57,530 --> 00:01:59,720 So basically whatever code that we write 38 00:01:59,720 --> 00:02:02,380 into this block, which is denoted by 39 00:02:02,380 --> 00:02:04,690 these curly braces will be executed 40 00:02:04,690 --> 00:02:08,320 whenever the condition that's here is true. 41 00:02:08,320 --> 00:02:09,581 So in this case, let's put the condition, 42 00:02:09,581 --> 00:02:13,360 and with condition I basically mean something 43 00:02:13,360 --> 00:02:15,400 that is a Boolean value. 44 00:02:15,400 --> 00:02:18,840 So let's use, 'or is old enough' variable here 45 00:02:18,840 --> 00:02:22,200 because we already know that this will always be a Boolean. 46 00:02:22,200 --> 00:02:25,813 So again, whenever this value here is true 47 00:02:25,813 --> 00:02:29,750 then the code that's in this block here will be executed. 48 00:02:29,750 --> 00:02:34,080 And if it's false, well, then it's not going to be executed. 49 00:02:34,080 --> 00:02:37,763 So let's log to the console. 50 00:02:40,280 --> 00:02:44,023 Sarah can start driving license 51 00:02:46,880 --> 00:02:49,300 and let's just add a fun emoji here 52 00:02:50,660 --> 00:02:54,700 and on the Mac, that's Command + Control + Space 53 00:02:54,700 --> 00:02:56,600 and on Windows 10, the shortcut is Windows + . 54 00:02:56,600 --> 00:02:57,860 and on Windows 10, the shortcut is Windows + . 55 00:02:57,860 --> 00:03:00,763 but, adding the emoji here is not really important. 56 00:03:01,800 --> 00:03:05,373 So let's give it a safe and try this out now. 57 00:03:06,630 --> 00:03:11,350 And indeed we get, Sarah can start her driving license 58 00:03:11,350 --> 00:03:14,380 and that's because the age is 19. 59 00:03:14,380 --> 00:03:16,620 And so it's above 18. 60 00:03:16,620 --> 00:03:18,490 So this is true. 61 00:03:18,490 --> 00:03:21,610 And so if 'is old enough' is true 62 00:03:21,610 --> 00:03:25,030 then this block of code here will be executed 63 00:03:25,030 --> 00:03:27,360 which in this case is just one line 64 00:03:27,360 --> 00:03:30,150 but it could of course be multiple lines. 65 00:03:30,150 --> 00:03:33,010 So now let's put it to something else. 66 00:03:33,010 --> 00:03:34,360 So 15. 67 00:03:34,360 --> 00:03:36,520 And so now this is false. 68 00:03:36,520 --> 00:03:41,520 And so then this code block here should not be executed. 69 00:03:41,690 --> 00:03:44,030 So give it a safe, let's try. 70 00:03:44,030 --> 00:03:46,573 And indeed we get no output this time. 71 00:03:47,580 --> 00:03:50,373 And so that means that it worked. 72 00:03:51,420 --> 00:03:53,900 So let's put it back to 19. 73 00:03:53,900 --> 00:03:54,800 And in practice, 74 00:03:54,800 --> 00:03:59,280 we always write this condition directly here. 75 00:03:59,280 --> 00:04:01,180 So let's do that. 76 00:04:01,180 --> 00:04:04,530 So what we want is just this part. 77 00:04:04,530 --> 00:04:06,690 So let's get rid of this. 78 00:04:06,690 --> 00:04:09,790 And so this is a lot more common. 79 00:04:09,790 --> 00:04:11,570 Let's actually getting rid of this. 80 00:04:11,570 --> 00:04:14,980 And so we basically do this operation here. 81 00:04:14,980 --> 00:04:17,170 This will then return true or false. 82 00:04:17,170 --> 00:04:18,410 And depending on that, 83 00:04:18,410 --> 00:04:21,430 this code block will then be executed. 84 00:04:21,430 --> 00:04:24,010 And actually let's put it back to 15 85 00:04:24,010 --> 00:04:26,130 because now we can do something else 86 00:04:26,130 --> 00:04:29,840 which is to actually add an 'else' block. 87 00:04:29,840 --> 00:04:30,720 And we do that simply 88 00:04:30,720 --> 00:04:35,383 by writing else right after this first, 'if' block, 89 00:04:35,383 --> 00:04:37,160 and then we add another block. 90 00:04:37,160 --> 00:04:40,230 So what do you think this 'else' block is for? 91 00:04:40,230 --> 00:04:43,800 Well, this 'else' block will basically be executed 92 00:04:43,800 --> 00:04:47,090 whenever this condition here is false. 93 00:04:47,090 --> 00:04:49,500 So right now the age is below 18. 94 00:04:49,500 --> 00:04:50,830 And so this is false. 95 00:04:50,830 --> 00:04:52,240 And so as we already know, 96 00:04:52,240 --> 00:04:54,940 this block here will not be executed. 97 00:04:54,940 --> 00:04:57,800 Instead, the 'else' block will be executed. 98 00:04:57,800 --> 00:05:00,190 So whatever code we have here. 99 00:05:00,190 --> 00:05:02,510 So let's write some code in here. 100 00:05:02,510 --> 00:05:03,930 And as I sad in the beginning, 101 00:05:03,930 --> 00:05:06,290 we will calculate how many years are left 102 00:05:06,290 --> 00:05:09,820 for Sarah to start taking her license. 103 00:05:09,820 --> 00:05:13,560 So let's calculate that, 'years left'. 104 00:05:15,610 --> 00:05:20,133 And so that's simply, 18 minus the age. 105 00:05:21,360 --> 00:05:22,193 Right? 106 00:05:23,950 --> 00:05:26,520 And then we can log in a nice string into the console, 107 00:05:26,520 --> 00:05:29,070 which contains this variable. 108 00:05:29,070 --> 00:05:31,030 And as we learned in the last lecture 109 00:05:31,030 --> 00:05:34,720 the best way of doing that is to use a template literal. 110 00:05:34,720 --> 00:05:36,290 So back ticks. 111 00:05:36,290 --> 00:05:41,047 And then we say, Sarah is too young'. 112 00:05:42,160 --> 00:05:44,193 'Wait another' 113 00:05:45,630 --> 00:05:50,050 and then we insert or placeholder here basically. 114 00:05:50,050 --> 00:05:51,480 So years left 115 00:05:53,140 --> 00:05:55,700 and then years. 116 00:05:55,700 --> 00:05:57,330 Okay. 117 00:05:57,330 --> 00:06:02,330 So the result of this should be 18 minus 15, which is 3. 118 00:06:03,290 --> 00:06:06,320 And so we should see 'Wait another 3 years". 119 00:06:06,320 --> 00:06:07,453 So let's checked that. 120 00:06:09,060 --> 00:06:12,180 And indeed, that's exactly what we got. 121 00:06:12,180 --> 00:06:15,270 And so again, since this condition here 122 00:06:15,270 --> 00:06:18,920 so this operation basically turned out to be false 123 00:06:18,920 --> 00:06:22,350 then this block of code was executed. 124 00:06:22,350 --> 00:06:23,270 Great. 125 00:06:23,270 --> 00:06:25,180 Just keep in mind that this 'else' block 126 00:06:25,180 --> 00:06:27,340 is actually optional, right? 127 00:06:27,340 --> 00:06:29,840 So in the beginning we didn't have this 'else' block 128 00:06:29,840 --> 00:06:31,550 and it still did work. 129 00:06:31,550 --> 00:06:33,310 So when there is no 'else' block, 130 00:06:33,310 --> 00:06:36,730 JavaScript will then simply move on to the next line 131 00:06:36,730 --> 00:06:38,200 after the, 'if' statement 132 00:06:38,200 --> 00:06:41,390 in case that the condition is false. 133 00:06:41,390 --> 00:06:42,223 Great. 134 00:06:42,223 --> 00:06:44,820 Now, you know what an 'if', 'else' statement is 135 00:06:44,820 --> 00:06:46,680 and how it works. 136 00:06:46,680 --> 00:06:49,420 And this is actually one of the most important things 137 00:06:49,420 --> 00:06:50,640 in programming. 138 00:06:50,640 --> 00:06:52,930 We take decisions with code all the time 139 00:06:52,930 --> 00:06:55,290 which is essentially what we did here 140 00:06:55,290 --> 00:06:58,400 so that we can execute certain parts of our program 141 00:06:58,400 --> 00:07:00,740 based on certain conditions. 142 00:07:00,740 --> 00:07:01,820 Okay. 143 00:07:01,820 --> 00:07:04,780 Now what we have here is 'if', 'else' statement, 144 00:07:04,780 --> 00:07:06,380 which is the official name 145 00:07:06,380 --> 00:07:09,160 of this kind of construction here, 146 00:07:09,160 --> 00:07:10,993 is called a control structure. 147 00:07:12,170 --> 00:07:13,250 So basically this 148 00:07:16,658 --> 00:07:19,400 if this structure here is called an 'if', 'else' 149 00:07:19,400 --> 00:07:20,946 control structure 150 00:07:20,946 --> 00:07:23,590 and it is called a control structure 151 00:07:23,590 --> 00:07:26,050 because this structure actually allows us 152 00:07:26,050 --> 00:07:30,850 to have more control over the way that our code is executed. 153 00:07:30,850 --> 00:07:33,120 For example, in this, 'if', 'else' statement 154 00:07:33,120 --> 00:07:36,820 the whole code does not just execute in a linear way. 155 00:07:36,820 --> 00:07:39,430 So JavaScript does not execute 156 00:07:39,430 --> 00:07:41,600 all of this code here, linearly. 157 00:07:41,600 --> 00:07:44,590 Instead we can now control blocks of code 158 00:07:44,590 --> 00:07:46,010 that should execute 159 00:07:46,010 --> 00:07:48,620 and blocks that should not execute. 160 00:07:48,620 --> 00:07:51,120 And so again that gives us a lot more control 161 00:07:51,120 --> 00:07:52,990 over how our code works 162 00:07:52,990 --> 00:07:55,603 and that's why this is called a control structure. 163 00:07:56,670 --> 00:07:57,503 Okay. 164 00:07:57,503 --> 00:07:59,100 And there are other control structures 165 00:07:59,100 --> 00:08:00,950 that we're gonna go into a bit later. 166 00:08:01,790 --> 00:08:02,623 All right. 167 00:08:02,623 --> 00:08:06,620 So I hope that you can see how this really takes our code 168 00:08:06,620 --> 00:08:08,520 to the next level. 169 00:08:08,520 --> 00:08:09,500 Now just to make sure 170 00:08:09,500 --> 00:08:11,570 that you really understood this concept 171 00:08:11,570 --> 00:08:15,470 let's create another, a very small and simple example here. 172 00:08:15,470 --> 00:08:19,430 And this time let's actually create a variable conditionally 173 00:08:19,430 --> 00:08:22,730 and not just always use''console.log'. 174 00:08:22,730 --> 00:08:27,150 So let's create a birth year variable. 175 00:08:27,150 --> 00:08:31,223 I think we don't have it in this lecture yet. 176 00:08:32,100 --> 00:08:33,313 That's right. 177 00:08:34,680 --> 00:08:36,060 And so now what we want to do 178 00:08:36,060 --> 00:08:39,030 is to create a variable called 'century' 179 00:08:39,030 --> 00:08:41,950 which will basically contain the century 180 00:08:41,950 --> 00:08:44,320 in which this person was born. 181 00:08:44,320 --> 00:08:48,030 So in this case, it was the 20th century. 182 00:08:48,030 --> 00:08:50,490 But for example, if the person was born 183 00:08:50,490 --> 00:08:55,380 in, like, let's say 2015, then it would be the 21st century. 184 00:08:55,380 --> 00:08:57,370 So to do that, we can, of course write 185 00:08:57,370 --> 00:08:58,763 an 'if', 'else' statement, 186 00:09:00,450 --> 00:09:05,450 so we can say if the birth year is below 187 00:09:06,670 --> 00:09:08,383 or equal to 2000, 188 00:09:10,380 --> 00:09:13,880 then let century equal 20. 189 00:09:17,730 --> 00:09:20,423 And so that then means the 20th century. 190 00:09:22,690 --> 00:09:26,923 And if not, then let century be 21. 191 00:09:32,010 --> 00:09:35,130 So we're assuming that the person is not born 192 00:09:35,130 --> 00:09:38,210 in the 19th century. 193 00:09:38,210 --> 00:09:42,870 So we're not accounting for something like this, 194 00:09:42,870 --> 00:09:44,190 for example. 195 00:09:44,190 --> 00:09:47,293 So instead we always have the 20th or the 21st century. 196 00:09:49,040 --> 00:09:50,990 Now to actually make this work 197 00:09:50,990 --> 00:09:54,310 we need to define the century variable outside 198 00:09:54,310 --> 00:09:56,620 of the, 'if' or 'else' blocks. 199 00:09:56,620 --> 00:09:59,260 We will go deeply into why that is 200 00:09:59,260 --> 00:10:01,640 but for now, what you need to know is 201 00:10:01,640 --> 00:10:04,400 that this is because a variable that we define 202 00:10:04,400 --> 00:10:09,060 inside of any code block, which is what this year is, 203 00:10:09,060 --> 00:10:12,350 so this is a code block, and this is a code block. 204 00:10:12,350 --> 00:10:13,990 And any variable that we declare 205 00:10:13,990 --> 00:10:17,050 inside of one of these blocks will not be accessible 206 00:10:17,050 --> 00:10:19,500 outside of the block. 207 00:10:19,500 --> 00:10:22,693 So let me just show that to you very quickly. 208 00:10:24,400 --> 00:10:28,422 So if I try to read 'century' now, then I will get a 209 00:10:28,422 --> 00:10:33,422 an error here, you see, century is not defined. 210 00:10:33,440 --> 00:10:37,950 And so what we need to do is to define 'century' outside 211 00:10:37,950 --> 00:10:39,750 and simply leave it empty. 212 00:10:39,750 --> 00:10:43,853 And then in here we can then conditionally reassign it. 213 00:10:45,480 --> 00:10:46,820 Okay. 214 00:10:46,820 --> 00:10:49,053 And so now let's see how this works. 215 00:10:50,260 --> 00:10:53,600 And indeed now we get the century 20. 216 00:10:53,600 --> 00:10:57,270 So 1998 is below 2000 217 00:10:57,270 --> 00:11:01,080 and so this person was born in the 20th century. 218 00:11:01,080 --> 00:11:03,240 Now let's say 2012 219 00:11:03,240 --> 00:11:06,063 and so that should not be 21st century. 220 00:11:07,290 --> 00:11:10,973 And indeed that's exactly the result. 221 00:11:11,840 --> 00:11:15,270 So I hope that this example too made sense to you. 222 00:11:15,270 --> 00:11:17,050 Now, don't worry about the fact 223 00:11:17,050 --> 00:11:20,220 that we had to declare the century variable outside 224 00:11:20,220 --> 00:11:23,270 of the blocks, but matters here is that you understand 225 00:11:23,270 --> 00:11:26,640 the logic of the 'if', 'else' statement. 226 00:11:26,640 --> 00:11:27,473 Okay? 227 00:11:27,473 --> 00:11:29,890 And I hope that was clear enough 228 00:11:29,890 --> 00:11:32,610 but anyway, let's quickly recap. 229 00:11:32,610 --> 00:11:34,590 We can take decisions using code, 230 00:11:34,590 --> 00:11:36,370 using the, 'if', 'else' statement. 231 00:11:36,370 --> 00:11:40,720 And for that we write 'if', and then we open apprentices 232 00:11:40,720 --> 00:11:42,720 and in there we need a condition 233 00:11:42,720 --> 00:11:44,610 and the condition is essentially 234 00:11:44,610 --> 00:11:48,580 any code that returns a true or a false value. 235 00:11:48,580 --> 00:11:50,960 And so this is a perfect example of that 236 00:11:50,960 --> 00:11:55,540 because this operator here will return true or false right? 237 00:11:55,540 --> 00:11:59,220 And so we can use this operator to create a condition 238 00:11:59,220 --> 00:12:00,130 essentially. 239 00:12:00,130 --> 00:12:04,550 Then if the condition is true, this block will be executed. 240 00:12:04,550 --> 00:12:06,440 So all the code that is in there 241 00:12:06,440 --> 00:12:09,400 no matter how many lines of code there are. 242 00:12:09,400 --> 00:12:12,380 Now, if the condition turns out to be false 243 00:12:12,380 --> 00:12:16,070 then this 'else' block will be executed instead. 244 00:12:16,070 --> 00:12:19,480 So JavaScript will then skip this first block 245 00:12:19,480 --> 00:12:21,640 and go to the second block 246 00:12:21,640 --> 00:12:23,820 which is this one, but the 'else' block 247 00:12:23,820 --> 00:12:25,190 is actually optional. 248 00:12:25,190 --> 00:12:27,230 So if you don't have the 'else' block 249 00:12:27,230 --> 00:12:30,210 then simply no code will be executed. 250 00:12:30,210 --> 00:12:31,580 And this in a nutshell 251 00:12:31,580 --> 00:12:34,360 is how the, 'if', 'else' statement works 252 00:12:34,360 --> 00:12:37,580 and remember that this is really powerful. 253 00:12:37,580 --> 00:12:41,130 So make sure that you really understand how this works. 254 00:12:41,130 --> 00:12:43,870 And when you do understand, then you can move on 255 00:12:43,870 --> 00:12:46,760 to the next video where there is a small challenge 256 00:12:46,760 --> 00:12:47,763 waiting for you.