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 with my own explanation basically. 39 00:01:56,350 --> 00:02:01,163 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.