WEBVTT 1 00:00:01.550 --> 00:00:06.550 To make sure 100% that you understand closures now, 2 00:00:06.600 --> 00:00:09.433 lets work on this coding challenge number 2. 3 00:00:11.460 --> 00:00:15.000 And actually this one is more of a thinking challenge 4 00:00:15.000 --> 00:00:16.453 than a coding challenge. 5 00:00:17.400 --> 00:00:21.760 So what I want you to do is to take this IIFE here 6 00:00:21.760 --> 00:00:23.630 and at the end of the function, 7 00:00:23.630 --> 00:00:25.930 simply attach an event listener 8 00:00:25.930 --> 00:00:30.810 that changes the color of the selected h1 element. 9 00:00:30.810 --> 00:00:35.050 So this header here to blue, all right. 10 00:00:35.050 --> 00:00:36.810 And that should happen each time 11 00:00:36.810 --> 00:00:39.690 that the body element is clicked. 12 00:00:39.690 --> 00:00:42.390 So whenever we click here. 13 00:00:42.390 --> 00:00:44.000 And what's important here is 14 00:00:44.000 --> 00:00:47.660 that you do not select the h1 element again. 15 00:00:47.660 --> 00:00:50.023 So just use this header that you have here. 16 00:00:51.000 --> 00:00:52.250 All right. 17 00:00:52.250 --> 00:00:54.460 So that's all the code you have to write 18 00:00:54.460 --> 00:00:56.190 which is really simple. 19 00:00:56.190 --> 00:00:58.760 But the real challenge here is that I want you to 20 00:00:58.760 --> 00:01:00.730 explain to yourself, 21 00:01:00.730 --> 00:01:04.860 or even to someone around you why this works. 22 00:01:04.860 --> 00:01:09.160 So as you click the body, the text will change to blue. 23 00:01:09.160 --> 00:01:10.800 And so it's gonna work 24 00:01:10.800 --> 00:01:12.280 but you have to understand 25 00:01:12.280 --> 00:01:15.460 and you have to explain why it worked. 26 00:01:15.460 --> 00:01:17.320 And so this is a good exercise, 27 00:01:17.320 --> 00:01:19.870 because being able to explain something 28 00:01:19.870 --> 00:01:24.680 to someone else means that you have understood it yourself. 29 00:01:24.680 --> 00:01:27.040 So I really hope that you do this one 30 00:01:27.040 --> 00:01:30.370 even though it doesn't involve a lot of coding. 31 00:01:30.370 --> 00:01:33.050 But it's still really important to do this. 32 00:01:33.050 --> 00:01:36.640 So take all the time that you need and think about 33 00:01:36.640 --> 00:01:40.270 when exactly the callback function is executed. 34 00:01:40.270 --> 00:01:43.360 And of course, what that means for the variables 35 00:01:43.360 --> 00:01:45.433 that are involved in this example. 36 00:01:46.930 --> 00:01:49.000 So again take the time that you need 37 00:01:49.000 --> 00:01:50.930 and I see you here in a minute 38 00:01:50.930 --> 00:01:53.313 line:15% with my own explanation basically. 39 00:01:56.350 --> 00:02:01.163 line:15% So the code that you had to write was simply this. 40 00:02:03.310 --> 00:02:07.090 So selecting the body element 41 00:02:07.090 --> 00:02:11.093 and then add event listener on click, 42 00:02:13.480 --> 00:02:15.913 and then this callback function. 43 00:02:16.980 --> 00:02:19.810 And then I'm simply changing the style here 44 00:02:21.950 --> 00:02:22.943 to blue. 45 00:02:25.160 --> 00:02:29.970 Then keep in mind that we did not select the h1 here again. 46 00:02:29.970 --> 00:02:31.850 I simply used the header variable 47 00:02:31.850 --> 00:02:34.390 that we had already selected before. 48 00:02:34.390 --> 00:02:36.010 So let's give it a safe. 49 00:02:36.010 --> 00:02:37.563 And I will click now the body. 50 00:02:38.600 --> 00:02:43.580 And indeed, it became blue, and that worked just fine. 51 00:02:43.580 --> 00:02:46.290 So why did this work? 52 00:02:46.290 --> 00:02:50.800 Or in other words, how does this callback function here, 53 00:02:50.800 --> 00:02:53.810 get access to the header variable? 54 00:02:53.810 --> 00:02:58.240 And one more time, the explanation is the closure. 55 00:02:58.240 --> 00:03:01.550 So I hoped that you really explained basically 56 00:03:01.550 --> 00:03:05.850 how the closure works to yourself or to someone else. 57 00:03:05.850 --> 00:03:10.170 And so in this particular example, the closure is necessary 58 00:03:10.170 --> 00:03:12.120 or it's useful 59 00:03:12.120 --> 00:03:17.120 because by the time this callback here is executed, 60 00:03:17.210 --> 00:03:18.500 this IIFE, 61 00:03:18.500 --> 00:03:22.220 so this immediately invoked function expression is 62 00:03:22.220 --> 00:03:23.460 now long gone. 63 00:03:23.460 --> 00:03:25.810 So it has already been executed. 64 00:03:25.810 --> 00:03:30.810 And with it, this variable here is basically gone as well. 65 00:03:30.990 --> 00:03:31.860 Right? 66 00:03:31.860 --> 00:03:33.480 So all of that is gone. 67 00:03:33.480 --> 00:03:36.610 But still, this function here is attached 68 00:03:36.610 --> 00:03:38.380 to the body element. 69 00:03:38.380 --> 00:03:41.810 And so it's waiting for some events to happen there. 70 00:03:41.810 --> 00:03:43.960 And when the event happens, well, 71 00:03:43.960 --> 00:03:47.430 then this function here is of course, executed. 72 00:03:47.430 --> 00:03:50.480 And again, even though the environment 73 00:03:50.480 --> 00:03:54.110 in which this function here was created is already gone, 74 00:03:54.110 --> 00:03:56.430 it is still able to access the variables 75 00:03:56.430 --> 00:03:59.050 that were created in that variable 76 00:03:59.050 --> 00:04:03.270 by the time the function was born, so to say. 77 00:04:03.270 --> 00:04:08.270 So this is the birthplace of or event handler function here. 78 00:04:08.550 --> 00:04:10.310 And therefore the function 79 00:04:10.310 --> 00:04:15.310 remembers all the variables present at a time of its birth. 80 00:04:15.550 --> 00:04:16.383 We can also say 81 00:04:16.383 --> 00:04:20.570 that the header is in the backpack of this function. 82 00:04:20.570 --> 00:04:23.060 So that explanation works as well. 83 00:04:23.060 --> 00:04:26.530 And you can go even further and deep into theory 84 00:04:26.530 --> 00:04:28.750 and basically try to explain 85 00:04:28.750 --> 00:04:31.690 how all of this works behind the scenes. 86 00:04:31.690 --> 00:04:33.580 But that I already explained to you 87 00:04:33.580 --> 00:04:36.420 in the more theory lecture, 88 00:04:36.420 --> 00:04:39.313 and so I'm not gonna go into that again. 89 00:04:40.430 --> 00:04:41.850 All right. 90 00:04:41.850 --> 00:04:46.740 So hopefully, you managed to explain this to yourself, 91 00:04:46.740 --> 00:04:48.900 maybe to your dog, whatever. 92 00:04:48.900 --> 00:04:51.750 But what's important is that you now understand 93 00:04:51.750 --> 00:04:53.160 how the closure works 94 00:04:53.160 --> 00:04:55.370 and how and when it appears. 95 00:04:55.370 --> 00:04:57.890 So this was yet another great example 96 00:04:57.890 --> 00:04:59.910 of a closure appearing. 97 00:04:59.910 --> 00:05:01.840 Anyway with this we've finished 98 00:05:01.840 --> 00:05:04.940 this pretty important section on functions. 99 00:05:04.940 --> 00:05:06.160 And so in the next one, 100 00:05:06.160 --> 00:05:09.780 we will finally build another visual project 101 00:05:09.780 --> 00:05:12.100 with a graphical user interface 102 00:05:12.100 --> 00:05:14.360 which is really exciting. 103 00:05:14.360 --> 00:05:16.690 So that section is all about arrays, 104 00:05:16.690 --> 00:05:20.300 and we're gonna build together an awesome application there. 105 00:05:20.300 --> 00:05:22.953 So I hope to see you there as soon as possible.