WEBVTT 1 00:00:01.180 --> 00:00:03.010 The fundamental building block 2 00:00:03.010 --> 00:00:07.160 of real world JavaScript applications are functions. 3 00:00:07.160 --> 00:00:10.494 They are one of the most essential concepts in the language 4 00:00:10.494 --> 00:00:14.323 and so let's study functions over the next couple of videos. 5 00:00:15.830 --> 00:00:19.140 So what actually are functions? 6 00:00:19.140 --> 00:00:22.570 Well in the most simple form a function 7 00:00:22.570 --> 00:00:25.890 is simply a piece of code that we can reuse 8 00:00:25.890 --> 00:00:28.690 over and over again in our code. 9 00:00:28.690 --> 00:00:31.490 So it's a little bit like a variable 10 00:00:31.490 --> 00:00:34.050 but for whole chunks of code. 11 00:00:34.050 --> 00:00:37.400 So remember a variable holds value 12 00:00:37.400 --> 00:00:42.360 but a function can hold one or more complete lines of code. 13 00:00:42.360 --> 00:00:45.970 So let's not declare our very first function 14 00:00:45.970 --> 00:00:48.180 so we start with the function keyword 15 00:00:49.830 --> 00:00:52.530 and then we define a function name 16 00:00:52.530 --> 00:00:55.330 and let's now just create a simple logger 17 00:00:55.330 --> 00:00:58.140 which is a function that will simply log 18 00:00:58.140 --> 00:00:59.403 something to the console. 19 00:01:00.800 --> 00:01:04.480 So I will call this one logger and then we need parenthesis 20 00:01:04.480 --> 00:01:07.360 and we will see why in a next example 21 00:01:07.360 --> 00:01:09.090 and then we use the curly braces 22 00:01:09.090 --> 00:01:12.230 to create the so-called function buddy. 23 00:01:12.230 --> 00:01:15.670 So all the code that is within this code block here 24 00:01:15.670 --> 00:01:18.290 so within this block of curly braces 25 00:01:18.290 --> 00:01:19.770 is called the function buddy 26 00:01:19.770 --> 00:01:21.370 and it's this code that will 27 00:01:21.370 --> 00:01:25.050 be executed when we run this function. 28 00:01:25.050 --> 00:01:28.990 So let's say we needed to execute a log many times 29 00:01:28.990 --> 00:01:30.853 somewhere in our program. 30 00:01:31.890 --> 00:01:36.890 So let's simply console dot log my name is Jonas 31 00:01:39.830 --> 00:01:41.690 and so somewhere in our program 32 00:01:41.690 --> 00:01:45.630 we needed to reuse this line of code here multiple times 33 00:01:45.630 --> 00:01:49.440 and so that's why we put it in a function, okay? 34 00:01:49.440 --> 00:01:53.090 So we created the function and now we can use it 35 00:01:53.090 --> 00:01:56.520 and we can use it as many times as we want. 36 00:01:56.520 --> 00:02:00.080 So to use the function, we simply write the function name 37 00:02:00.080 --> 00:02:04.000 followed by a parenthesis and that's actually it 38 00:02:04.000 --> 00:02:08.640 and this process here of basically using the function 39 00:02:08.640 --> 00:02:12.320 is called invoking the function, running the function 40 00:02:12.320 --> 00:02:14.400 or calling the function. 41 00:02:14.400 --> 00:02:17.120 So let me actually write these terms here 42 00:02:18.410 --> 00:02:23.410 so calling running or invoking the function 43 00:02:27.780 --> 00:02:30.280 and you will see me use these three terms here 44 00:02:30.280 --> 00:02:32.040 interchangeably, okay? 45 00:02:32.040 --> 00:02:36.220 So they basically mean the same thing you can think of them 46 00:02:36.220 --> 00:02:39.620 as like executing or using the function 47 00:02:39.620 --> 00:02:43.120 that we defined previously, okay? 48 00:02:43.120 --> 00:02:47.260 And as I said, we can now use or call 49 00:02:47.260 --> 00:02:51.420 or run this function as many times as we want 50 00:02:51.420 --> 00:02:54.270 and each time that we call the function like this 51 00:02:54.270 --> 00:02:56.520 then the code that is in the function 52 00:02:56.520 --> 00:02:59.960 will get executed, all right? 53 00:02:59.960 --> 00:03:02.403 So in this case, what should we expect here? 54 00:03:03.500 --> 00:03:07.310 Let's see and indeed we get this 55 00:03:07.310 --> 00:03:09.770 my name is Jonas log three times 56 00:03:09.770 --> 00:03:12.290 because we call the function three times 57 00:03:12.290 --> 00:03:16.720 and so this line of code here was executed three times. 58 00:03:16.720 --> 00:03:20.290 Great, so we just wrote our very first function 59 00:03:20.290 --> 00:03:22.530 and it's already working just fine 60 00:03:22.530 --> 00:03:24.450 and I hope that this logic 61 00:03:24.450 --> 00:03:26.770 of reusing code makes sense to you 62 00:03:27.930 --> 00:03:30.071 but let's now take it to the next level 63 00:03:30.071 --> 00:03:33.880 and really use some more functionalities of functions 64 00:03:33.880 --> 00:03:35.670 because they can do a lot more 65 00:03:35.670 --> 00:03:39.800 than simply reusing a line of code like we did here. 66 00:03:39.800 --> 00:03:41.743 So usually when we write functions 67 00:03:41.743 --> 00:03:45.090 we also pass data into a function 68 00:03:45.090 --> 00:03:49.410 and additionally, a function can also return data as well 69 00:03:49.410 --> 00:03:51.570 which means to give us data back 70 00:03:51.570 --> 00:03:55.420 that we can then use for something else in the program. 71 00:03:55.420 --> 00:03:59.090 So a function cannot only reuse a piece of code 72 00:03:59.090 --> 00:04:00.260 like we did here 73 00:04:00.260 --> 00:04:03.710 but it can also receive data and return data back 74 00:04:04.630 --> 00:04:08.840 and so I like to think of functions as machines. 75 00:04:08.840 --> 00:04:11.445 So I think that's a great analogy 76 00:04:11.445 --> 00:04:15.490 so for example, let's imagine a food processor, 77 00:04:15.490 --> 00:04:17.970 so we put foot into the processor 78 00:04:17.970 --> 00:04:20.880 then the processor does something to our food 79 00:04:20.880 --> 00:04:23.680 which is the function body basically 80 00:04:23.680 --> 00:04:24.810 and then in the end 81 00:04:24.810 --> 00:04:27.820 the food processor returns to processed food 82 00:04:27.820 --> 00:04:29.750 for example, a juice 83 00:04:29.750 --> 00:04:33.960 and so that's exactly what we can do with functions as well 84 00:04:33.960 --> 00:04:37.193 and actually let's implement exactly this example. 85 00:04:39.200 --> 00:04:42.740 So, again, we need to use the function keyword 86 00:04:44.120 --> 00:04:46.620 and then we choose a function name 87 00:04:46.620 --> 00:04:48.630 and just like with variable names 88 00:04:48.630 --> 00:04:51.600 we should choose descriptive function names 89 00:04:51.600 --> 00:04:53.450 so that we know exactly what they do. 90 00:04:54.470 --> 00:04:57.750 So let's call this one a fruit processor 91 00:04:58.640 --> 00:04:59.570 but in this function 92 00:04:59.570 --> 00:05:02.950 we also specify something called parameters 93 00:05:02.950 --> 00:05:05.340 and parameters are like variables 94 00:05:05.340 --> 00:05:08.180 that are specific only to this function 95 00:05:08.180 --> 00:05:11.580 and they will get defined once we call the function. 96 00:05:11.580 --> 00:05:14.000 So let's give this fruit processor function 97 00:05:14.000 --> 00:05:16.610 two parameters, apples 98 00:05:16.610 --> 00:05:21.610 and then a second one separated by a comma called oranges 99 00:05:22.340 --> 00:05:25.230 and again these two will get defined 100 00:05:25.230 --> 00:05:27.330 once the function is called 101 00:05:27.330 --> 00:05:32.010 and they represent the input data of this function, okay? 102 00:05:32.010 --> 00:05:33.930 And this will make even more sense 103 00:05:33.930 --> 00:05:36.230 when we then actually call his function 104 00:05:38.560 --> 00:05:42.860 and let's start by logging these to the console. 105 00:05:42.860 --> 00:05:45.770 So apples and also oranges 106 00:05:46.810 --> 00:05:48.050 and so what I'm doing here 107 00:05:48.050 --> 00:05:50.290 is to basically use these parameters here. 108 00:05:50.290 --> 00:05:54.760 So apples and oranges just as if they were normal variables 109 00:05:54.760 --> 00:05:56.860 here inside this function 110 00:05:56.860 --> 00:05:59.560 and now let's actually do something more interesting 111 00:05:59.560 --> 00:06:01.490 with these parameters 112 00:06:01.490 --> 00:06:05.790 and so we want to kind of simulate that is fruit processor 113 00:06:05.790 --> 00:06:09.260 produces a juice out of the apples and oranges 114 00:06:09.260 --> 00:06:10.640 that we give it 115 00:06:10.640 --> 00:06:15.640 and so let's just create a string, which says that. 116 00:06:16.040 --> 00:06:18.790 So we wanna create a variable called juice 117 00:06:19.680 --> 00:06:21.290 and then a template literal 118 00:06:22.310 --> 00:06:24.790 and I'm gonna say juice with 119 00:06:25.910 --> 00:06:29.403 and then I'm using actually the apples parameter here. 120 00:06:30.610 --> 00:06:33.890 So apples and then apples 121 00:06:33.890 --> 00:06:36.630 because this apples parameter will be a number 122 00:06:36.630 --> 00:06:37.890 once we call this. 123 00:06:37.890 --> 00:06:40.959 For example, if we set apples to three 124 00:06:40.959 --> 00:06:44.130 then the string will be juice with three apples 125 00:06:45.750 --> 00:06:48.440 and again this will really make sense 126 00:06:48.440 --> 00:06:50.480 once we call this function 127 00:06:51.800 --> 00:06:56.800 so oranges and oranges again, okay? 128 00:06:56.990 --> 00:07:00.000 So here we build a string using the input data 129 00:07:00.000 --> 00:07:02.290 that we get into the function 130 00:07:02.290 --> 00:07:04.450 and now comes the really cool part 131 00:07:04.450 --> 00:07:08.420 because now we can use the return keyword 132 00:07:08.420 --> 00:07:12.340 and with this, we can return any value from the function 133 00:07:12.340 --> 00:07:16.690 and so let's actually return the juice that we just produced 134 00:07:16.690 --> 00:07:19.130 and so this value that we then return 135 00:07:19.130 --> 00:07:22.000 can be used anywhere later in our code. 136 00:07:22.000 --> 00:07:25.320 So basically this Jews will become the result 137 00:07:25.320 --> 00:07:29.490 of executing this function and let's actually do that. 138 00:07:29.490 --> 00:07:34.110 So let's call or run or invoke this function now 139 00:07:35.530 --> 00:07:36.980 so fruit processor 140 00:07:38.020 --> 00:07:40.410 and now we're gonna specify the actual values 141 00:07:40.410 --> 00:07:43.680 for the parameters, apples and oranges 142 00:07:43.680 --> 00:07:47.490 and so let's say for example, five apples 143 00:07:47.490 --> 00:07:51.200 and zero oranges, okay? 144 00:07:51.200 --> 00:07:53.970 And so these now will be the inputs 145 00:07:53.970 --> 00:07:56.900 of the fruit processor function. 146 00:07:56.900 --> 00:07:59.760 So you can think of these parameters here 147 00:07:59.760 --> 00:08:02.880 like empty spaces that we still need to fill out 148 00:08:02.880 --> 00:08:04.850 when we are writing the function 149 00:08:04.850 --> 00:08:07.520 and when we call the function, then later in the code 150 00:08:07.520 --> 00:08:11.120 here at this point, we then filled these blank spaces 151 00:08:11.120 --> 00:08:14.220 by passing in the real specific values 152 00:08:14.220 --> 00:08:17.120 which will then get assigned to the parameters 153 00:08:17.120 --> 00:08:20.020 and this example, apples will become five 154 00:08:20.020 --> 00:08:24.170 and oranges, which is the second parameter here, right? 155 00:08:24.170 --> 00:08:28.050 Will become zero, and these actual values here 156 00:08:28.050 --> 00:08:31.083 of the parameters are called the arguments. 157 00:08:32.530 --> 00:08:36.060 Alright, so let's now basically run the script 158 00:08:37.210 --> 00:08:39.750 and so now we get five and zero. 159 00:08:39.750 --> 00:08:43.530 so this is coming from line 26, which is this line. 160 00:08:43.530 --> 00:08:46.360 So it's this logging to the console of the apples 161 00:08:46.360 --> 00:08:50.200 which is five and oranges which is zero 162 00:08:50.200 --> 00:08:53.290 and apples are five because that's the value 163 00:08:53.290 --> 00:08:55.980 that we specified here, okay? 164 00:08:55.980 --> 00:08:58.570 So we specified apples as five 165 00:08:58.570 --> 00:09:01.740 and so in this function the apple parameter 166 00:09:01.740 --> 00:09:04.680 or you can think of this parameter as a variable 167 00:09:04.680 --> 00:09:09.210 is now five and oranges is of course zero 168 00:09:09.210 --> 00:09:12.810 but now you might wonder what about the juice 169 00:09:12.810 --> 00:09:14.330 that just produced here? 170 00:09:14.330 --> 00:09:15.810 Where is it? 171 00:09:15.810 --> 00:09:19.230 Well, the juice was returned from this function. 172 00:09:19.230 --> 00:09:21.560 So basically that means that the result 173 00:09:21.560 --> 00:09:23.470 of running this function here 174 00:09:23.470 --> 00:09:26.210 is the juice that we just returned. 175 00:09:26.210 --> 00:09:29.030 Basically, once this function has been executed 176 00:09:29.030 --> 00:09:31.520 this code here is then replaced 177 00:09:31.520 --> 00:09:33.710 by the result of the function 178 00:09:33.710 --> 00:09:36.250 and in this case that's gonna be the juice string 179 00:09:36.250 --> 00:09:37.550 that we produced. 180 00:09:37.550 --> 00:09:41.070 So if we want to use that value that was returned 181 00:09:41.070 --> 00:09:43.170 we need to store it in a variable 182 00:09:44.560 --> 00:09:45.543 so let's do that. 183 00:09:46.820 --> 00:09:49.340 So let's call it apple juice 184 00:09:52.880 --> 00:09:57.880 and then let's log that to the console, reload it here 185 00:10:01.990 --> 00:10:06.283 and now we get juice with five apples and zero oranges. 186 00:10:07.190 --> 00:10:09.833 So let's recap again, what happened here? 187 00:10:11.150 --> 00:10:14.630 So we called the fruit processor function here 188 00:10:14.630 --> 00:10:18.370 with two arguments, five and zero 189 00:10:18.370 --> 00:10:20.890 and these arguments are the specific. 190 00:10:20.890 --> 00:10:24.540 So the actual values of the functions parameters 191 00:10:24.540 --> 00:10:27.900 which are apples and oranges 192 00:10:27.900 --> 00:10:30.600 and so when the function is running now, 193 00:10:30.600 --> 00:10:34.510 apples in here will be five and oranges will be zero. 194 00:10:34.510 --> 00:10:39.510 Then we use these values to build this juice string here 195 00:10:39.710 --> 00:10:43.770 and then we return that value from the function 196 00:10:43.770 --> 00:10:45.560 and what that means is that basically 197 00:10:45.560 --> 00:10:48.260 the result of calling this function here 198 00:10:48.260 --> 00:10:52.940 will be the juice value that was just returned, okay? 199 00:10:52.940 --> 00:10:55.810 And then we need to save that value somewhere 200 00:10:55.810 --> 00:10:57.570 we need to capture it 201 00:10:57.570 --> 00:11:00.920 and we do that by basically saving it 202 00:11:00.920 --> 00:11:03.120 into this apple juice variable 203 00:11:03.120 --> 00:11:07.050 and then we can simply lock that value to the console. 204 00:11:07.050 --> 00:11:09.590 Of course we could have also directly logged it 205 00:11:09.590 --> 00:11:10.543 to the console. 206 00:11:11.660 --> 00:11:14.990 So basically without capturing the value anywhere 207 00:11:14.990 --> 00:11:16.293 and simply log in it. 208 00:11:17.750 --> 00:11:19.400 So let me just copy this one here 209 00:11:23.270 --> 00:11:24.870 and so if I run this now. 210 00:11:24.870 --> 00:11:27.100 we should see the same string twice 211 00:11:28.690 --> 00:11:30.560 and yes, indeed. 212 00:11:30.560 --> 00:11:34.880 Now the fruit processor function was executed twice 213 00:11:34.880 --> 00:11:38.080 once here and once here 214 00:11:38.080 --> 00:11:41.380 the only difference is that in this case here 215 00:11:41.380 --> 00:11:45.490 we did not capture the value into any variable. 216 00:11:45.490 --> 00:11:48.190 We simply log the result of running this function 217 00:11:48.190 --> 00:11:50.660 to the console directly, okay? 218 00:11:50.660 --> 00:11:53.190 So just to show you the difference. 219 00:11:53.190 --> 00:11:57.330 Okay, and now thanks to the power of the function 220 00:11:57.330 --> 00:12:01.000 we can reuse the function with different input values 221 00:12:01.000 --> 00:12:03.300 and then get a different output. 222 00:12:03.300 --> 00:12:08.300 So let's try that and let's create apple and orange juice 223 00:12:10.330 --> 00:12:14.280 so apple orange juice 224 00:12:15.210 --> 00:12:18.420 and so this time we can call fruit processor 225 00:12:18.420 --> 00:12:22.940 let's say with two apples and four oranges. 226 00:12:22.940 --> 00:12:26.370 So once again, we are defining specific values here 227 00:12:26.370 --> 00:12:28.030 which are the arguments 228 00:12:28.030 --> 00:12:30.175 which will get passed into the function 229 00:12:30.175 --> 00:12:33.780 here as these parameters. 230 00:12:33.780 --> 00:12:35.760 So essentially what we did here 231 00:12:35.760 --> 00:12:39.070 was to create a very generic function 232 00:12:39.070 --> 00:12:42.970 that works for any number of apples and oranges. 233 00:12:42.970 --> 00:12:46.970 So it's really like we're leaving apples and oranges 234 00:12:46.970 --> 00:12:48.780 as the blank spaces 235 00:12:48.780 --> 00:12:50.630 and then when we call the function 236 00:12:50.630 --> 00:12:54.960 we fill in these blank spaces using our arguments. 237 00:12:54.960 --> 00:12:58.260 So two and four in this example 238 00:12:58.260 --> 00:13:01.750 and now we can also then lock the results. 239 00:13:01.750 --> 00:13:04.550 So apple orange juice 240 00:13:05.800 --> 00:13:08.560 and actually we can get rid of this console dot log here 241 00:13:08.560 --> 00:13:10.270 because we don't really need it. 242 00:13:10.270 --> 00:13:12.880 All we want here is to produce this juice 243 00:13:12.880 --> 00:13:16.143 and then return the juice from the function, okay? 244 00:13:19.460 --> 00:13:22.920 And so now we get two juices, one with five apples 245 00:13:22.920 --> 00:13:26.280 and zero oranges, which is this first one 246 00:13:26.280 --> 00:13:30.550 and then finally the juice with two apples and four oranges 247 00:13:30.550 --> 00:13:33.320 and so that's the second one that we just produced 248 00:13:33.320 --> 00:13:34.990 and of course we could run this function 249 00:13:34.990 --> 00:13:37.422 as many times as we want it 250 00:13:37.422 --> 00:13:40.070 but we should call it at least once 251 00:13:40.070 --> 00:13:43.110 because if we never called a function then the code 252 00:13:43.110 --> 00:13:46.270 that's in the function will never be executed 253 00:13:46.270 --> 00:13:48.190 and that makes sense, right? 254 00:13:48.190 --> 00:13:51.640 So without executing the function it's kind of useless 255 00:13:51.640 --> 00:13:53.670 because the code will never run 256 00:13:53.670 --> 00:13:56.890 it will never be processed because that only happens 257 00:13:56.890 --> 00:14:01.890 once we called a function like this or like this here also. 258 00:14:03.130 --> 00:14:06.870 So as you see this function here has no parameters 259 00:14:06.870 --> 00:14:09.060 and so here when we call the function 260 00:14:09.060 --> 00:14:13.200 we do not specify any arguments, we could do that. 261 00:14:13.200 --> 00:14:17.050 So let's just pass 23 but since there are no parameters, 262 00:14:17.050 --> 00:14:18.733 it will not get used 263 00:14:18.733 --> 00:14:21.870 and so specifying the argument here or not 264 00:14:21.870 --> 00:14:23.623 will not have any effect. 265 00:14:24.480 --> 00:14:25.690 You'll see that this function hear 266 00:14:25.690 --> 00:14:27.790 also doesn't return anything 267 00:14:27.790 --> 00:14:29.580 and that's not a problem at all, 268 00:14:29.580 --> 00:14:32.370 not all functions need to return something 269 00:14:32.370 --> 00:14:35.590 and not all functions need to accept parameters 270 00:14:35.590 --> 00:14:38.263 like the fruit processor that we have down here. 271 00:14:39.120 --> 00:14:41.147 So this is a very simple function here 272 00:14:41.147 --> 00:14:43.540 and this is a more complete example 273 00:14:43.540 --> 00:14:47.270 showing you everything that we can do with functions 274 00:14:47.270 --> 00:14:50.500 and this kind of function is actually way more usual 275 00:14:50.500 --> 00:14:52.580 than this simpler one here. 276 00:14:52.580 --> 00:14:55.610 So function like this without parameters 277 00:14:55.610 --> 00:14:58.310 and without a return we really only use 278 00:14:58.310 --> 00:15:00.350 when there is a block of code 279 00:15:00.350 --> 00:15:03.410 that we want to reuse over and over again. 280 00:15:03.410 --> 00:15:04.790 Once more keep in mind 281 00:15:04.790 --> 00:15:07.350 that this function does not return anything 282 00:15:07.350 --> 00:15:10.600 all it does is to log something to the console 283 00:15:10.600 --> 00:15:13.849 but that has nothing to do with returning a value. 284 00:15:13.849 --> 00:15:16.587 This really only prints a message 285 00:15:16.587 --> 00:15:18.600 here to the developer console 286 00:15:18.600 --> 00:15:20.293 but it doesn't return a value. 287 00:15:21.200 --> 00:15:24.200 So basically this here does not produce a value 288 00:15:24.200 --> 00:15:27.490 because we don't return anything from the function 289 00:15:27.490 --> 00:15:29.770 and that's why here we also don't save 290 00:15:29.770 --> 00:15:32.770 the result of the function to any variable 291 00:15:32.770 --> 00:15:35.270 because it doesn't produce any result 292 00:15:35.270 --> 00:15:37.920 while technically it does produce undefined 293 00:15:37.920 --> 00:15:40.221 but that's not really relevant here 294 00:15:40.221 --> 00:15:45.221 and so of course we don't capture that undefined value. 295 00:15:45.710 --> 00:15:48.957 Okay, great and that's basically 296 00:15:48.957 --> 00:15:52.170 the fundamentals of functions 297 00:15:52.170 --> 00:15:55.510 and I'm pretty sure that this was confusing for you 298 00:15:55.510 --> 00:15:58.760 if this was your first contact with functions 299 00:15:58.760 --> 00:16:02.460 and actually that's probably how it's supposed to be. 300 00:16:02.460 --> 00:16:05.100 So what I want you to do is to review this lecture 301 00:16:05.100 --> 00:16:07.509 very thoroughly and really understand 302 00:16:07.509 --> 00:16:09.970 how all of this works together. 303 00:16:09.970 --> 00:16:12.410 So how writing this generic function 304 00:16:12.410 --> 00:16:14.560 with the parameters works together 305 00:16:14.560 --> 00:16:18.750 with then calling a function with the specific values 306 00:16:18.750 --> 00:16:21.229 and how the function then returns a value 307 00:16:21.229 --> 00:16:25.732 and how in the end we then received that value here 308 00:16:25.732 --> 00:16:28.870 and capture it into this variable. 309 00:16:28.870 --> 00:16:30.900 So that's what I want you to think about 310 00:16:30.900 --> 00:16:33.750 and to analyze, all right? 311 00:16:33.750 --> 00:16:36.660 So as a conclusion to this lecture, we can say 312 00:16:36.660 --> 00:16:40.380 that functions allow us to write more maintainable code 313 00:16:40.380 --> 00:16:42.010 because with functions 314 00:16:42.010 --> 00:16:44.400 we can create reusable chunks of code 315 00:16:44.400 --> 00:16:46.370 instead of having to manually write 316 00:16:46.370 --> 00:16:48.920 the same code over and over again. 317 00:16:48.920 --> 00:16:50.430 So that's the most important thing 318 00:16:50.430 --> 00:16:52.480 that you need to know about functions 319 00:16:52.480 --> 00:16:53.670 and when you know that 320 00:16:53.670 --> 00:16:57.280 you will know when you should actually use functions 321 00:16:57.280 --> 00:17:00.830 and this is actually a very important principle 322 00:17:00.830 --> 00:17:02.650 for writing clean code 323 00:17:02.650 --> 00:17:05.250 that is used in programming all the time 324 00:17:05.250 --> 00:17:10.250 and this principle is called don't repeat yourself or dry. 325 00:17:10.500 --> 00:17:13.290 So we say that we should keep our code dry 326 00:17:13.290 --> 00:17:16.740 which means that we should not repeat ourselves 327 00:17:16.740 --> 00:17:21.040 and so functions are perfect for implementing dry code 328 00:17:21.040 --> 00:17:23.690 because they are reusable code blocks 329 00:17:23.690 --> 00:17:27.010 that together, make up all applications 330 00:17:27.010 --> 00:17:28.930 and of course we will use functions 331 00:17:28.930 --> 00:17:31.040 throughout the rest of the course 332 00:17:31.040 --> 00:17:32.696 because as I said in the beginning 333 00:17:32.696 --> 00:17:35.150 they are a fundamental building block 334 00:17:35.150 --> 00:17:37.340 of JavaScript programs 335 00:17:37.340 --> 00:17:40.550 and by the way, you can now understand 336 00:17:40.550 --> 00:17:45.540 that console dot log here is actually also just a function 337 00:17:45.540 --> 00:17:47.180 but a built in function 338 00:17:47.180 --> 00:17:50.000 that we do not have to write ourselves 339 00:17:50.000 --> 00:17:53.311 but you see that we just call it like our own functions. 340 00:17:53.311 --> 00:17:56.504 So we call it using the parenthesis here 341 00:17:56.504 --> 00:18:00.230 and then we pass in a value. 342 00:18:00.230 --> 00:18:02.170 So apple, orange juice 343 00:18:02.170 --> 00:18:05.010 and the result of calling the function is simply 344 00:18:05.010 --> 00:18:08.737 this message then appearing in the developer console 345 00:18:08.737 --> 00:18:10.543 and the same is true for the function 346 00:18:10.543 --> 00:18:14.043 that we used to convert a string to a number. 347 00:18:15.230 --> 00:18:17.400 So this is another built in function 348 00:18:17.400 --> 00:18:22.400 that takes this 23 string in this case as a parameter. 349 00:18:24.470 --> 00:18:27.190 So we pass this argument into the function 350 00:18:27.190 --> 00:18:30.060 and this function will then be executed 351 00:18:30.060 --> 00:18:33.000 and returned the string as a number 352 00:18:33.000 --> 00:18:37.203 and then we can save that like we did before, okay? 353 00:18:41.260 --> 00:18:44.260 So this is gonna work just the same 354 00:18:44.260 --> 00:18:45.763 and of course we cannot see it 355 00:18:45.763 --> 00:18:50.533 but we can still check it out by writing numb, okay? 356 00:18:52.230 --> 00:18:55.440 But now, anyway I will leave you to really analyze 357 00:18:55.440 --> 00:18:59.215 how all of this logic here works that we just wrote. 358 00:18:59.215 --> 00:19:02.500 So do that now and only once you fully understand 359 00:19:02.500 --> 00:19:05.993 how this example works move on to the next video.