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.