Original subtitles

1 1

To make sure 100% that you understand closures now, 2

2

lets work on this coding challenge number 2. 3

3

And actually this one is more of a thinking challenge 4

4

than a coding challenge. 5

5

So what I want you to do is to take this IIFE here 6

6

and at the end of the function, 7

7

simply attach an event listener 8

8

that changes the color of the selected h1 element. 9

9

So this header here to blue, all right. 10

10

And that should happen each time 11

11

that the body element is clicked. 12

12

So whenever we click here. 13

13

And what's important here is 14

14

that you do not select the h1 element again. 15

15

So just use this header that you have here. 16

16

All right. 17

17

So that's all the code you have to write 18

18

which is really simple. 19

19

But the real challenge here is that I want you to 20

20

explain to yourself, 21

21

or even to someone around you why this works. 22

22

So as you click the body, the text will change to blue. 23

23

And so it's gonna work 24

24

but you have to understand 25

25

and you have to explain why it worked. 26

26

And so this is a good exercise, 27

27

because being able to explain something 28

28

to someone else means that you have understood it yourself. 29

29

So I really hope that you do this one 30

30

even though it doesn't involve a lot of coding. 31

31

But it's still really important to do this. 32

32

So take all the time that you need and think about 33

33

when exactly the callback function is executed. 34

34

And of course, what that means for the variables 35

35

that are involved in this example. 36

36

So again take the time that you need 37

37

and I see you here in a minute 38

38

with my own explanation basically. 39

39

So the code that you had to write was simply this. 40

40

So selecting the body element 41

41

and then add event listener on click, 42

42

and then this callback function. 43

43

And then I'm simply changing the style here 44

44

to blue. 45

45

Then keep in mind that we did not select the h1 here again. 46

46

I simply used the header variable 47

47

that we had already selected before. 48

48

So let's give it a safe. 49

49

And I will click now the body. 50

50

And indeed, it became blue, and that worked just fine. 51

51

So why did this work? 52

52

Or in other words, how does this callback function here, 53

53

get access to the header variable? 54

54

And one more time, the explanation is the closure. 55

55

So I hoped that you really explained basically 56

56

how the closure works to yourself or to someone else. 57

57

And so in this particular example, the closure is necessary 58

58

or it's useful 59

59

because by the time this callback here is executed, 60

60

this IIFE, 61

61

so this immediately invoked function expression is 62

62

now long gone. 63

63

So it has already been executed. 64

64

And with it, this variable here is basically gone as well. 65

65

Right? 66

66

So all of that is gone. 67

67

But still, this function here is attached 68

68

to the body element. 69

69

And so it's waiting for some events to happen there. 70

70

And when the event happens, well, 71

71

then this function here is of course, executed. 72

72

And again, even though the environment 73

73

in which this function here was created is already gone, 74

74

it is still able to access the variables 75

75

that were created in that variable 76

76

by the time the function was born, so to say. 77

77

So this is the birthplace of or event handler function here. 78

78

And therefore the function 79

79

remembers all the variables present at a time of its birth. 80

80

We can also say 81

81

that the header is in the backpack of this function. 82

82

So that explanation works as well. 83

83

And you can go even further and deep into theory 84

84

and basically try to explain 85

85

how all of this works behind the scenes. 86

86

But that I already explained to you 87

87

in the more theory lecture, 88

88

and so I'm not gonna go into that again. 89

89

All right. 90

90

So hopefully, you managed to explain this to yourself, 91

91

maybe to your dog, whatever. 92

92

But what's important is that you now understand 93

93

how the closure works 94

94

and how and when it appears. 95

95

So this was yet another great example 96

96

of a closure appearing. 97

97

Anyway with this we've finished 98

98

this pretty important section on functions. 99

99

And so in the next one, 100

100

we will finally build another visual project 101

101

with a graphical user interface 102

102

which is really exciting. 103

103

So that section is all about arrays, 104

104

and we're gonna build together an awesome application there. 105

105

So I hope to see you there as soon as possible.