WEBVTT 1 00:00:01.290 --> 00:00:04.810 Now that we know what higher order functions are, 2 00:00:04.810 --> 00:00:07.040 let's actually create our own, 3 00:00:07.040 --> 00:00:09.900 just to demonstrate how they work. 4 00:00:09.900 --> 00:00:11.850 So in this lecture, we're going to create 5 00:00:11.850 --> 00:00:15.693 a function that accepts other functions as an input. 6 00:00:17.470 --> 00:00:20.560 But to start, let's write two very generic 7 00:00:20.560 --> 00:00:23.833 functions that do simple string transformations. 8 00:00:26.100 --> 00:00:28.970 So one I'm going to call one word 9 00:00:29.830 --> 00:00:34.623 and this will simply replace all the spaces in a word. 10 00:00:38.190 --> 00:00:39.290 So string 11 00:00:40.390 --> 00:00:41.570 dot replace 12 00:00:42.490 --> 00:00:45.190 and then we're going to select all these spaces. 13 00:00:45.190 --> 00:00:47.030 And remember for that, 14 00:00:47.030 --> 00:00:49.160 we need to use this regular expression 15 00:00:49.160 --> 00:00:52.750 with the G flag and then replace them 16 00:00:52.750 --> 00:00:54.593 with simply an empty string. 17 00:00:56.120 --> 00:01:00.897 And then we also convert that to lowercase. 18 00:01:02.690 --> 00:01:04.230 Okay, 19 00:01:04.230 --> 00:01:05.400 so this function here, 20 00:01:05.400 --> 00:01:09.050 what simply work anywhere in our code with any string 21 00:01:09.050 --> 00:01:11.700 and it takes in one string and returns 22 00:01:11.700 --> 00:01:14.153 a new one without any spaces in it. 23 00:01:16.110 --> 00:01:20.363 Okay, let's create another one upper first words, 24 00:01:21.720 --> 00:01:25.490 which also takes in a string. 25 00:01:25.490 --> 00:01:26.780 And so these two functions, 26 00:01:26.780 --> 00:01:29.270 they will later be the functions that we pass 27 00:01:29.270 --> 00:01:31.720 in into another function. 28 00:01:31.720 --> 00:01:34.560 Okay, so we first need these. 29 00:01:34.560 --> 00:01:36.710 So as the name says, this function 30 00:01:36.710 --> 00:01:39.960 here will simply transform the first word 31 00:01:39.960 --> 00:01:42.810 of the input string to uppercase. 32 00:01:42.810 --> 00:01:46.423 So let's just first split the string. 33 00:01:48.640 --> 00:01:50.103 So by the empty string, 34 00:01:51.027 --> 00:01:53.600 and then we will take the results 35 00:01:53.600 --> 00:01:57.390 and restructure it into the first word. 36 00:01:57.390 --> 00:01:58.933 And then all the other words, 37 00:02:03.270 --> 00:02:05.763 And then return a new array that we will join. 38 00:02:06.710 --> 00:02:09.420 So that's first to uppercase 39 00:02:09.420 --> 00:02:12.900 and here I'm not explaining exactly how this all works, 40 00:02:12.900 --> 00:02:15.210 because we already talked about this stuff, 41 00:02:15.210 --> 00:02:16.273 in the last video. 42 00:02:18.030 --> 00:02:21.200 So we spread the others and also in the array 43 00:02:22.220 --> 00:02:23.420 and then we join. 44 00:02:23.420 --> 00:02:26.140 And so you see that everything that we learned before 45 00:02:26.140 --> 00:02:27.800 is actually pretty helpful, 46 00:02:27.800 --> 00:02:30.760 again as always, especially helpful, 47 00:02:30.760 --> 00:02:34.810 is to spread operator and destructive assignment. 48 00:02:34.810 --> 00:02:36.083 Like we use it here. 49 00:02:37.240 --> 00:02:39.590 Right, and here it's actually the rest pattern. 50 00:02:41.960 --> 00:02:45.490 All right, So we have these two generic functions 51 00:02:45.490 --> 00:02:48.440 and now we can create or higher order function. 52 00:02:48.440 --> 00:02:53.133 And that function will be called a transformer. 53 00:02:55.030 --> 00:02:59.820 and these function we'll take in also a string, 54 00:02:59.820 --> 00:03:01.310 but as a second argument, 55 00:03:01.310 --> 00:03:03.643 it will take in a function. 56 00:03:04.520 --> 00:03:08.053 Okay, and therefore this is a higher order function. 57 00:03:09.210 --> 00:03:10.500 So that's the definition that we 58 00:03:10.500 --> 00:03:12.273 learned about in the last video. 59 00:03:14.620 --> 00:03:15.823 So it takes in a function 60 00:03:15.823 --> 00:03:19.860 and air for it is a higher order function. 61 00:03:19.860 --> 00:03:21.280 And so now let's see how 62 00:03:21.280 --> 00:03:23.130 we would actually call this function. 63 00:03:24.560 --> 00:03:28.090 So that's how I like to do it many times. 64 00:03:28.090 --> 00:03:32.863 So let's say JavaScript is the best. 65 00:03:35.080 --> 00:03:36.500 And as a second argument, 66 00:03:36.500 --> 00:03:41.500 I will now pass in the upper first word function. 67 00:03:41.840 --> 00:03:44.260 And so basically what I want the transformer function 68 00:03:44.260 --> 00:03:47.160 now to do with this string, 69 00:03:47.160 --> 00:03:50.583 is to transform the string using these function here. 70 00:03:51.720 --> 00:03:54.483 So this function that we created here in the beginning. 71 00:03:55.660 --> 00:03:56.550 All right, 72 00:03:56.550 --> 00:03:58.130 and once again notice 73 00:03:58.130 --> 00:04:02.230 how we are only passing in the function value itself. 74 00:04:02.230 --> 00:04:03.730 So really just the value, 75 00:04:03.730 --> 00:04:07.000 we are not calling this function here. 76 00:04:07.000 --> 00:04:09.850 Okay, We are only passing it in and it will be to 77 00:04:09.850 --> 00:04:13.240 transformer function calling this function. 78 00:04:13.240 --> 00:04:14.683 So let's actually do that. 79 00:04:16.630 --> 00:04:20.250 So we will simply look to the console transformed 80 00:04:22.330 --> 00:04:26.800 string meant and here goes our expression. 81 00:04:26.800 --> 00:04:30.450 And so this is where we will now call the function. 82 00:04:30.450 --> 00:04:33.300 Now, inside of the transformer function, 83 00:04:33.300 --> 00:04:37.680 this upper ward is now called F N right? 84 00:04:37.680 --> 00:04:39.713 So that's the second parameter here. 85 00:04:40.600 --> 00:04:45.410 And so F N and then with the past in string. 86 00:04:45.410 --> 00:04:46.390 Okay, 87 00:04:46.390 --> 00:04:47.830 and when we see the result, 88 00:04:47.830 --> 00:04:50.142 this will make even more sense. 89 00:04:50.142 --> 00:04:53.170 Okay, that's also a lock to the console, 90 00:04:53.170 --> 00:04:54.413 the original string. 91 00:04:58.240 --> 00:05:01.910 And so that's just STR okay. 92 00:05:01.910 --> 00:05:04.210 And they also want to show you something else. 93 00:05:06.540 --> 00:05:10.723 So let's look transformed by, 94 00:05:13.560 --> 00:05:15.530 and in the last video I told you 95 00:05:15.530 --> 00:05:18.800 that functions even have methods remember, 96 00:05:18.800 --> 00:05:20.310 and besides methods, 97 00:05:20.310 --> 00:05:22.840 functions can even have properties. 98 00:05:22.840 --> 00:05:25.660 And one of them is the name property. 99 00:05:25.660 --> 00:05:27.750 So again we take F N, 100 00:05:27.750 --> 00:05:29.580 which is the function that 101 00:05:29.580 --> 00:05:33.760 this higher order transformer gets as an input. 102 00:05:33.760 --> 00:05:37.200 And then on that we can read the name property. 103 00:05:37.200 --> 00:05:40.763 And so now let's see the result of this operation. 104 00:05:41.840 --> 00:05:44.653 And so let's take a look at our interesting output. 105 00:05:45.520 --> 00:05:48.060 So of course the original string looks familiar, 106 00:05:48.060 --> 00:05:51.390 but then the transformed string indeed, 107 00:05:51.390 --> 00:05:55.010 was transformed just as we hoped it would. 108 00:05:55.010 --> 00:05:57.690 So the first word is the uppercase. 109 00:05:57.690 --> 00:06:01.433 And so that is of course the work of this function here. 110 00:06:02.534 --> 00:06:04.750 Finally, we can also see that 111 00:06:04.750 --> 00:06:08.320 it was transformed by upper first word. 112 00:06:08.320 --> 00:06:10.830 And so that's FN.Name. 113 00:06:10.830 --> 00:06:12.480 So as the property says, 114 00:06:12.480 --> 00:06:15.500 it is really just the name of the function. 115 00:06:15.500 --> 00:06:16.920 And so this one here we can actually 116 00:06:16.920 --> 00:06:21.120 use on any functioning that we have in JavaScript. 117 00:06:21.120 --> 00:06:22.633 And now let's try the same, 118 00:06:23.540 --> 00:06:25.943 here with our other function. 119 00:06:27.460 --> 00:06:31.283 So one word, and let's see the result. 120 00:06:32.820 --> 00:06:34.570 Let's give it some more space here. 121 00:06:36.320 --> 00:06:38.460 And so here is the second output. 122 00:06:38.460 --> 00:06:41.840 So to transform string is now this one here, 123 00:06:41.840 --> 00:06:44.270 all in one word and indeed it was 124 00:06:44.270 --> 00:06:47.640 transformed by the one word function. 125 00:06:47.640 --> 00:06:49.460 So this one here, 126 00:06:49.460 --> 00:06:50.610 alright? 127 00:06:50.610 --> 00:06:55.610 So let's recap, we're calling the transformer function here 128 00:06:55.690 --> 00:06:59.650 and into that function we are passing the callback function 129 00:07:00.530 --> 00:07:04.000 and remember that we call these functions that we pass. 130 00:07:04.000 --> 00:07:05.670 So this one and this one, 131 00:07:05.670 --> 00:07:07.350 the callback functions. 132 00:07:07.350 --> 00:07:10.780 And that's because we do not call them ourselves. 133 00:07:10.780 --> 00:07:14.860 But instead we call JavaScript to basically tell them later. 134 00:07:14.860 --> 00:07:15.720 And in this case, 135 00:07:15.720 --> 00:07:18.423 calling them later happens right here. 136 00:07:19.260 --> 00:07:21.140 So it's the transform of function 137 00:07:21.140 --> 00:07:24.080 that will call these callback functions. 138 00:07:24.080 --> 00:07:25.520 And the callback functions, 139 00:07:25.520 --> 00:07:28.203 in here are of course called F N. 140 00:07:29.170 --> 00:07:31.680 And so, that's the name of the function in here 141 00:07:31.680 --> 00:07:33.293 that we then have to call. 142 00:07:34.260 --> 00:07:35.790 All right, 143 00:07:35.790 --> 00:07:38.520 and in fact this is exactly the same idea 144 00:07:38.520 --> 00:07:40.430 that we already talked about, 145 00:07:40.430 --> 00:07:42.990 using the add vent listener function. 146 00:07:42.990 --> 00:07:43.963 Right? 147 00:07:43.963 --> 00:07:45.920 So, let's say we had this 148 00:07:47.790 --> 00:07:50.670 very simple function high five, 149 00:07:50.670 --> 00:07:53.450 which doesn't really do much except off 150 00:07:53.450 --> 00:07:55.173 logging something to the console. 151 00:07:56.520 --> 00:07:59.160 Let's just put an emoji here, 152 00:07:59.160 --> 00:08:02.763 this waving one and so now let's say, 153 00:08:03.800 --> 00:08:08.800 document.Buddy.End event listener click 154 00:08:12.630 --> 00:08:14.323 and then this function. 155 00:08:15.230 --> 00:08:17.400 So nevermind about this part here. 156 00:08:17.400 --> 00:08:19.910 We're gonna to learn later what this means, 157 00:08:19.910 --> 00:08:22.540 but what matters is the add event listener? 158 00:08:22.540 --> 00:08:23.810 And so just like, 159 00:08:23.810 --> 00:08:28.810 or a transformer function we pass in a callback function. 160 00:08:28.810 --> 00:08:31.203 Okay, and does callback function in this, 161 00:08:32.180 --> 00:08:35.830 is also called the event handler or event listener, 162 00:08:35.830 --> 00:08:37.230 but that doesn't really matter. 163 00:08:37.230 --> 00:08:39.540 What matters is that conceptually, 164 00:08:39.540 --> 00:08:42.040 this year is the callback function, 165 00:08:42.040 --> 00:08:44.460 and this is the higher order function. 166 00:08:44.460 --> 00:08:47.800 So this one is just like our transformer function. 167 00:08:47.800 --> 00:08:51.823 And this one is just like the one word or upper first word. 168 00:08:53.200 --> 00:08:54.033 Okay. 169 00:08:54.033 --> 00:08:56.610 So it's just a callback that JavaScript, 170 00:08:56.610 --> 00:08:59.833 will call as soon as we click on the body. 171 00:09:01.060 --> 00:09:04.490 So you'll see down there now they appear. 172 00:09:04.490 --> 00:09:08.370 And so only then they call back is really called. 173 00:09:08.370 --> 00:09:10.650 And there are many other examples 174 00:09:10.650 --> 00:09:12.720 in the JavaScript language. 175 00:09:12.720 --> 00:09:15.620 And this concept of callback functions is used 176 00:09:15.620 --> 00:09:18.940 all the time in built in JavaScript functions. 177 00:09:18.940 --> 00:09:21.180 So there are many more examples, 178 00:09:21.180 --> 00:09:22.076 for example the for each 179 00:09:22.076 --> 00:09:25.410 function and that we call on a race. 180 00:09:25.410 --> 00:09:26.960 So let's create an array here. 181 00:09:26.960 --> 00:09:31.960 Jonas, Martha and Adam. 182 00:09:32.200 --> 00:09:34.720 And on that array, we can call 183 00:09:34.720 --> 00:09:37.150 something called D for each method. 184 00:09:37.150 --> 00:09:38.140 And we will learn about this 185 00:09:38.140 --> 00:09:40.560 one in the next section actually. 186 00:09:40.560 --> 00:09:41.393 And then again, 187 00:09:41.393 --> 00:09:45.020 we pass in a callback function into for each. 188 00:09:45.020 --> 00:09:46.743 So let's again use high five. 189 00:09:47.950 --> 00:09:50.640 And so as I reload this now, 190 00:09:50.640 --> 00:09:55.080 then we get here these three wave okay. 191 00:09:55.080 --> 00:09:58.990 And that's because we have three elements in this array. 192 00:09:58.990 --> 00:10:02.120 And so as the name of the method says, 193 00:10:02.120 --> 00:10:05.110 for each of them this callback will be called. 194 00:10:05.110 --> 00:10:07.973 And therefore we have three waving sphere, 195 00:10:09.020 --> 00:10:10.510 but we will learn all about the 196 00:10:10.510 --> 00:10:13.150 for each method in the next section. 197 00:10:13.150 --> 00:10:16.240 What matters here is that once again, 198 00:10:16.240 --> 00:10:19.450 we use the concept of the callback function here. 199 00:10:19.450 --> 00:10:23.303 And so this is something really common in JavaScript. 200 00:10:25.320 --> 00:10:27.300 Let me just write that here, 201 00:10:27.300 --> 00:10:29.163 callbacks all the time. 202 00:10:31.530 --> 00:10:34.410 And so let's now actually take a minute or two 203 00:10:34.410 --> 00:10:36.650 to understand why that is. 204 00:10:36.650 --> 00:10:40.330 Why our callback functions so much used in JavaScript 205 00:10:40.330 --> 00:10:43.060 and why are they so helpful? 206 00:10:43.060 --> 00:10:45.420 Well, the first big advantage of this 207 00:10:45.420 --> 00:10:48.320 is that it makes it easy to split up or code 208 00:10:48.320 --> 00:10:51.820 into more reusable and interconnected parts. 209 00:10:51.820 --> 00:10:54.860 So that's exactly what we have here, right. 210 00:10:54.860 --> 00:10:56.580 We have all of this functionality here, 211 00:10:56.580 --> 00:10:59.940 nicely split up into their own functions, 212 00:10:59.940 --> 00:11:02.750 and that itself is really helpful. 213 00:11:02.750 --> 00:11:06.070 But there is a second and way more important advantage, 214 00:11:06.070 --> 00:11:08.480 which is the fact that callback functions 215 00:11:08.480 --> 00:11:11.010 allow us to create abstraction. 216 00:11:11.010 --> 00:11:13.320 So let me explain what that means. 217 00:11:13.320 --> 00:11:17.140 So what we did here in our code example was to create a 218 00:11:17.140 --> 00:11:20.430 level of abstraction and abstraction 219 00:11:20.430 --> 00:11:24.000 is something really important in programming. 220 00:11:24.000 --> 00:11:26.640 So basically what abstract and means, 221 00:11:26.640 --> 00:11:29.060 is that we hide the detail of some code 222 00:11:29.060 --> 00:11:31.950 implementation because we don't really care 223 00:11:31.950 --> 00:11:34.150 about all that detail. 224 00:11:34.150 --> 00:11:35.710 And this allows us to think 225 00:11:35.710 --> 00:11:39.720 about problems at a higher more abstract level. 226 00:11:39.720 --> 00:11:42.480 And so that's why it's called an obstruction. 227 00:11:42.480 --> 00:11:45.060 So coming back to our example here, 228 00:11:45.060 --> 00:11:48.350 this transform a function does not care at all, 229 00:11:48.350 --> 00:11:50.660 how the string is transformed. 230 00:11:50.660 --> 00:11:53.580 It doesn't care about this level of detail. 231 00:11:53.580 --> 00:11:57.410 Okay, all that wants to do is to transform a string, 232 00:11:57.410 --> 00:12:00.280 but it doesn't care how it should do it. 233 00:12:00.280 --> 00:12:03.380 So what I mean is that we could have taken, 234 00:12:03.380 --> 00:12:08.140 this coat here and written it directly into transformer, 235 00:12:08.140 --> 00:12:10.190 or even this coat here, 236 00:12:10.190 --> 00:12:11.023 right. 237 00:12:11.023 --> 00:12:13.270 That would have worked just the same, 238 00:12:13.270 --> 00:12:15.520 but instead we abstracted this 239 00:12:15.520 --> 00:12:18.750 coat away into other functions. 240 00:12:18.750 --> 00:12:22.350 So again, we created a new level of obstruction 241 00:12:22.350 --> 00:12:25.130 and by doing this or main transformer function, 242 00:12:25.130 --> 00:12:27.370 here is really only concerned 243 00:12:27.370 --> 00:12:30.370 with transforming the input string itself. 244 00:12:30.370 --> 00:12:34.970 But no matter how that transforming itself actually works. 245 00:12:34.970 --> 00:12:38.400 So it's basically delegating the string transformation 246 00:12:38.400 --> 00:12:41.120 to the other lower level of functions, 247 00:12:41.120 --> 00:12:43.120 which are these two. 248 00:12:43.120 --> 00:12:46.260 Okay, and I hope this makes sense for you, 249 00:12:46.260 --> 00:12:49.600 but we will also come back to this idea of abstraction 250 00:12:49.600 --> 00:12:53.310 later when we talk about object oriented programming. 251 00:12:53.310 --> 00:12:55.270 But it's good for you to think 252 00:12:55.270 --> 00:12:58.210 and to talk about this stuff as soon as possible, 253 00:12:58.210 --> 00:13:01.370 so that you can start to get an idea for this really, 254 00:13:01.370 --> 00:13:04.310 important concept of abstraction. 255 00:13:04.310 --> 00:13:06.950 And now with this idea of obstruction 256 00:13:06.950 --> 00:13:10.413 and higher levels and lower levels of obstruction, 257 00:13:12.700 --> 00:13:15.950 here is called a higher order function. 258 00:13:15.950 --> 00:13:19.500 Right, and again that's basically because this function 259 00:13:19.500 --> 00:13:23.610 here operates at a higher level of obstruction, 260 00:13:23.610 --> 00:13:28.310 leaving the low level details to this low level functions. 261 00:13:28.310 --> 00:13:29.670 Okay. 262 00:13:29.670 --> 00:13:31.390 Now they are not really called 263 00:13:31.390 --> 00:13:34.530 hello order or low level functions, 264 00:13:34.530 --> 00:13:36.240 but that's just how I like to call 265 00:13:36.240 --> 00:13:38.830 them in this circumstance. 266 00:13:38.830 --> 00:13:39.840 All right, 267 00:13:39.840 --> 00:13:41.210 so understanding this 268 00:13:41.210 --> 00:13:44.360 is absolutely crucial for your process. 269 00:13:44.360 --> 00:13:46.547 And I actually consider this one of the most 270 00:13:46.547 --> 00:13:49.500 important lectures here of the course 271 00:13:49.500 --> 00:13:51.820 because callback functions are really, 272 00:13:51.820 --> 00:13:55.730 a vital part of the JavaScript language. 273 00:13:55.730 --> 00:13:59.570 And that's one of the main takeaways from this video. 274 00:13:59.570 --> 00:14:02.740 They allow us to create this kind of logic here. 275 00:14:02.740 --> 00:14:06.100 And so, I think it's probably a good idea, 276 00:14:06.100 --> 00:14:08.370 that who really reviewed us really well 277 00:14:08.370 --> 00:14:10.950 and maybe even write your own example, 278 00:14:10.950 --> 00:14:13.020 of something that you see in the real world 279 00:14:13.020 --> 00:14:15.440 using the same concept, 280 00:14:15.440 --> 00:14:16.273 okay. 281 00:14:16.273 --> 00:14:18.723 I think that's a really good idea that you should try out. 282 00:14:19.630 --> 00:14:21.730 Then here in the built in functions like 283 00:14:21.730 --> 00:14:24.140 add event listener and for each, 284 00:14:24.140 --> 00:14:26.850 these callback functions are so important 285 00:14:26.850 --> 00:14:29.300 and so useful because we use them, 286 00:14:29.300 --> 00:14:33.190 to tell these functions what exactly they should do. 287 00:14:33.190 --> 00:14:35.600 For example, the add event listener function 288 00:14:35.600 --> 00:14:37.860 on its own would have no idea 289 00:14:37.860 --> 00:14:41.400 of what to do whenever the click event happens here. 290 00:14:41.400 --> 00:14:42.570 Right? 291 00:14:42.570 --> 00:14:45.890 And so that's why we pass in the callback function here, 292 00:14:45.890 --> 00:14:49.903 to tell the add event listener function exactly what to do. 293 00:14:50.790 --> 00:14:52.300 And as you already know, 294 00:14:52.300 --> 00:14:54.660 this is the higher order function here 295 00:14:54.660 --> 00:14:57.037 with the high level of obstruction. 296 00:14:57.037 --> 00:14:58.410 And this here is the function with, 297 00:14:58.410 --> 00:15:01.233 the more lower level of obstruction. 298 00:15:02.070 --> 00:15:03.160 All right. 299 00:15:03.160 --> 00:15:04.490 But enough talk, 300 00:15:04.490 --> 00:15:07.190 please take a minute to really review this lecture 301 00:15:07.190 --> 00:15:09.670 and build an example of your own maybe. 302 00:15:09.670 --> 00:15:11.400 And then I see you in the next video, 303 00:15:11.400 --> 00:15:14.960 where we will basically do the opposite of this one. 304 00:15:14.960 --> 00:15:17.763 So having functions return other functions.