Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,180 --> 00:00:03,010 The fundamental building block 2 2 00:00:03,010 --> 00:00:07,160 of real world JavaScript applications are functions. 3 3 00:00:07,160 --> 00:00:10,494 They are one of the most essential concepts in the language 4 4 00:00:10,494 --> 00:00:14,323 and so let's study functions over the next couple of videos. 5 5 00:00:15,830 --> 00:00:19,140 So what actually are functions? 6 6 00:00:19,140 --> 00:00:22,570 Well in the most simple form a function 7 7 00:00:22,570 --> 00:00:25,890 is simply a piece of code that we can reuse 8 8 00:00:25,890 --> 00:00:28,690 over and over again in our code. 9 9 00:00:28,690 --> 00:00:31,490 So it's a little bit like a variable 10 10 00:00:31,490 --> 00:00:34,050 but for whole chunks of code. 11 11 00:00:34,050 --> 00:00:37,400 So remember a variable holds value 12 12 00:00:37,400 --> 00:00:42,360 but a function can hold one or more complete lines of code. 13 13 00:00:42,360 --> 00:00:45,970 So let's not declare our very first function 14 14 00:00:45,970 --> 00:00:48,180 so we start with the function keyword 15 15 00:00:49,830 --> 00:00:52,530 and then we define a function name 16 16 00:00:52,530 --> 00:00:55,330 and let's now just create a simple logger 17 17 00:00:55,330 --> 00:00:58,140 which is a function that will simply log 18 18 00:00:58,140 --> 00:00:59,403 something to the console. 19 19 00:01:00,800 --> 00:01:04,480 So I will call this one logger and then we need parenthesis 20 20 00:01:04,480 --> 00:01:07,360 and we will see why in a next example 21 21 00:01:07,360 --> 00:01:09,090 and then we use the curly braces 22 22 00:01:09,090 --> 00:01:12,230 to create the so-called function buddy. 23 23 00:01:12,230 --> 00:01:15,670 So all the code that is within this code block here 24 24 00:01:15,670 --> 00:01:18,290 so within this block of curly braces 25 25 00:01:18,290 --> 00:01:19,770 is called the function buddy 26 26 00:01:19,770 --> 00:01:21,370 and it's this code that will 27 27 00:01:21,370 --> 00:01:25,050 be executed when we run this function. 28 28 00:01:25,050 --> 00:01:28,990 So let's say we needed to execute a log many times 29 29 00:01:28,990 --> 00:01:30,853 somewhere in our program. 30 30 00:01:31,890 --> 00:01:36,890 So let's simply console dot log my name is Jonas 31 31 00:01:39,830 --> 00:01:41,690 and so somewhere in our program 32 32 00:01:41,690 --> 00:01:45,630 we needed to reuse this line of code here multiple times 33 33 00:01:45,630 --> 00:01:49,440 and so that's why we put it in a function, okay? 34 34 00:01:49,440 --> 00:01:53,090 So we created the function and now we can use it 35 35 00:01:53,090 --> 00:01:56,520 and we can use it as many times as we want. 36 36 00:01:56,520 --> 00:02:00,080 So to use the function, we simply write the function name 37 37 00:02:00,080 --> 00:02:04,000 followed by a parenthesis and that's actually it 38 38 00:02:04,000 --> 00:02:08,640 and this process here of basically using the function 39 39 00:02:08,640 --> 00:02:12,320 is called invoking the function, running the function 40 40 00:02:12,320 --> 00:02:14,400 or calling the function. 41 41 00:02:14,400 --> 00:02:17,120 So let me actually write these terms here 42 42 00:02:18,410 --> 00:02:23,410 so calling running or invoking the function 43 43 00:02:27,780 --> 00:02:30,280 and you will see me use these three terms here 44 44 00:02:30,280 --> 00:02:32,040 interchangeably, okay? 45 45 00:02:32,040 --> 00:02:36,220 So they basically mean the same thing you can think of them 46 46 00:02:36,220 --> 00:02:39,620 as like executing or using the function 47 47 00:02:39,620 --> 00:02:43,120 that we defined previously, okay? 48 48 00:02:43,120 --> 00:02:47,260 And as I said, we can now use or call 49 49 00:02:47,260 --> 00:02:51,420 or run this function as many times as we want 50 50 00:02:51,420 --> 00:02:54,270 and each time that we call the function like this 51 51 00:02:54,270 --> 00:02:56,520 then the code that is in the function 52 52 00:02:56,520 --> 00:02:59,960 will get executed, all right? 53 53 00:02:59,960 --> 00:03:02,403 So in this case, what should we expect here? 54 54 00:03:03,500 --> 00:03:07,310 Let's see and indeed we get this 55 55 00:03:07,310 --> 00:03:09,770 my name is Jonas log three times 56 56 00:03:09,770 --> 00:03:12,290 because we call the function three times 57 57 00:03:12,290 --> 00:03:16,720 and so this line of code here was executed three times. 58 58 00:03:16,720 --> 00:03:20,290 Great, so we just wrote our very first function 59 59 00:03:20,290 --> 00:03:22,530 and it's already working just fine 60 60 00:03:22,530 --> 00:03:24,450 and I hope that this logic 61 61 00:03:24,450 --> 00:03:26,770 of reusing code makes sense to you 62 62 00:03:27,930 --> 00:03:30,071 but let's now take it to the next level 63 63 00:03:30,071 --> 00:03:33,880 and really use some more functionalities of functions 64 64 00:03:33,880 --> 00:03:35,670 because they can do a lot more 65 65 00:03:35,670 --> 00:03:39,800 than simply reusing a line of code like we did here. 66 66 00:03:39,800 --> 00:03:41,743 So usually when we write functions 67 67 00:03:41,743 --> 00:03:45,090 we also pass data into a function 68 68 00:03:45,090 --> 00:03:49,410 and additionally, a function can also return data as well 69 69 00:03:49,410 --> 00:03:51,570 which means to give us data back 70 70 00:03:51,570 --> 00:03:55,420 that we can then use for something else in the program. 71 71 00:03:55,420 --> 00:03:59,090 So a function cannot only reuse a piece of code 72 72 00:03:59,090 --> 00:04:00,260 like we did here 73 73 00:04:00,260 --> 00:04:03,710 but it can also receive data and return data back 74 74 00:04:04,630 --> 00:04:08,840 and so I like to think of functions as machines. 75 75 00:04:08,840 --> 00:04:11,445 So I think that's a great analogy 76 76 00:04:11,445 --> 00:04:15,490 so for example, let's imagine a food processor, 77 77 00:04:15,490 --> 00:04:17,970 so we put foot into the processor 78 78 00:04:17,970 --> 00:04:20,880 then the processor does something to our food 79 79 00:04:20,880 --> 00:04:23,680 which is the function body basically 80 80 00:04:23,680 --> 00:04:24,810 and then in the end 81 81 00:04:24,810 --> 00:04:27,820 the food processor returns to processed food 82 82 00:04:27,820 --> 00:04:29,750 for example, a juice 83 83 00:04:29,750 --> 00:04:33,960 and so that's exactly what we can do with functions as well 84 84 00:04:33,960 --> 00:04:37,193 and actually let's implement exactly this example. 85 85 00:04:39,200 --> 00:04:42,740 So, again, we need to use the function keyword 86 86 00:04:44,120 --> 00:04:46,620 and then we choose a function name 87 87 00:04:46,620 --> 00:04:48,630 and just like with variable names 88 88 00:04:48,630 --> 00:04:51,600 we should choose descriptive function names 89 89 00:04:51,600 --> 00:04:53,450 so that we know exactly what they do. 90 90 00:04:54,470 --> 00:04:57,750 So let's call this one a fruit processor 91 91 00:04:58,640 --> 00:04:59,570 but in this function 92 92 00:04:59,570 --> 00:05:02,950 we also specify something called parameters 93 93 00:05:02,950 --> 00:05:05,340 and parameters are like variables 94 94 00:05:05,340 --> 00:05:08,180 that are specific only to this function 95 95 00:05:08,180 --> 00:05:11,580 and they will get defined once we call the function. 96 96 00:05:11,580 --> 00:05:14,000 So let's give this fruit processor function 97 97 00:05:14,000 --> 00:05:16,610 two parameters, apples 98 98 00:05:16,610 --> 00:05:21,610 and then a second one separated by a comma called oranges 99 99 00:05:22,340 --> 00:05:25,230 and again these two will get defined 100 100 00:05:25,230 --> 00:05:27,330 once the function is called 101 101 00:05:27,330 --> 00:05:32,010 and they represent the input data of this function, okay? 102 102 00:05:32,010 --> 00:05:33,930 And this will make even more sense 103 103 00:05:33,930 --> 00:05:36,230 when we then actually call his function 104 104 00:05:38,560 --> 00:05:42,860 and let's start by logging these to the console. 105 105 00:05:42,860 --> 00:05:45,770 So apples and also oranges 106 106 00:05:46,810 --> 00:05:48,050 and so what I'm doing here 107 107 00:05:48,050 --> 00:05:50,290 is to basically use these parameters here. 108 108 00:05:50,290 --> 00:05:54,760 So apples and oranges just as if they were normal variables 109 109 00:05:54,760 --> 00:05:56,860 here inside this function 110 110 00:05:56,860 --> 00:05:59,560 and now let's actually do something more interesting 111 111 00:05:59,560 --> 00:06:01,490 with these parameters 112 112 00:06:01,490 --> 00:06:05,790 and so we want to kind of simulate that is fruit processor 113 113 00:06:05,790 --> 00:06:09,260 produces a juice out of the apples and oranges 114 114 00:06:09,260 --> 00:06:10,640 that we give it 115 115 00:06:10,640 --> 00:06:15,640 and so let's just create a string, which says that. 116 116 00:06:16,040 --> 00:06:18,790 So we wanna create a variable called juice 117 117 00:06:19,680 --> 00:06:21,290 and then a template literal 118 118 00:06:22,310 --> 00:06:24,790 and I'm gonna say juice with 119 119 00:06:25,910 --> 00:06:29,403 and then I'm using actually the apples parameter here. 120 120 00:06:30,610 --> 00:06:33,890 So apples and then apples 121 121 00:06:33,890 --> 00:06:36,630 because this apples parameter will be a number 122 122 00:06:36,630 --> 00:06:37,890 once we call this. 123 123 00:06:37,890 --> 00:06:40,959 For example, if we set apples to three 124 124 00:06:40,959 --> 00:06:44,130 then the string will be juice with three apples 125 125 00:06:45,750 --> 00:06:48,440 and again this will really make sense 126 126 00:06:48,440 --> 00:06:50,480 once we call this function 127 127 00:06:51,800 --> 00:06:56,800 so oranges and oranges again, okay? 128 128 00:06:56,990 --> 00:07:00,000 So here we build a string using the input data 129 129 00:07:00,000 --> 00:07:02,290 that we get into the function 130 130 00:07:02,290 --> 00:07:04,450 and now comes the really cool part 131 131 00:07:04,450 --> 00:07:08,420 because now we can use the return keyword 132 132 00:07:08,420 --> 00:07:12,340 and with this, we can return any value from the function 133 133 00:07:12,340 --> 00:07:16,690 and so let's actually return the juice that we just produced 134 134 00:07:16,690 --> 00:07:19,130 and so this value that we then return 135 135 00:07:19,130 --> 00:07:22,000 can be used anywhere later in our code. 136 136 00:07:22,000 --> 00:07:25,320 So basically this Jews will become the result 137 137 00:07:25,320 --> 00:07:29,490 of executing this function and let's actually do that. 138 138 00:07:29,490 --> 00:07:34,110 So let's call or run or invoke this function now 139 139 00:07:35,530 --> 00:07:36,980 so fruit processor 140 140 00:07:38,020 --> 00:07:40,410 and now we're gonna specify the actual values 141 141 00:07:40,410 --> 00:07:43,680 for the parameters, apples and oranges 142 142 00:07:43,680 --> 00:07:47,490 and so let's say for example, five apples 143 143 00:07:47,490 --> 00:07:51,200 and zero oranges, okay? 144 144 00:07:51,200 --> 00:07:53,970 And so these now will be the inputs 145 145 00:07:53,970 --> 00:07:56,900 of the fruit processor function. 146 146 00:07:56,900 --> 00:07:59,760 So you can think of these parameters here 147 147 00:07:59,760 --> 00:08:02,880 like empty spaces that we still need to fill out 148 148 00:08:02,880 --> 00:08:04,850 when we are writing the function 149 149 00:08:04,850 --> 00:08:07,520 and when we call the function, then later in the code 150 150 00:08:07,520 --> 00:08:11,120 here at this point, we then filled these blank spaces 151 151 00:08:11,120 --> 00:08:14,220 by passing in the real specific values 152 152 00:08:14,220 --> 00:08:17,120 which will then get assigned to the parameters 153 153 00:08:17,120 --> 00:08:20,020 and this example, apples will become five 154 154 00:08:20,020 --> 00:08:24,170 and oranges, which is the second parameter here, right? 155 155 00:08:24,170 --> 00:08:28,050 Will become zero, and these actual values here 156 156 00:08:28,050 --> 00:08:31,083 of the parameters are called the arguments. 157 157 00:08:32,530 --> 00:08:36,060 Alright, so let's now basically run the script 158 158 00:08:37,210 --> 00:08:39,750 and so now we get five and zero. 159 159 00:08:39,750 --> 00:08:43,530 so this is coming from line 26, which is this line. 160 160 00:08:43,530 --> 00:08:46,360 So it's this logging to the console of the apples 161 161 00:08:46,360 --> 00:08:50,200 which is five and oranges which is zero 162 162 00:08:50,200 --> 00:08:53,290 and apples are five because that's the value 163 163 00:08:53,290 --> 00:08:55,980 that we specified here, okay? 164 164 00:08:55,980 --> 00:08:58,570 So we specified apples as five 165 165 00:08:58,570 --> 00:09:01,740 and so in this function the apple parameter 166 166 00:09:01,740 --> 00:09:04,680 or you can think of this parameter as a variable 167 167 00:09:04,680 --> 00:09:09,210 is now five and oranges is of course zero 168 168 00:09:09,210 --> 00:09:12,810 but now you might wonder what about the juice 169 169 00:09:12,810 --> 00:09:14,330 that just produced here? 170 170 00:09:14,330 --> 00:09:15,810 Where is it? 171 171 00:09:15,810 --> 00:09:19,230 Well, the juice was returned from this function. 172 172 00:09:19,230 --> 00:09:21,560 So basically that means that the result 173 173 00:09:21,560 --> 00:09:23,470 of running this function here 174 174 00:09:23,470 --> 00:09:26,210 is the juice that we just returned. 175 175 00:09:26,210 --> 00:09:29,030 Basically, once this function has been executed 176 176 00:09:29,030 --> 00:09:31,520 this code here is then replaced 177 177 00:09:31,520 --> 00:09:33,710 by the result of the function 178 178 00:09:33,710 --> 00:09:36,250 and in this case that's gonna be the juice string 179 179 00:09:36,250 --> 00:09:37,550 that we produced. 180 180 00:09:37,550 --> 00:09:41,070 So if we want to use that value that was returned 181 181 00:09:41,070 --> 00:09:43,170 we need to store it in a variable 182 182 00:09:44,560 --> 00:09:45,543 so let's do that. 183 183 00:09:46,820 --> 00:09:49,340 So let's call it apple juice 184 184 00:09:52,880 --> 00:09:57,880 and then let's log that to the console, reload it here 185 185 00:10:01,990 --> 00:10:06,283 and now we get juice with five apples and zero oranges. 186 186 00:10:07,190 --> 00:10:09,833 So let's recap again, what happened here? 187 187 00:10:11,150 --> 00:10:14,630 So we called the fruit processor function here 188 188 00:10:14,630 --> 00:10:18,370 with two arguments, five and zero 189 189 00:10:18,370 --> 00:10:20,890 and these arguments are the specific. 190 190 00:10:20,890 --> 00:10:24,540 So the actual values of the functions parameters 191 191 00:10:24,540 --> 00:10:27,900 which are apples and oranges 192 192 00:10:27,900 --> 00:10:30,600 and so when the function is running now, 193 193 00:10:30,600 --> 00:10:34,510 apples in here will be five and oranges will be zero. 194 194 00:10:34,510 --> 00:10:39,510 Then we use these values to build this juice string here 195 195 00:10:39,710 --> 00:10:43,770 and then we return that value from the function 196 196 00:10:43,770 --> 00:10:45,560 and what that means is that basically 197 197 00:10:45,560 --> 00:10:48,260 the result of calling this function here 198 198 00:10:48,260 --> 00:10:52,940 will be the juice value that was just returned, okay? 199 199 00:10:52,940 --> 00:10:55,810 And then we need to save that value somewhere 200 200 00:10:55,810 --> 00:10:57,570 we need to capture it 201 201 00:10:57,570 --> 00:11:00,920 and we do that by basically saving it 202 202 00:11:00,920 --> 00:11:03,120 into this apple juice variable 203 203 00:11:03,120 --> 00:11:07,050 and then we can simply lock that value to the console. 204 204 00:11:07,050 --> 00:11:09,590 Of course we could have also directly logged it 205 205 00:11:09,590 --> 00:11:10,543 to the console. 206 206 00:11:11,660 --> 00:11:14,990 So basically without capturing the value anywhere 207 207 00:11:14,990 --> 00:11:16,293 and simply log in it. 208 208 00:11:17,750 --> 00:11:19,400 So let me just copy this one here 209 209 00:11:23,270 --> 00:11:24,870 and so if I run this now. 210 210 00:11:24,870 --> 00:11:27,100 we should see the same string twice 211 211 00:11:28,690 --> 00:11:30,560 and yes, indeed. 212 212 00:11:30,560 --> 00:11:34,880 Now the fruit processor function was executed twice 213 213 00:11:34,880 --> 00:11:38,080 once here and once here 214 214 00:11:38,080 --> 00:11:41,380 the only difference is that in this case here 215 215 00:11:41,380 --> 00:11:45,490 we did not capture the value into any variable. 216 216 00:11:45,490 --> 00:11:48,190 We simply log the result of running this function 217 217 00:11:48,190 --> 00:11:50,660 to the console directly, okay? 218 218 00:11:50,660 --> 00:11:53,190 So just to show you the difference. 219 219 00:11:53,190 --> 00:11:57,330 Okay, and now thanks to the power of the function 220 220 00:11:57,330 --> 00:12:01,000 we can reuse the function with different input values 221 221 00:12:01,000 --> 00:12:03,300 and then get a different output. 222 222 00:12:03,300 --> 00:12:08,300 So let's try that and let's create apple and orange juice 223 223 00:12:10,330 --> 00:12:14,280 so apple orange juice 224 224 00:12:15,210 --> 00:12:18,420 and so this time we can call fruit processor 225 225 00:12:18,420 --> 00:12:22,940 let's say with two apples and four oranges. 226 226 00:12:22,940 --> 00:12:26,370 So once again, we are defining specific values here 227 227 00:12:26,370 --> 00:12:28,030 which are the arguments 228 228 00:12:28,030 --> 00:12:30,175 which will get passed into the function 229 229 00:12:30,175 --> 00:12:33,780 here as these parameters. 230 230 00:12:33,780 --> 00:12:35,760 So essentially what we did here 231 231 00:12:35,760 --> 00:12:39,070 was to create a very generic function 232 232 00:12:39,070 --> 00:12:42,970 that works for any number of apples and oranges. 233 233 00:12:42,970 --> 00:12:46,970 So it's really like we're leaving apples and oranges 234 234 00:12:46,970 --> 00:12:48,780 as the blank spaces 235 235 00:12:48,780 --> 00:12:50,630 and then when we call the function 236 236 00:12:50,630 --> 00:12:54,960 we fill in these blank spaces using our arguments. 237 237 00:12:54,960 --> 00:12:58,260 So two and four in this example 238 238 00:12:58,260 --> 00:13:01,750 and now we can also then lock the results. 239 239 00:13:01,750 --> 00:13:04,550 So apple orange juice 240 240 00:13:05,800 --> 00:13:08,560 and actually we can get rid of this console dot log here 241 241 00:13:08,560 --> 00:13:10,270 because we don't really need it. 242 242 00:13:10,270 --> 00:13:12,880 All we want here is to produce this juice 243 243 00:13:12,880 --> 00:13:16,143 and then return the juice from the function, okay? 244 244 00:13:19,460 --> 00:13:22,920 And so now we get two juices, one with five apples 245 245 00:13:22,920 --> 00:13:26,280 and zero oranges, which is this first one 246 246 00:13:26,280 --> 00:13:30,550 and then finally the juice with two apples and four oranges 247 247 00:13:30,550 --> 00:13:33,320 and so that's the second one that we just produced 248 248 00:13:33,320 --> 00:13:34,990 and of course we could run this function 249 249 00:13:34,990 --> 00:13:37,422 as many times as we want it 250 250 00:13:37,422 --> 00:13:40,070 but we should call it at least once 251 251 00:13:40,070 --> 00:13:43,110 because if we never called a function then the code 252 252 00:13:43,110 --> 00:13:46,270 that's in the function will never be executed 253 253 00:13:46,270 --> 00:13:48,190 and that makes sense, right? 254 254 00:13:48,190 --> 00:13:51,640 So without executing the function it's kind of useless 255 255 00:13:51,640 --> 00:13:53,670 because the code will never run 256 256 00:13:53,670 --> 00:13:56,890 it will never be processed because that only happens 257 257 00:13:56,890 --> 00:14:01,890 once we called a function like this or like this here also. 258 258 00:14:03,130 --> 00:14:06,870 So as you see this function here has no parameters 259 259 00:14:06,870 --> 00:14:09,060 and so here when we call the function 260 260 00:14:09,060 --> 00:14:13,200 we do not specify any arguments, we could do that. 261 261 00:14:13,200 --> 00:14:17,050 So let's just pass 23 but since there are no parameters, 262 262 00:14:17,050 --> 00:14:18,733 it will not get used 263 263 00:14:18,733 --> 00:14:21,870 and so specifying the argument here or not 264 264 00:14:21,870 --> 00:14:23,623 will not have any effect. 265 265 00:14:24,480 --> 00:14:25,690 You'll see that this function hear 266 266 00:14:25,690 --> 00:14:27,790 also doesn't return anything 267 267 00:14:27,790 --> 00:14:29,580 and that's not a problem at all, 268 268 00:14:29,580 --> 00:14:32,370 not all functions need to return something 269 269 00:14:32,370 --> 00:14:35,590 and not all functions need to accept parameters 270 270 00:14:35,590 --> 00:14:38,263 like the fruit processor that we have down here. 271 271 00:14:39,120 --> 00:14:41,147 So this is a very simple function here 272 272 00:14:41,147 --> 00:14:43,540 and this is a more complete example 273 273 00:14:43,540 --> 00:14:47,270 showing you everything that we can do with functions 274 274 00:14:47,270 --> 00:14:50,500 and this kind of function is actually way more usual 275 275 00:14:50,500 --> 00:14:52,580 than this simpler one here. 276 276 00:14:52,580 --> 00:14:55,610 So function like this without parameters 277 277 00:14:55,610 --> 00:14:58,310 and without a return we really only use 278 278 00:14:58,310 --> 00:15:00,350 when there is a block of code 279 279 00:15:00,350 --> 00:15:03,410 that we want to reuse over and over again. 280 280 00:15:03,410 --> 00:15:04,790 Once more keep in mind 281 281 00:15:04,790 --> 00:15:07,350 that this function does not return anything 282 282 00:15:07,350 --> 00:15:10,600 all it does is to log something to the console 283 283 00:15:10,600 --> 00:15:13,849 but that has nothing to do with returning a value. 284 284 00:15:13,849 --> 00:15:16,587 This really only prints a message 285 285 00:15:16,587 --> 00:15:18,600 here to the developer console 286 286 00:15:18,600 --> 00:15:20,293 but it doesn't return a value. 287 287 00:15:21,200 --> 00:15:24,200 So basically this here does not produce a value 288 288 00:15:24,200 --> 00:15:27,490 because we don't return anything from the function 289 289 00:15:27,490 --> 00:15:29,770 and that's why here we also don't save 290 290 00:15:29,770 --> 00:15:32,770 the result of the function to any variable 291 291 00:15:32,770 --> 00:15:35,270 because it doesn't produce any result 292 292 00:15:35,270 --> 00:15:37,920 while technically it does produce undefined 293 293 00:15:37,920 --> 00:15:40,221 but that's not really relevant here 294 294 00:15:40,221 --> 00:15:45,221 and so of course we don't capture that undefined value. 295 295 00:15:45,710 --> 00:15:48,957 Okay, great and that's basically 296 296 00:15:48,957 --> 00:15:52,170 the fundamentals of functions 297 297 00:15:52,170 --> 00:15:55,510 and I'm pretty sure that this was confusing for you 298 298 00:15:55,510 --> 00:15:58,760 if this was your first contact with functions 299 299 00:15:58,760 --> 00:16:02,460 and actually that's probably how it's supposed to be. 300 300 00:16:02,460 --> 00:16:05,100 So what I want you to do is to review this lecture 301 301 00:16:05,100 --> 00:16:07,509 very thoroughly and really understand 302 302 00:16:07,509 --> 00:16:09,970 how all of this works together. 303 303 00:16:09,970 --> 00:16:12,410 So how writing this generic function 304 304 00:16:12,410 --> 00:16:14,560 with the parameters works together 305 305 00:16:14,560 --> 00:16:18,750 with then calling a function with the specific values 306 306 00:16:18,750 --> 00:16:21,229 and how the function then returns a value 307 307 00:16:21,229 --> 00:16:25,732 and how in the end we then received that value here 308 308 00:16:25,732 --> 00:16:28,870 and capture it into this variable. 309 309 00:16:28,870 --> 00:16:30,900 So that's what I want you to think about 310 310 00:16:30,900 --> 00:16:33,750 and to analyze, all right? 311 311 00:16:33,750 --> 00:16:36,660 So as a conclusion to this lecture, we can say 312 312 00:16:36,660 --> 00:16:40,380 that functions allow us to write more maintainable code 313 313 00:16:40,380 --> 00:16:42,010 because with functions 314 314 00:16:42,010 --> 00:16:44,400 we can create reusable chunks of code 315 315 00:16:44,400 --> 00:16:46,370 instead of having to manually write 316 316 00:16:46,370 --> 00:16:48,920 the same code over and over again. 317 317 00:16:48,920 --> 00:16:50,430 So that's the most important thing 318 318 00:16:50,430 --> 00:16:52,480 that you need to know about functions 319 319 00:16:52,480 --> 00:16:53,670 and when you know that 320 320 00:16:53,670 --> 00:16:57,280 you will know when you should actually use functions 321 321 00:16:57,280 --> 00:17:00,830 and this is actually a very important principle 322 322 00:17:00,830 --> 00:17:02,650 for writing clean code 323 323 00:17:02,650 --> 00:17:05,250 that is used in programming all the time 324 324 00:17:05,250 --> 00:17:10,250 and this principle is called don't repeat yourself or dry. 325 325 00:17:10,500 --> 00:17:13,290 So we say that we should keep our code dry 326 326 00:17:13,290 --> 00:17:16,740 which means that we should not repeat ourselves 327 327 00:17:16,740 --> 00:17:21,040 and so functions are perfect for implementing dry code 328 328 00:17:21,040 --> 00:17:23,690 because they are reusable code blocks 329 329 00:17:23,690 --> 00:17:27,010 that together, make up all applications 330 330 00:17:27,010 --> 00:17:28,930 and of course we will use functions 331 331 00:17:28,930 --> 00:17:31,040 throughout the rest of the course 332 332 00:17:31,040 --> 00:17:32,696 because as I said in the beginning 333 333 00:17:32,696 --> 00:17:35,150 they are a fundamental building block 334 334 00:17:35,150 --> 00:17:37,340 of JavaScript programs 335 335 00:17:37,340 --> 00:17:40,550 and by the way, you can now understand 336 336 00:17:40,550 --> 00:17:45,540 that console dot log here is actually also just a function 337 337 00:17:45,540 --> 00:17:47,180 but a built in function 338 338 00:17:47,180 --> 00:17:50,000 that we do not have to write ourselves 339 339 00:17:50,000 --> 00:17:53,311 but you see that we just call it like our own functions. 340 340 00:17:53,311 --> 00:17:56,504 So we call it using the parenthesis here 341 341 00:17:56,504 --> 00:18:00,230 and then we pass in a value. 342 342 00:18:00,230 --> 00:18:02,170 So apple, orange juice 343 343 00:18:02,170 --> 00:18:05,010 and the result of calling the function is simply 344 344 00:18:05,010 --> 00:18:08,737 this message then appearing in the developer console 345 345 00:18:08,737 --> 00:18:10,543 and the same is true for the function 346 346 00:18:10,543 --> 00:18:14,043 that we used to convert a string to a number. 347 347 00:18:15,230 --> 00:18:17,400 So this is another built in function 348 348 00:18:17,400 --> 00:18:22,400 that takes this 23 string in this case as a parameter. 349 349 00:18:24,470 --> 00:18:27,190 So we pass this argument into the function 350 350 00:18:27,190 --> 00:18:30,060 and this function will then be executed 351 351 00:18:30,060 --> 00:18:33,000 and returned the string as a number 352 352 00:18:33,000 --> 00:18:37,203 and then we can save that like we did before, okay? 353 353 00:18:41,260 --> 00:18:44,260 So this is gonna work just the same 354 354 00:18:44,260 --> 00:18:45,763 and of course we cannot see it 355 355 00:18:45,763 --> 00:18:50,533 but we can still check it out by writing numb, okay? 356 356 00:18:52,230 --> 00:18:55,440 But now, anyway I will leave you to really analyze 357 357 00:18:55,440 --> 00:18:59,215 how all of this logic here works that we just wrote. 358 358 00:18:59,215 --> 00:19:02,500 So do that now and only once you fully understand 359 359 00:19:02,500 --> 00:19:05,993 how this example works move on to the next video. 31696