WEBVTT 1 00:00:01.170 --> 00:00:04.430 Let's do the opposite of the last lecture 2 00:00:04.430 --> 00:00:07.943 and create a function that returns a new function. 3 00:00:09.640 --> 00:00:14.163 So I'm gonna write a very simple greet function here, 4 00:00:15.740 --> 00:00:19.800 because this is really just to demonstrate this point here 5 00:00:19.800 --> 00:00:21.833 as easily as possible. 6 00:00:23.120 --> 00:00:27.590 So here we can pass in a greeting like hi 7 00:00:27.590 --> 00:00:30.890 or hello or something like that. 8 00:00:30.890 --> 00:00:33.018 And then all this function will do 9 00:00:33.018 --> 00:00:35.920 is to return a new function. 10 00:00:35.920 --> 00:00:36.950 So as always, 11 00:00:36.950 --> 00:00:40.973 we write return and then simply a new function value. 12 00:00:43.010 --> 00:00:45.020 And this new function that we return 13 00:00:45.020 --> 00:00:48.266 will also have a parameter so it will be able 14 00:00:48.266 --> 00:00:50.743 to receive arguments. Right? 15 00:00:51.770 --> 00:00:54.033 And so what this function here will do, 16 00:00:55.290 --> 00:00:57.540 is it will simply look to the console, 17 00:00:57.540 --> 00:01:01.170 basically the greeting, and then the name of the person 18 00:01:01.170 --> 00:01:03.273 that we passed into this function. 19 00:01:04.940 --> 00:01:06.310 So let's just write this 20 00:01:06.310 --> 00:01:08.973 and it will make sense when we see this in action. 21 00:01:10.210 --> 00:01:12.853 I'm sure it looks a bit weird right now. 22 00:01:13.890 --> 00:01:16.483 And now let's actually use the greet function. 23 00:01:18.180 --> 00:01:20.260 So let's say greet 24 00:01:21.350 --> 00:01:25.450 with hey and so 'hey' is the greeting here. 25 00:01:25.450 --> 00:01:29.940 Now what will be the result of this function call? 26 00:01:29.940 --> 00:01:34.290 Well, it's gonna be this function, right? 27 00:01:34.290 --> 00:01:39.080 And so let's store the result of this function call, 28 00:01:39.080 --> 00:01:41.913 which will be as we just said, that function, 29 00:01:43.420 --> 00:01:45.943 I'm gonna call this one greeterHey. 30 00:01:49.590 --> 00:01:54.590 So this value here now is actually now a function. 31 00:01:54.710 --> 00:01:58.680 Okay. And essentially it is this function. 32 00:01:58.680 --> 00:02:01.410 So what this means is that we can now call 33 00:02:01.410 --> 00:02:05.323 this greeter function just as if it was any other function 34 00:02:05.323 --> 00:02:07.953 that we defined ourselves. 35 00:02:07.953 --> 00:02:10.536 So let's say greeterHey Jonah's 36 00:02:12.200 --> 00:02:14.350 and let's call it another time. 37 00:02:14.350 --> 00:02:18.401 Greeter Hey Steven 38 00:02:18.401 --> 00:02:20.540 and now I'm gonna run it. 39 00:02:20.540 --> 00:02:24.610 And indeed we get Hey Jonas and Hey Steven. 40 00:02:24.610 --> 00:02:28.133 And so this worked again because this greeterHey, 41 00:02:28.133 --> 00:02:30.630 it's essentially this. 42 00:02:30.630 --> 00:02:34.020 And so now we're calling it with the argument of Jonas. 43 00:02:34.020 --> 00:02:36.650 And so this name here is then of course, 44 00:02:36.650 --> 00:02:38.810 this name that we specified here. 45 00:02:38.810 --> 00:02:41.013 Now, the greeting is still coming from 46 00:02:41.013 --> 00:02:43.592 this greet function here. 47 00:02:43.592 --> 00:02:46.483 And in case you're wondering why that actually works, 48 00:02:46.483 --> 00:02:50.760 it is because of something called a closure. 49 00:02:50.760 --> 00:02:54.100 Now closures are a very complex and difficult 50 00:02:54.100 --> 00:02:57.146 to understand mechanism that's part of JavaScript. 51 00:02:57.146 --> 00:03:00.320 And so there are two separate videos at the end 52 00:03:00.320 --> 00:03:02.800 of the section about closures. 53 00:03:02.800 --> 00:03:04.300 So closures is one of the 54 00:03:04.300 --> 00:03:07.870 most misunderstood topics in JavaScript. 55 00:03:07.870 --> 00:03:09.553 So don't worry about that Now, 56 00:03:10.501 --> 00:03:13.430 what matters here is that our first function a greet 57 00:03:13.430 --> 00:03:17.182 returned a new function that we stored into this variable. 58 00:03:17.182 --> 00:03:20.753 And so this variable is now just a function that we can call 59 00:03:20.753 --> 00:03:25.240 as we did here again sing the parenthesis syntax. 60 00:03:25.240 --> 00:03:28.493 And of course we could also do it all in one go. 61 00:03:29.490 --> 00:03:33.642 So we can again, call greet. let's say hello now. 62 00:03:33.642 --> 00:03:38.130 And so again this year is now a function. 63 00:03:38.130 --> 00:03:39.932 Okay so if this is a function, 64 00:03:39.932 --> 00:03:44.860 we can immediately call it, right? And so we call like this, 65 00:03:44.860 --> 00:03:48.410 and then we passed into name which is the argument 66 00:03:48.410 --> 00:03:52.750 of this function here, right? And so even though 67 00:03:52.750 --> 00:03:56.090 this looks a bit weird, it is gonna to work. 68 00:03:56.090 --> 00:04:00.580 And so we get hello Jonas now.All right. 69 00:04:00.580 --> 00:04:04.000 And now this example might look a bit weird 70 00:04:04.000 --> 00:04:07.270 and unnecessary for you Like what's the point 71 00:04:07.270 --> 00:04:10.400 of having functions returning other functions? 72 00:04:10.400 --> 00:04:12.620 Well, this will actually become extremely 73 00:04:12.620 --> 00:04:15.070 useful in some situations. 74 00:04:15.070 --> 00:04:17.650 And especially if we're using a really important 75 00:04:17.650 --> 00:04:20.960 programming paradigm called functional programming. 76 00:04:20.960 --> 00:04:23.510 And I think I've mentioned it sometimes throughout 77 00:04:23.510 --> 00:04:25.360 the course and we're actually gonna 78 00:04:25.360 --> 00:04:29.520 look at functional programming by the end of the course. 79 00:04:29.520 --> 00:04:32.150 Maybe not by the time I first published the course, 80 00:04:32.150 --> 00:04:34.610 but certainly some point later. 81 00:04:34.610 --> 00:04:37.031 Anyway make sure to understand this here 82 00:04:37.031 --> 00:04:40.160 and especially this line of code. 83 00:04:40.160 --> 00:04:42.300 And if you understand this, then I'm sure 84 00:04:42.300 --> 00:04:45.123 you understood everything what happened here. 85 00:04:46.030 --> 00:04:48.730 Now, just as a small challenge to finish here, 86 00:04:48.730 --> 00:04:51.399 try to rewrite this function here 87 00:04:51.399 --> 00:04:53.940 using only arrow functions. 88 00:04:53.940 --> 00:04:57.220 And believe me that's gonna look a little bit confusing, 89 00:04:57.220 --> 00:04:59.060 but I'm sure you can do it. 90 00:04:59.060 --> 00:05:01.770 So just take some time and try to rewrite 91 00:05:01.770 --> 00:05:04.560 that greet function using arrow functions. 92 00:05:04.560 --> 00:05:06.110 line:15% And I see you here in a minute. 93 00:05:08.860 --> 00:05:10.320 Okay, 94 00:05:10.320 --> 00:05:11.190 so let's 95 00:05:12.940 --> 00:05:14.170 see how it's done 96 00:05:16.790 --> 00:05:18.220 so greet 97 00:05:18.220 --> 00:05:19.733 Just gonna call it R, 98 00:05:21.770 --> 00:05:24.090 so this one takes again, 99 00:05:24.090 --> 00:05:28.130 greeting as an argument and it returns a new function. 100 00:05:28.130 --> 00:05:30.810 So this means that it only has one line of code, 101 00:05:30.810 --> 00:05:33.030 which returns something. 102 00:05:33.030 --> 00:05:34.700 So all we need is this arrow. 103 00:05:34.700 --> 00:05:37.010 And then we don't even need the curly braces 104 00:05:37.010 --> 00:05:40.050 and we don't need to return a statement. 105 00:05:40.050 --> 00:05:42.490 So what are we gonna return from here? 106 00:05:42.490 --> 00:05:43.970 A new function. 107 00:05:43.970 --> 00:05:48.140 So again, an arrow function and so another arrow here, 108 00:05:48.140 --> 00:05:49.370 and then simply this 109 00:05:53.430 --> 00:05:55.800 let's give it a safe and a try 110 00:05:57.110 --> 00:05:57.970 So greet 111 00:05:58.920 --> 00:05:59.753 R 112 00:06:00.710 --> 00:06:04.860 and let's use hi, this time and yeah, 113 00:06:04.860 --> 00:06:06.133 we get hi Jonas, 114 00:06:07.700 --> 00:06:08.800 okay? 115 00:06:08.800 --> 00:06:10.645 So this is an even shorter way 116 00:06:10.645 --> 00:06:13.850 of writing the same function but in my opinion, 117 00:06:13.850 --> 00:06:16.540 it's actually a lot more confusing. 118 00:06:16.540 --> 00:06:18.250 And that's why I wrote it using 119 00:06:18.250 --> 00:06:20.440 this more traditional way here. 120 00:06:20.440 --> 00:06:21.273 But in the end, 121 00:06:21.273 --> 00:06:24.350 it's also simply one arrow function 122 00:06:24.350 --> 00:06:26.800 returning another arrow function. 123 00:06:26.800 --> 00:06:28.855 And so that's the essence of this video, 124 00:06:28.855 --> 00:06:30.569 which I hope was clear to you. 125 00:06:30.569 --> 00:06:34.163 And if so, then let's move on right to the next one.