Original subtitles

1 1

The this keyword, 2

2

is an extremely important concept to understand 3

3

in JavaScript. 4

4

And many beginners, find it especially difficult. 5

5

But don't worry, 6

6

It's actually not that hard if you know exactly 7

7

how the this Keyword works. 8

8

So, the this keyword or this variable 9

9

is basically a special variable that 10

10

is created for every execution context 11

11

and therefore any function. 12

12

In fact, we learned before that it's one 13

13

of the three components 14

14

of any execution context, 15

15

along with the variable environment and scope chain 16

16

that we already learned 17

17

about before. 18

18

Now, in general terms, the this keyword, 19

19

will always take the value of the owner 20

20

of the function in which, the this keyword is used. 21

21

We also say, that it points to the owner of that function. 22

22

And that sounds very abstract 23

23

but we will see what that means in a second. 24

24

For now, what's very important to understand 25

25

is that the value of the this keyword 26

26

is not static. 27

27

So it's not always the same. 28

28

It depends on how the function 29

29

is actually called. 30

30

And its value is only assigned when the function 31

31

is actually called. 32

32

So it's very different 33

33

from a normal value, 34

34

In this regard. 35

35

if we set, for example, 36

36

X to five, 37

37

then X will always just be five. 38

38

But the this keyword again, 39

39

depends on the way in which a function is called. 40

40

But what does that actually mean? 41

41

Well, let's analyze four different ways 42

42

in which functions can be called. 43

43

And the first way to call a function is 44

44

as a method. 45

45

So as a function attached to an object. 46

46

So when we call a method, the this keyword inside 47

47

that method will simply point to the object 48

48

on which the method is called, 49

49

or in other words, 50

50

it points to the object that 51

51

is calling the method. 52

52

Okay? 53

53

And so let's illustrate this 54

54

with a simple example. 55

55

So the method here 56

56

is the calcAge method, again, 57

57

because it's a function attached to the Jonas object. 58

58

in the last line here, 59

59

we then call the method 60

60

and as you see 61

61

inside the method, 62

62

we used the this keyword. 63

63

Now, according to what we just learned, 64

64

what should be the value 65

65

of the this keyword here? 66

66

And that's right, 67

67

it should be Jonas, because that is the object that 68

68

is calling the method down there 69

69

in the last line. 70

70

Isn't it? 71

71

And so then, on Jonas, we can of course access 72

72

all the properties that it has. 73

73

And so, this.year will become 1989, 74

74

because that's Jonas.year as well. 75

75

So in this case, 76

76

writing 'Jonas.year' 77

77

would have the exact same effect 78

78

as 'this.year'. 79

79

But doing it this way 80

80

is a way better solution, 81

81

for many reasons that we will get into 82

82

throughout the course. 83

83

And we will play around 84

84

with this example a bit more 85

85

in the next video. 86

86

But anyway, another way we call functions 87

87

is by simply calling them 88

88

as normal functions. 89

89

So not as a method and so not attached to any object. 90

90

In this case, 91

91

the this keyword, 92

92

will simply be undefined. 93

93

However, that is only valid for strict mode. 94

94

So if you're not in strict mode, 95

95

this will actually point 96

96

to the global object, 97

97

which in case of the browser 98

98

is the window object. 99

99

And that can be very problematic 100

100

and so, 101

101

this is yet another very good reason 102

102

to always use strict mode. 103

103

Next, we have arrow functions 104

104

and while arrow functions 105

105

are not exactly a way 106

106

of calling functions. 107

107

It's an important kind of function 108

108

that we need to consider, 109

109

because, remember, arrow functions do not get their own 110

110

'this keyword'. 111

111

Instead, if you use 'the this variable' 112

112

in an arrow function, 113

113

it will simply be the this keyword 114

114

of the surrounding function. 115

115

So of the parent function 116

116

and in technical terms, 117

117

this is called the 'lexical this keyword,' 118

118

because it simply gets picked up 119

119

from the outer lexical scope 120

120

of the arrow function. 121

121

So never ever forget this very important property 122

122

of arrow functions. 123

123

Believe me that actually I run into 124

124

one or two bugs 125

125

because of this behavior. 126

126

Okay? 127

127

So it's really important not to forget 128

128

that arrow functions do not get their own 129

129

'this keyword.' 130

130

Okay. 131

131

And finally, if a function is called 132

132

as an event listener, 133

133

then the this keyword will always point 134

134

to the DOM element 135

135

that the handler function is attached to. 136

136

Very straightforward right? 137

137

Now, the this keyword 138

138

is usually a big source 139

139

of confusion for beginners. 140

140

But if you know these rules, 141

141

then it shall become a lot simpler 142

142

and to make it even simpler. 143

143

It's also important to know 144

144

what the, this keyword is not. 145

145

So this will never point to the function 146

146

in which we are using it. 147

147

Also, the this keyword will never point 148

148

to the variable environment 149

149

of the function. 150

150

And these are two pretty common misconceptions 151

151

and so that's why I'm addressing them here. 152

152

Okay? 153

153

So again, the rules that I showed you here 154

154

is all that you need to know. 155

155

All right. 156

156

And now just for the sake of completion, 157

157

there are actually other ways 158

158

in which we can call a function, 159

159

for example, 160

160

using the new keyword or the call apply 161

161

and bind methods, 162

162

but we don't know yet what any of these are. 163

163

And so I will talk about how the this keyword 164

164

works with them, 165

165

when the time comes. 166

166

Anyway, that's it for this lecture. 167

167

So let's now use this in practice 168

168

to make it crystal clear.