WEBVTT 1 00:00:01.410 --> 00:00:04.220 Let's now create two more situations 2 00:00:04.220 --> 00:00:06.920 in which closures are gonna appear. 3 00:00:06.920 --> 00:00:10.030 So that you can start identifying closures 4 00:00:10.030 --> 00:00:12.063 in your own code in the future. 5 00:00:13.810 --> 00:00:16.960 And both of these examples are gonna demonstrate 6 00:00:16.960 --> 00:00:19.300 that we don't need to return if function 7 00:00:19.300 --> 00:00:23.120 from another function in order to create a closure. 8 00:00:23.120 --> 00:00:28.120 All right, so let's start with our first example here. 9 00:00:28.190 --> 00:00:32.540 I'm gonna start by defining an empty variable called f 10 00:00:34.510 --> 00:00:36.913 and then a function expression g. 11 00:00:42.350 --> 00:00:44.410 So these are just some generic names 12 00:00:45.760 --> 00:00:48.573 because what the functions do here don't really matter. 13 00:00:50.060 --> 00:00:53.620 Then in here, I defined this a variable 14 00:00:53.620 --> 00:00:57.543 and then I'm going to reassign the F variable 15 00:00:57.543 --> 00:00:59.980 that we created out here. 16 00:00:59.980 --> 00:01:02.533 And I'm gonna assign it a function value. 17 00:01:04.660 --> 00:01:07.870 And this function will then simply log 18 00:01:07.870 --> 00:01:10.490 the a variable to the console 19 00:01:10.490 --> 00:01:11.923 let's say times two. 20 00:01:12.830 --> 00:01:15.833 Okay, and that's it for now at least. 21 00:01:17.300 --> 00:01:20.740 So let's try to call g 22 00:01:22.430 --> 00:01:24.710 so that's gonna be dispersed function. 23 00:01:24.710 --> 00:01:29.280 And so the result of this function is that a will be 23 24 00:01:29.280 --> 00:01:32.870 and that F variable that we have out here 25 00:01:32.870 --> 00:01:34.970 will become this function. 26 00:01:34.970 --> 00:01:39.970 And so after g we can then call F. 27 00:01:39.970 --> 00:01:40.903 So let's try that. 28 00:01:41.770 --> 00:01:46.770 And we get 46 which is indeed 23 times two, all right. 29 00:01:48.850 --> 00:01:53.030 And so what this proves is that this F value here 30 00:01:53.030 --> 00:01:57.730 so this F function really does close over any variables 31 00:01:57.730 --> 00:02:01.950 of the execution context in which it was defined. 32 00:02:01.950 --> 00:02:06.290 And that is true even when the variable itself. 33 00:02:06.290 --> 00:02:11.080 So F here was technically not even defined inside 34 00:02:11.080 --> 00:02:14.710 of this variable environment here, right. 35 00:02:14.710 --> 00:02:17.440 So this F variable was defined outside here 36 00:02:17.440 --> 00:02:20.410 in the global scope, it was created here 37 00:02:20.410 --> 00:02:23.530 but then as we assigned it a function here 38 00:02:23.530 --> 00:02:25.960 in this the g function, 39 00:02:25.960 --> 00:02:27.840 so right here at instill closed 40 00:02:27.840 --> 00:02:31.390 over the variable environment of the g function. 41 00:02:31.390 --> 00:02:34.330 And that includes this a variable. 42 00:02:34.330 --> 00:02:38.230 And therefore it is able to access this a variable here 43 00:02:38.230 --> 00:02:41.730 even after the g function here at this point 44 00:02:41.730 --> 00:02:46.170 has of course already finished its execution, right. 45 00:02:46.170 --> 00:02:49.500 So that's just what we learned in the last lecture. 46 00:02:49.500 --> 00:02:51.490 So at this point of the execution, 47 00:02:51.490 --> 00:02:56.490 the variable environment of g is no longer there, right. 48 00:02:56.760 --> 00:02:59.960 But f, so this function here closed over 49 00:02:59.960 --> 00:03:03.620 that variable environment and therefore it is able 50 00:03:03.620 --> 00:03:06.283 to access the a variable. 51 00:03:08.030 --> 00:03:11.670 So basically using the analogy of or less video, 52 00:03:11.670 --> 00:03:16.670 the a variable is inside the backpack of the f function. 53 00:03:17.480 --> 00:03:20.670 But now let's take it to the next level 54 00:03:20.670 --> 00:03:22.503 and create a new function here. 55 00:03:25.320 --> 00:03:29.540 So that's h and it's gonna be very similar. 56 00:03:29.540 --> 00:03:34.540 All it's gonna do is to define b as some other value, 57 00:03:35.060 --> 00:03:39.340 let's say this and then we will again, 58 00:03:39.340 --> 00:03:42.193 reassign f, right here. 59 00:03:43.250 --> 00:03:46.500 So let's call this one a b now of course. 60 00:03:46.500 --> 00:03:49.950 So this one here will then try to access b 61 00:03:49.950 --> 00:03:51.423 and multiply by two. 62 00:03:52.800 --> 00:03:56.110 Okay, and so what I want to see with this 63 00:03:56.110 --> 00:03:59.300 is what happens when we assign the f value 64 00:03:59.300 --> 00:04:00.573 a second function. 65 00:04:01.580 --> 00:04:06.580 Okay, so here we call g and so g will then assign to 66 00:04:06.680 --> 00:04:09.810 or empty variable this f function. 67 00:04:09.810 --> 00:04:14.810 Okay, and then if we call h afterwards 68 00:04:14.910 --> 00:04:18.640 or actually let's do it after calling f for the first time. 69 00:04:18.640 --> 00:04:21.500 So as we then call h then the f variable 70 00:04:21.500 --> 00:04:23.680 will be assigned again. 71 00:04:23.680 --> 00:04:26.713 So then a second function which is this one here. 72 00:04:27.780 --> 00:04:31.890 And so what I want to see is what f does then. 73 00:04:31.890 --> 00:04:33.270 So let's see. 74 00:04:33.270 --> 00:04:36.860 And again, keeping in mind that F at this point 75 00:04:36.860 --> 00:04:39.510 is a different function than this one here 76 00:04:39.510 --> 00:04:42.203 because it was reassigned by h. 77 00:04:43.210 --> 00:04:44.493 We just write that here. 78 00:04:51.520 --> 00:04:56.520 Okay, and now we get 1554 which is probably 777 times two 79 00:05:00.530 --> 00:05:02.140 and indeed it is. 80 00:05:02.140 --> 00:05:05.520 And so this proves that the f function 81 00:05:05.520 --> 00:05:07.240 it was reassigned here 82 00:05:07.240 --> 00:05:11.560 also closed over the variable environment of h. 83 00:05:11.560 --> 00:05:15.180 And so that's how it can access then the b variable here 84 00:05:15.180 --> 00:05:17.163 which has set to 777. 85 00:05:18.120 --> 00:05:22.390 So let's actually inspect the variable environment like 86 00:05:22.390 --> 00:05:24.643 we did by the end of the last video. 87 00:05:25.930 --> 00:05:30.930 So of f and then we will be able to see that in the closure, 88 00:05:34.000 --> 00:05:37.490 it does indeed have the value of b 89 00:05:37.490 --> 00:05:40.930 and it now no longer has the value of a. 90 00:05:40.930 --> 00:05:44.950 So after the closure that it used to have before. 91 00:05:44.950 --> 00:05:47.530 So at this point here at the closure contained 92 00:05:47.530 --> 00:05:52.530 the value a and we can of course also see that. 93 00:05:53.400 --> 00:05:58.400 So at this point in time, the closure is indeed a 23, right. 94 00:06:04.350 --> 00:06:09.350 And so then as we reassign the function to a new value, 95 00:06:09.350 --> 00:06:12.820 then that old closure basically disappears 96 00:06:12.820 --> 00:06:16.363 and now the closure is b. 97 00:06:17.260 --> 00:06:20.150 So this variable here of the birthplace 98 00:06:20.150 --> 00:06:22.630 where it was reassigned. 99 00:06:22.630 --> 00:06:25.770 And this is really fascinating in my opinion 100 00:06:25.770 --> 00:06:28.160 that the closure can change like this 101 00:06:28.160 --> 00:06:30.670 as the variable is reassigned. 102 00:06:30.670 --> 00:06:34.640 So it really is true that a closure always makes sure 103 00:06:34.640 --> 00:06:37.720 that a function does not lose the connection 104 00:06:37.720 --> 00:06:41.760 to the variables that were present at its birthplace. 105 00:06:41.760 --> 00:06:44.000 So it's always gonna remember them. 106 00:06:44.000 --> 00:06:45.940 In our case here, the function 107 00:06:45.940 --> 00:06:49.510 was kind of born inside of g first 108 00:06:49.510 --> 00:06:54.050 and then it was essentially reborn again in h. 109 00:06:54.050 --> 00:06:57.490 And so first the closure contained the a variable 110 00:06:57.490 --> 00:06:59.450 of its first birthplace. 111 00:06:59.450 --> 00:07:03.920 And then as it was reborn to follow our analogy 112 00:07:03.920 --> 00:07:08.500 then it remembered this B variable off its birthplace. 113 00:07:08.500 --> 00:07:13.253 Okay, so this was example one. 114 00:07:14.250 --> 00:07:17.513 Let's now create another example. 115 00:07:21.540 --> 00:07:24.690 Okay, so I hope the first one was clear here. 116 00:07:24.690 --> 00:07:26.670 So whenever something like this happens 117 00:07:26.670 --> 00:07:30.690 where your reassigned functions even without returning them, 118 00:07:30.690 --> 00:07:33.940 keep in mind that also this will create a closure 119 00:07:35.760 --> 00:07:39.130 but now moving on to our second example here 120 00:07:39.130 --> 00:07:41.410 and that's gonna be a timer. 121 00:07:41.410 --> 00:07:43.950 So a timer is another great example 122 00:07:43.950 --> 00:07:46.460 that we don't need to return a function 123 00:07:46.460 --> 00:07:48.423 to see a closure in action. 124 00:07:49.960 --> 00:07:54.373 So here I'm going back to the example of the airline. 125 00:07:57.300 --> 00:08:01.320 So creating a function called board passengers 126 00:08:03.940 --> 00:08:08.940 and then we get the number of passengers and a wait time. 127 00:08:10.710 --> 00:08:13.320 Then let's create a new variable in here 128 00:08:13.320 --> 00:08:14.723 which I'm calling perGroup. 129 00:08:16.520 --> 00:08:20.240 And that's because boarding usually happens in groups 130 00:08:20.240 --> 00:08:22.040 and we usually have three groups. 131 00:08:22.040 --> 00:08:24.700 So I'm gonna divide all the passengers. 132 00:08:24.700 --> 00:08:28.940 So the number of passengers that is boarding by three 133 00:08:30.460 --> 00:08:31.850 and by the end of this function, 134 00:08:31.850 --> 00:08:33.523 I want to lock to the console. 135 00:08:35.340 --> 00:08:40.340 We'll start boarding and then wait seconds, okay. 136 00:08:46.110 --> 00:08:48.840 And now let's actually use a timer 137 00:08:48.840 --> 00:08:52.157 and we haven't actually used a timer yet in this course. 138 00:08:52.157 --> 00:08:54.750 And we will learn more about them later 139 00:08:54.750 --> 00:08:56.670 but this is such a good use case 140 00:08:56.670 --> 00:09:00.010 that I wanted to use a timer now. 141 00:09:00.010 --> 00:09:01.830 And it's actually very simple. 142 00:09:01.830 --> 00:09:05.830 So we just use the set time out function 143 00:09:06.720 --> 00:09:09.650 and a set time out function needs two parameters. 144 00:09:09.650 --> 00:09:13.223 The first one is a function which will be executed, okay. 145 00:09:15.290 --> 00:09:19.610 And this function will be executed after a certain time. 146 00:09:19.610 --> 00:09:23.010 For example, we can specify a 1,000 milliseconds 147 00:09:23.010 --> 00:09:26.180 because the second argument here is milliseconds. 148 00:09:26.180 --> 00:09:28.530 And so that will mean that whatever code 149 00:09:28.530 --> 00:09:31.260 is inside of this function will be executed 150 00:09:31.260 --> 00:09:32.823 after one second. 151 00:09:34.070 --> 00:09:36.340 Let me actually do that out here 152 00:09:36.340 --> 00:09:38.653 just so you see this as an example. 153 00:09:42.950 --> 00:09:45.730 So if I saved us now wait one second 154 00:09:45.730 --> 00:09:47.800 and then here you see timer appearing. 155 00:09:47.800 --> 00:09:49.150 So I'm gonna do that again. 156 00:09:50.470 --> 00:09:53.920 Okay, so you'll see that after this one second, 157 00:09:53.920 --> 00:09:56.060 this function was executed. 158 00:09:56.060 --> 00:09:59.540 Okay, and so this, as we already learned before 159 00:09:59.540 --> 00:10:01.810 is essentially a callback function. 160 00:10:01.810 --> 00:10:05.210 And in this case it is literally called later. 161 00:10:05.210 --> 00:10:07.313 So in this case, after one second. 162 00:10:08.720 --> 00:10:11.663 So let's create or callback function here. 163 00:10:13.170 --> 00:10:15.560 And first I want to log to the console. 164 00:10:15.560 --> 00:10:20.560 We are now boarding all and then the n passengers. 165 00:10:25.330 --> 00:10:30.220 And so this n here is this parameter of the function. 166 00:10:30.220 --> 00:10:35.190 So of this parent function which essentially is the function 167 00:10:35.190 --> 00:10:38.480 or the scope in which this callback function here 168 00:10:38.480 --> 00:10:40.040 is being created. 169 00:10:40.040 --> 00:10:42.080 And so that will of course be important 170 00:10:42.080 --> 00:10:43.943 for our closure example. 171 00:10:46.066 --> 00:10:49.610 And then let's also use the perGroup variable now. 172 00:10:49.610 --> 00:10:54.597 There are three groups each with 173 00:11:00.640 --> 00:11:03.480 passengers, okay, 174 00:11:03.480 --> 00:11:06.870 that's our function and now let's call it. 175 00:11:06.870 --> 00:11:11.870 And here we want to specify wait and then times 1,000 176 00:11:12.690 --> 00:11:16.290 because we're gonna pass into wait in seconds. 177 00:11:16.290 --> 00:11:19.240 And this argument here needs to be in milliseconds 178 00:11:19.240 --> 00:11:21.863 and so we just multiply by 1,000. 179 00:11:23.730 --> 00:11:28.450 So board passengers, let's say we have 180 passengers 180 00:11:29.300 --> 00:11:32.700 and it takes two, let's say three seconds. 181 00:11:32.700 --> 00:11:36.170 So immediately when we call this function, 182 00:11:36.170 --> 00:11:38.210 this variable will be created 183 00:11:38.210 --> 00:11:40.580 then set time out will be called 184 00:11:40.580 --> 00:11:44.390 and it will basically register this callback function here. 185 00:11:44.390 --> 00:11:47.330 And then that will be called after three seconds. 186 00:11:47.330 --> 00:11:50.510 But immediately also this console.log here 187 00:11:50.510 --> 00:11:53.060 will be called, all right. 188 00:11:53.060 --> 00:11:57.750 So this console.log here will not wait these three seconds 189 00:11:57.750 --> 00:12:00.910 for these set time out callback to finish. 190 00:12:00.910 --> 00:12:05.730 Okay, so immediately this variable is created, 191 00:12:05.730 --> 00:12:09.180 this set timeout function is run and console.log is run. 192 00:12:09.180 --> 00:12:12.480 And then after three seconds, this function here 193 00:12:12.480 --> 00:12:13.870 will be executed. 194 00:12:13.870 --> 00:12:17.430 And so let's see what happens to the n variable 195 00:12:17.430 --> 00:12:20.673 and to the perGroup variable that is in this function. 196 00:12:23.040 --> 00:12:27.340 So immediately we got this log and then after three seconds, 197 00:12:27.340 --> 00:12:30.840 we are boarding all 180 and there are three groups 198 00:12:30.840 --> 00:12:33.870 with 60 passengers each. 199 00:12:33.870 --> 00:12:36.330 Okay, it worked. 200 00:12:36.330 --> 00:12:39.860 And again, keep in mind that this callback function here 201 00:12:39.860 --> 00:12:42.940 was executed completely independently 202 00:12:42.940 --> 00:12:45.570 from the board passengers function. 203 00:12:45.570 --> 00:12:48.470 All right, but still the callback function 204 00:12:48.470 --> 00:12:51.220 was able to use all the variables that were 205 00:12:51.220 --> 00:12:55.030 in the variable environment in which it was created. 206 00:12:55.030 --> 00:12:57.503 So that's n and perGroup. 207 00:12:59.000 --> 00:13:01.680 And one more time, this is a clear sign 208 00:13:01.680 --> 00:13:05.250 of a closure being created, right. 209 00:13:05.250 --> 00:13:08.660 So the only way in which this callback function here 210 00:13:08.660 --> 00:13:11.720 can have access to the variables that are defined 211 00:13:11.720 --> 00:13:13.473 in the board passengers function 212 00:13:13.473 --> 00:13:18.200 that has long finished execution is if it created a closure. 213 00:13:18.200 --> 00:13:20.310 And so that's exactly what happened. 214 00:13:20.310 --> 00:13:24.130 And yeah, that's how we got access to perGroup 215 00:13:24.130 --> 00:13:26.730 and also this argument of the function 216 00:13:26.730 --> 00:13:29.110 so this wait here, right. 217 00:13:29.110 --> 00:13:31.280 So as I mentioned in the last lecture, 218 00:13:31.280 --> 00:13:34.170 the closure of course also includes the arguments 219 00:13:34.170 --> 00:13:36.320 and that's because they are really just 220 00:13:36.320 --> 00:13:39.050 a local variables in the function. 221 00:13:39.050 --> 00:13:41.820 And to finish, let's now also prove 222 00:13:41.820 --> 00:13:45.470 that the closure does in fact have priority 223 00:13:45.470 --> 00:13:47.290 over the sculpt chain. 224 00:13:47.290 --> 00:13:49.590 So here in the global scope, 225 00:13:49.590 --> 00:13:54.323 I'm also gonna create a variable called perGroup equals 226 00:13:56.280 --> 00:13:59.254 and then just some value here. 227 00:13:59.254 --> 00:14:03.820 And so if the scope chain had priority over the closure, 228 00:14:03.820 --> 00:14:05.630 then this callback function here 229 00:14:05.630 --> 00:14:08.670 would indeed use this variable here 230 00:14:08.670 --> 00:14:10.120 this global variable 231 00:14:10.120 --> 00:14:12.620 because we can imagine this function here 232 00:14:12.620 --> 00:14:16.740 basically being executed in the global scope, okay. 233 00:14:16.740 --> 00:14:20.120 So if it wasn't for the closure it would use this. 234 00:14:20.120 --> 00:14:22.210 So let me actually demonstrate that to you. 235 00:14:22.210 --> 00:14:24.880 So if I remove this variable, 236 00:14:24.880 --> 00:14:27.090 then it will be able to use the perGroup 237 00:14:29.570 --> 00:14:31.510 and data is here outside. 238 00:14:31.510 --> 00:14:33.880 So indeed now we get 1,000 239 00:14:33.880 --> 00:14:36.230 but then as we put it back here 240 00:14:36.230 --> 00:14:40.490 then the callback function will close over this variable. 241 00:14:40.490 --> 00:14:41.750 So it will close over 242 00:14:41.750 --> 00:14:45.290 the entire variable environment in fact. 243 00:14:45.290 --> 00:14:50.290 And so therefore it will then use this year first, right. 244 00:14:50.570 --> 00:14:52.100 And it did. 245 00:14:52.100 --> 00:14:56.530 So in fact, a disclosure even has priority 246 00:14:56.530 --> 00:14:57.633 over the sculpt chain. 247 00:14:58.690 --> 00:15:00.370 Okay, and with this, 248 00:15:00.370 --> 00:15:04.180 we finished these two lectures about closures 249 00:15:04.180 --> 00:15:06.080 and they hope that after this one, 250 00:15:06.080 --> 00:15:10.320 you are now a little bit better able to identify closures 251 00:15:10.320 --> 00:15:14.520 as they happen in your code or even here in my code 252 00:15:14.520 --> 00:15:15.730 throughout the codes 253 00:15:15.730 --> 00:15:18.790 because we will see some closures happening 254 00:15:18.790 --> 00:15:21.130 some more times in the future. 255 00:15:21.130 --> 00:15:23.990 Now all there's left to do is the coding challenge 256 00:15:23.990 --> 00:15:26.320 in the next video where you will be thinking 257 00:15:26.320 --> 00:15:28.323 about closures one more time.