WEBVTT 1 00:00:01.170 --> 00:00:03.860 To finish this part about functions, 2 00:00:03.860 --> 00:00:07.660 let's review everything important that we learned so far. 3 00:00:07.660 --> 00:00:11.370 In order to make sure that you really understand functions 4 00:00:11.370 --> 00:00:13.983 before we move on to other topics. 5 00:00:15.440 --> 00:00:19.340 And let's start by bringing back and rewriting the function 6 00:00:19.340 --> 00:00:20.950 that we wrote before, 7 00:00:20.950 --> 00:00:24.053 which is the years until retirement function. 8 00:00:25.520 --> 00:00:27.610 So I think that was, 9 00:00:27.610 --> 00:00:31.380 yeah it was here in the lecture about arrow functions. 10 00:00:31.380 --> 00:00:35.243 So let's copy this one and paste it here. 11 00:00:37.320 --> 00:00:38.910 And the first thing that we're gonna do 12 00:00:38.910 --> 00:00:40.150 is to actually convert it 13 00:00:40.150 --> 00:00:43.380 to a more normal function expression. 14 00:00:43.380 --> 00:00:45.230 So how do we do that? 15 00:00:45.230 --> 00:00:46.520 Well, in this case, 16 00:00:46.520 --> 00:00:48.810 we simply get rid of the arrow here 17 00:00:50.030 --> 00:00:55.020 and then write the function keyword here. 18 00:00:55.020 --> 00:00:58.540 And so now this is just a regular function expression 19 00:00:58.540 --> 00:01:00.720 like we learned before. 20 00:01:00.720 --> 00:01:04.160 Next up we could export this functionality here 21 00:01:04.160 --> 00:01:05.940 into another function. 22 00:01:05.940 --> 00:01:10.100 So like a calcAge function that we've been using before. 23 00:01:10.100 --> 00:01:11.330 So let's do that 24 00:01:11.330 --> 00:01:14.600 because then we can do what we did in the last lecture, 25 00:01:14.600 --> 00:01:18.283 which was to call one function inside of the other function. 26 00:01:19.380 --> 00:01:22.245 So let's write another function expression here, 27 00:01:22.245 --> 00:01:25.780 calcAge equals 28 00:01:27.380 --> 00:01:30.813 a function and then the birth year again. 29 00:01:33.530 --> 00:01:38.310 And what we return from this one is simply 2037 30 00:01:39.840 --> 00:01:42.110 minus the birth year. 31 00:01:42.110 --> 00:01:45.290 So we already did that before. Right. 32 00:01:45.290 --> 00:01:47.370 Now you might find it confusing 33 00:01:47.370 --> 00:01:49.780 that we have two different functions here 34 00:01:49.780 --> 00:01:51.910 with the same parameter names. 35 00:01:51.910 --> 00:01:55.390 So this one has birth year and this one has too, 36 00:01:55.390 --> 00:01:57.430 but that's not a problem at all. 37 00:01:57.430 --> 00:02:02.060 So this birth year in this function is not at all related 38 00:02:02.060 --> 00:02:04.400 to this birth year in this function. 39 00:02:04.400 --> 00:02:06.770 They are two completely different parameters. 40 00:02:06.770 --> 00:02:09.520 So basically two different variables. 41 00:02:09.520 --> 00:02:11.870 We could even have a variable outside 42 00:02:11.870 --> 00:02:13.510 of any of the functions, 43 00:02:13.510 --> 00:02:16.240 which could also be called birth year. 44 00:02:16.240 --> 00:02:17.200 Okay. 45 00:02:17.200 --> 00:02:18.360 And we could do that now, 46 00:02:18.360 --> 00:02:22.130 but I don't want to confuse you even further. Okay. 47 00:02:22.130 --> 00:02:25.900 But what matters here is that this parameter is really 48 00:02:25.900 --> 00:02:29.390 like a local variable to each function. 49 00:02:29.390 --> 00:02:30.223 Anyway, 50 00:02:30.223 --> 00:02:34.320 let's now go ahead and delete this here and instead, 51 00:02:34.320 --> 00:02:37.683 calculate the age based on the function that we just wrote. 52 00:02:38.680 --> 00:02:41.430 And actually we just delete this part here. 53 00:02:41.430 --> 00:02:46.150 And so now the age will come from the function calcAge. 54 00:02:46.150 --> 00:02:50.850 And what we pass in here is the birth year. 55 00:02:50.850 --> 00:02:53.420 So again, it's confusing now with these 56 00:02:53.420 --> 00:02:55.710 same parameter names here, 57 00:02:55.710 --> 00:02:58.860 but let's quickly call this function 58 00:02:58.860 --> 00:03:02.610 just so I can quickly show you the data flow. 59 00:03:02.610 --> 00:03:07.250 So years until retirement with birth year 1991 60 00:03:07.250 --> 00:03:11.580 and first name of Jonas. 61 00:03:11.580 --> 00:03:16.150 So 1991 will be the birth year here in this function. 62 00:03:16.150 --> 00:03:17.800 Then as a first step, 63 00:03:17.800 --> 00:03:21.950 this years until retirement function called calcAge 64 00:03:21.950 --> 00:03:26.000 and it calls calcAge with the argument of 1991. 65 00:03:26.000 --> 00:03:27.120 So this one here, 66 00:03:27.120 --> 00:03:32.120 and so then birth year in this function also becomes 1991. 67 00:03:32.360 --> 00:03:37.360 And so then here, the operation will be 2037 minus 1991. 68 00:03:37.550 --> 00:03:39.140 And if you find it less confusing, 69 00:03:39.140 --> 00:03:42.080 we could change this year to something else. 70 00:03:42.080 --> 00:03:46.080 Let's just say year and it would work the exact same way. 71 00:03:46.080 --> 00:03:47.630 Okay. So again, 72 00:03:47.630 --> 00:03:52.160 these variable names in these two different functions, 73 00:03:52.160 --> 00:03:55.750 they do not have anything to do with one another. 74 00:03:55.750 --> 00:03:56.583 All right. 75 00:03:56.583 --> 00:03:58.630 But let's actually put it back here 76 00:03:58.630 --> 00:04:02.235 because it's a, it's good to keep this in mind. 77 00:04:02.235 --> 00:04:03.068 Then down here, 78 00:04:03.068 --> 00:04:06.040 let's actually go back to returning a number 79 00:04:06.040 --> 00:04:10.763 and not the string, which for now I will just comment out. 80 00:04:12.390 --> 00:04:15.030 So here we call this function and once more, 81 00:04:15.030 --> 00:04:17.513 I'm not gonna store it into a variable. 82 00:04:18.560 --> 00:04:22.453 So we will just log the result of this, to the console. 83 00:04:24.170 --> 00:04:27.410 So this should be just like before, 19. 84 00:04:27.410 --> 00:04:28.350 Okay. 85 00:04:28.350 --> 00:04:30.330 But now I want to show you something 86 00:04:30.330 --> 00:04:32.930 which is to call this function again, 87 00:04:32.930 --> 00:04:36.100 let's say now with a Mike 88 00:04:36.100 --> 00:04:39.073 and let's say Mike was born in 1970. 89 00:04:41.210 --> 00:04:42.233 And so, 90 00:04:43.400 --> 00:04:47.120 his years until retirement will be two. 91 00:04:47.120 --> 00:04:51.260 So a negative number, which means that he already retired. 92 00:04:51.260 --> 00:04:53.930 So let's quickly account for that. 93 00:04:53.930 --> 00:04:57.710 So what we will do is to basically return this number, 94 00:04:57.710 --> 00:04:59.740 if it is above zero, 95 00:04:59.740 --> 00:05:01.760 and if it is below zero, 96 00:05:01.760 --> 00:05:05.510 we are gonna return something else like a minus one 97 00:05:05.510 --> 00:05:08.113 or something or some special number. 98 00:05:09.460 --> 00:05:12.450 So instead of returning simply the retirement, 99 00:05:12.450 --> 00:05:16.580 let's take a decision here based on the retirement value. 100 00:05:16.580 --> 00:05:19.870 And so that's something that we learned in the last lecture. 101 00:05:19.870 --> 00:05:23.920 So let's use an if else statement and say, 102 00:05:23.920 --> 00:05:27.500 if the retirement is 103 00:05:27.500 --> 00:05:29.400 greater than zero. 104 00:05:29.400 --> 00:05:33.010 So if there are more than zero years left until retirement 105 00:05:33.010 --> 00:05:36.203 then return this retirement value. 106 00:05:37.480 --> 00:05:38.550 Okay. 107 00:05:38.550 --> 00:05:40.453 So remember that in the, if block, 108 00:05:41.460 --> 00:05:43.550 we can put any code that we want. 109 00:05:43.550 --> 00:05:46.393 And so that includes the return statement. 110 00:05:47.410 --> 00:05:52.410 And else, well, let's just return always minus one. 111 00:05:53.520 --> 00:05:57.410 So, minus one is kind of a standard number in programming. 112 00:05:57.410 --> 00:05:59.603 We could also like return, 113 00:06:00.540 --> 00:06:01.373 like this. 114 00:06:01.373 --> 00:06:05.203 So a number that shows us clearly that this has no meaning. 115 00:06:06.120 --> 00:06:09.470 Let's just keep it at number one, minus number one. 116 00:06:09.470 --> 00:06:10.530 Okay. 117 00:06:10.530 --> 00:06:12.310 And I'm returning actually numbers here 118 00:06:12.310 --> 00:06:15.280 and not a string as we had before, 119 00:06:15.280 --> 00:06:17.340 because that's usually what we do, 120 00:06:17.340 --> 00:06:21.440 especially when we actually receive a number as an input. 121 00:06:21.440 --> 00:06:24.290 So here in this function, we get birth year 122 00:06:25.470 --> 00:06:28.140 here as an input, and it's a number 123 00:06:28.140 --> 00:06:30.070 and therefore it's a good practice to 124 00:06:30.070 --> 00:06:32.183 then also return a number. 125 00:06:34.100 --> 00:06:36.140 Okay, let's try this again. 126 00:06:36.140 --> 00:06:39.740 Now, we'll even change it to something more drastic. 127 00:06:39.740 --> 00:06:44.363 So 1950 and let's see what we get now. 128 00:06:46.070 --> 00:06:46.910 Now, 129 00:06:46.910 --> 00:06:49.280 so it's minus one now. 130 00:06:49.280 --> 00:06:50.180 Great. 131 00:06:50.180 --> 00:06:53.130 Now, one thing that I didn't mention yet is 132 00:06:53.130 --> 00:06:55.450 that this return keyword here 133 00:06:55.450 --> 00:06:58.600 will actually immediately exit the function. 134 00:06:58.600 --> 00:07:02.870 So it will first return the value that we tell it to return. 135 00:07:02.870 --> 00:07:05.370 So in this case, the retirement value, 136 00:07:05.370 --> 00:07:08.630 and then after that, the function is done. 137 00:07:08.630 --> 00:07:10.390 So it exits immediately. 138 00:07:10.390 --> 00:07:13.700 And we also say that the function has returned. 139 00:07:13.700 --> 00:07:16.340 So let me actually demonstrate that to you. 140 00:07:16.340 --> 00:07:19.363 And what I will do is to take this string here. 141 00:07:20.340 --> 00:07:23.020 Now we can get rid of the rest 142 00:07:23.020 --> 00:07:25.173 and I will put that after the return. 143 00:07:26.210 --> 00:07:27.913 So we will log to the console, 144 00:07:29.720 --> 00:07:32.233 this string here that we just had. 145 00:07:35.020 --> 00:07:39.910 And then here let's log simply 146 00:07:41.820 --> 00:07:45.600 the first name has already retired, 147 00:07:47.410 --> 00:07:51.310 and then we can put another emoji here, 148 00:07:51.310 --> 00:07:53.883 like this party emoji that I like. 149 00:07:55.330 --> 00:07:56.523 And, 150 00:07:58.640 --> 00:07:59.473 yeah. 151 00:07:59.473 --> 00:08:02.480 What do you think will happen when we run this code now 152 00:08:02.480 --> 00:08:04.560 and keep in mind that we have the return 153 00:08:04.560 --> 00:08:07.990 before the console dot log, in both cases. 154 00:08:07.990 --> 00:08:12.610 So in the, if block here and also in the else block. 155 00:08:12.610 --> 00:08:14.990 So what do you think is gonna happen with these 156 00:08:14.990 --> 00:08:15.913 console dot logs? 157 00:08:16.850 --> 00:08:18.990 Well, let's see. 158 00:08:18.990 --> 00:08:21.420 And indeed they are simply ignored, 159 00:08:21.420 --> 00:08:23.480 so they will not get executed. 160 00:08:23.480 --> 00:08:25.930 Because as I said before, 161 00:08:25.930 --> 00:08:28.610 the return statement immediately exits 162 00:08:28.610 --> 00:08:31.660 or immediately returns the function. 163 00:08:31.660 --> 00:08:33.880 And so therefore there is no chance 164 00:08:33.880 --> 00:08:36.860 that this code here is even reached. 165 00:08:36.860 --> 00:08:39.320 So if we want this one here to execute, 166 00:08:39.320 --> 00:08:41.660 we need to put it before the return 167 00:08:41.660 --> 00:08:46.043 and in vs code, I can simply hit option or alt up. 168 00:08:47.190 --> 00:08:50.000 Okay. And that will then move the line up. 169 00:08:50.000 --> 00:08:50.900 So we can, 170 00:08:50.900 --> 00:08:55.900 we also have that here somewhere in this menu. 171 00:08:56.600 --> 00:08:59.460 So that's move line up and move line down. 172 00:08:59.460 --> 00:09:03.060 So just so you see which one is the shortcut. 173 00:09:03.060 --> 00:09:04.750 So I use that one all the time. 174 00:09:04.750 --> 00:09:08.570 I also use add cursor below all the time, 175 00:09:08.570 --> 00:09:11.460 and I also use add next occurrence. 176 00:09:11.460 --> 00:09:14.230 So that would be command or control D. 177 00:09:14.230 --> 00:09:17.320 So what this means is that we have, if we have 178 00:09:18.430 --> 00:09:20.300 this for example, here select it 179 00:09:20.300 --> 00:09:22.900 then we can already see all the other ones. 180 00:09:22.900 --> 00:09:27.110 But if we hit command D then it will actually select that. 181 00:09:27.110 --> 00:09:29.330 So you see. Now we have these four selected. 182 00:09:29.330 --> 00:09:32.560 And so we now could replace all of them at the same time, 183 00:09:32.560 --> 00:09:35.310 for example, like this. Okay. 184 00:09:35.310 --> 00:09:38.520 But anyway, let's go back to what we were doing here. 185 00:09:38.520 --> 00:09:43.220 So I just moved the console dot log before the return here. 186 00:09:43.220 --> 00:09:46.770 And so now there should be a chance that the console dot log 187 00:09:46.770 --> 00:09:50.630 is actually executed before the value is returned. 188 00:09:50.630 --> 00:09:52.050 And so let's do the same here. 189 00:09:52.050 --> 00:09:55.451 So again, I'm hitting option or alt up. 190 00:09:55.451 --> 00:09:58.400 Add to these two lines to changed position, 191 00:09:58.400 --> 00:10:02.040 and now, yeah, now it works. 192 00:10:02.040 --> 00:10:03.910 So we get the string and here we get, 193 00:10:03.910 --> 00:10:05.833 Mike has already retired. 194 00:10:06.940 --> 00:10:07.773 Okay. 195 00:10:07.773 --> 00:10:10.513 So this was to show you some more things about functions 196 00:10:10.513 --> 00:10:12.560 that we had already learned, 197 00:10:12.560 --> 00:10:14.970 and also show you something new, 198 00:10:14.970 --> 00:10:18.110 which is the fact that the return statement here 199 00:10:18.110 --> 00:10:20.810 immediately exits the function. 200 00:10:20.810 --> 00:10:23.240 So we reviewed already some things here, 201 00:10:23.240 --> 00:10:25.660 but now it's time to really review everything 202 00:10:25.660 --> 00:10:27.760 that we learned so far about functions 203 00:10:27.760 --> 00:10:29.513 in these first couple of lectures. 204 00:10:30.750 --> 00:10:32.623 And here we have the three type of functions 205 00:10:32.623 --> 00:10:34.460 that we talked about. 206 00:10:34.460 --> 00:10:37.490 So we have first, the function declaration, 207 00:10:37.490 --> 00:10:40.620 and one particularity about function declarations 208 00:10:40.620 --> 00:10:42.500 is that they can be used before 209 00:10:42.500 --> 00:10:44.850 they are declared in the code. 210 00:10:44.850 --> 00:10:48.050 Second, we have the function expressions, 211 00:10:48.050 --> 00:10:50.360 and they are essentially function values 212 00:10:50.360 --> 00:10:52.890 that are stored in a variable. 213 00:10:52.890 --> 00:10:55.430 And finally, we have arrow functions 214 00:10:55.430 --> 00:10:58.810 that are in fact also function expressions, 215 00:10:58.810 --> 00:11:00.490 but special ones. 216 00:11:00.490 --> 00:11:03.540 And these are great for quick one line functions 217 00:11:03.540 --> 00:11:06.960 where we don't need to explicitly use the return keyword 218 00:11:06.960 --> 00:11:09.290 and no curly braces either. 219 00:11:09.290 --> 00:11:12.280 I also said that this one has no this keyword, 220 00:11:12.280 --> 00:11:16.030 but more about that in one of the future lectures. 221 00:11:16.030 --> 00:11:18.160 Now what's important to note here is that 222 00:11:18.160 --> 00:11:21.710 these are three different ways of writing functions, 223 00:11:21.710 --> 00:11:24.390 but they all work in a similar way. 224 00:11:24.390 --> 00:11:28.760 So all of them can receive input data, they transform data, 225 00:11:28.760 --> 00:11:31.110 and then they can output data. 226 00:11:31.110 --> 00:11:32.250 It's all optional, 227 00:11:32.250 --> 00:11:35.440 but usually that's the things that functions do. 228 00:11:35.440 --> 00:11:37.960 And no matter which type of function we use, 229 00:11:37.960 --> 00:11:40.413 we can always do these three things. 230 00:11:41.350 --> 00:11:43.750 And now let's zoom in a little bit further 231 00:11:43.750 --> 00:11:47.430 and take a close look at the structure of a 232 00:11:47.430 --> 00:11:49.780 common function let's say. 233 00:11:49.780 --> 00:11:52.070 And this one here is a function statement, 234 00:11:52.070 --> 00:11:53.950 but it works the exact same way 235 00:11:53.950 --> 00:11:57.050 for all other types of functions again. 236 00:11:57.050 --> 00:12:00.960 So first, usually a function needs a function name. 237 00:12:00.960 --> 00:12:03.510 So calcAge in this example, 238 00:12:03.510 --> 00:12:06.300 then a function also has parameters. 239 00:12:06.300 --> 00:12:09.380 And these parameters are essentially placeholders, 240 00:12:09.380 --> 00:12:11.520 that receive input values. 241 00:12:11.520 --> 00:12:12.970 So, as I said before, 242 00:12:12.970 --> 00:12:16.740 these are a little bit like local variables of a function. 243 00:12:16.740 --> 00:12:18.710 So variables that are defined 244 00:12:18.710 --> 00:12:21.950 only inside of this very function. 245 00:12:21.950 --> 00:12:23.950 Now, as you also already know, 246 00:12:23.950 --> 00:12:27.370 we use functions to reuse pieces of code, 247 00:12:27.370 --> 00:12:31.460 and these pieces of code are inside the function body. 248 00:12:31.460 --> 00:12:34.310 So this is where the functions input data 249 00:12:34.310 --> 00:12:38.200 is usually processed and then returned. 250 00:12:38.200 --> 00:12:40.860 And speaking of the return, by the end of the function, 251 00:12:40.860 --> 00:12:43.300 we usually have a return statement, 252 00:12:43.300 --> 00:12:46.860 which we use to output a value from the function. 253 00:12:46.860 --> 00:12:49.940 And also, as I mentioned a little bit earlier, 254 00:12:49.940 --> 00:12:52.900 the return statement also immediately terminates 255 00:12:52.900 --> 00:12:55.190 the function's execution. 256 00:12:55.190 --> 00:12:58.560 We also say that the function returns, okay. 257 00:12:58.560 --> 00:13:01.010 And now about calling the function, 258 00:13:01.010 --> 00:13:03.110 we do that using parenthesis. 259 00:13:03.110 --> 00:13:04.780 So we write the name of the function 260 00:13:04.780 --> 00:13:06.920 like we did here with calcAge 261 00:13:06.920 --> 00:13:10.560 and then with a parenthesis we call the function. 262 00:13:10.560 --> 00:13:12.300 Because without the parenthesis, 263 00:13:12.300 --> 00:13:14.530 the function is really just a value. 264 00:13:14.530 --> 00:13:16.470 But then with the parenthesis, 265 00:13:16.470 --> 00:13:18.310 we actually called a function. 266 00:13:18.310 --> 00:13:20.550 And we can also say that we run the function 267 00:13:20.550 --> 00:13:24.090 or invoked a function or execute a function. 268 00:13:24.090 --> 00:13:28.350 And all of these terms kind of mean the same thing. 269 00:13:28.350 --> 00:13:29.360 Now, in this case, 270 00:13:29.360 --> 00:13:32.120 since the function actually has parameters, 271 00:13:32.120 --> 00:13:36.600 we then call the function with arguments and these arguments 272 00:13:36.600 --> 00:13:40.370 are the actual values of the function parameters. 273 00:13:40.370 --> 00:13:44.690 So we use these to input the actual data into the function. 274 00:13:44.690 --> 00:13:48.400 And we can also imagine this as replacing the placeholders 275 00:13:48.400 --> 00:13:50.970 that are the parameters. 276 00:13:50.970 --> 00:13:54.750 Then once the calcAge function has finally done its job, 277 00:13:54.750 --> 00:13:58.170 then all this expression will basically be replaced 278 00:13:58.170 --> 00:14:00.140 with the returned value. 279 00:14:00.140 --> 00:14:03.620 So in this case, the age that was replaced here. 280 00:14:03.620 --> 00:14:06.340 And that age value is what we then store 281 00:14:06.340 --> 00:14:09.010 into this age variable. 282 00:14:09.010 --> 00:14:12.870 So we use this variable to basically save the returned value 283 00:14:12.870 --> 00:14:15.700 that was outputed from the function. 284 00:14:15.700 --> 00:14:16.780 Okay. 285 00:14:16.780 --> 00:14:19.940 Now just one other thing that I want to make clear is 286 00:14:19.940 --> 00:14:23.030 that this console dot log that we have in the function. 287 00:14:23.030 --> 00:14:25.220 So in that first line there, 288 00:14:25.220 --> 00:14:28.520 has nothing to do with returning a value. 289 00:14:28.520 --> 00:14:31.550 This simply prints a message to the developer console, 290 00:14:31.550 --> 00:14:34.280 but it has nothing to do with returning. 291 00:14:34.280 --> 00:14:37.130 Actually the console dot log is actually just 292 00:14:37.130 --> 00:14:40.860 another function call inside the calcAge function 293 00:14:40.860 --> 00:14:44.680 because console dot log is itself a function. 294 00:14:44.680 --> 00:14:47.080 And so the argument that we pass into 295 00:14:47.080 --> 00:14:48.940 the console dot log function 296 00:14:48.940 --> 00:14:52.240 is what will get printed to the developer console. 297 00:14:52.240 --> 00:14:55.080 Okay. So just wanted to make sure 298 00:14:55.080 --> 00:14:57.020 that you really get this distinction 299 00:14:57.020 --> 00:14:59.870 between console dot log and return. 300 00:14:59.870 --> 00:15:02.360 The reason why we always use console dot log 301 00:15:02.360 --> 00:15:05.960 is because we want to see the results of our experiments 302 00:15:05.960 --> 00:15:08.433 in the developer console, in the browser. 303 00:15:09.330 --> 00:15:10.163 Anyway, 304 00:15:10.163 --> 00:15:13.770 I think this pretty much sums up all there is to know, 305 00:15:13.770 --> 00:15:16.700 at least for now about functions. 306 00:15:16.700 --> 00:15:19.570 So make sure that you get all of this down 307 00:15:19.570 --> 00:15:22.350 and then you can move on right to the next video 308 00:15:22.350 --> 00:15:24.050 where the first coding challenge 309 00:15:24.050 --> 00:15:26.000 of this section waits for you. 310 00:15:26.000 --> 00:15:28.320 And as you can probably guess, 311 00:15:28.320 --> 00:15:31.210 it's gonna be about writing your own function 312 00:15:31.210 --> 00:15:32.940 for the very first time. 313 00:15:32.940 --> 00:15:34.653 So I hope to see you there soon.