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.