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.