Original subtitles

1 1

Let's now see the rules 2

2

of how the disc keywords is defined in action. 3

3

And let's start by taking a look 4

4

at the disc keywords outside of any function whatsoever. 5

5

So just outside here in the global scope. 6

6

And so we get that the disc keyword 7

7

in the global scope is simply the window object. 8

8

So that's the global object that we just saw before. 9

9

Remember, and now let's do the same 10

10

but inside of just a regular function call 11

11

so we're going to use or old friend called H here. 12

12

So let's look to the console, just the usual result 13

13

so that we're actually doing something here. 14

14

But then what we're really interested 15

15

in is taking a look at this, this keyword. 16

16

So let's now call this function. 17

17

And so 18

18

let's see. 19

19

And now the result of taking a look so 20

20

at the logging, the disc keyword is undefined. 21

21

Okay. 22

22

And so what that means is that 23

23

insight is just regular function. 24

24

Call here. 25

25

The disc keyword will be undefined 26

26

and that's because we are in strict mode. 27

27

Remember 28

28

that in sloppy mode, it would be also the global object. 29

29

So in this case, the window object 30

30

but you already know that you always should use strict mode. 31

31

And so then in a regular function call 32

32

like this D this keyboard will simply point 33

33

to undefined and with a regular function call 34

34

I simply mean a call of disfunction 35

35

without the function being attached to any object. 36

36

So without having an owner 37

37

so to say, but now let's see what happens. 38

38

If this function here was an arrow function. 39

39

So let's just copy this. 40

40

So cog H 41

41

both here and here 42

42

arrow, 43

43

and let's call this one with a different value. 44

44

And now think about the rules that we learned 45

45

in the last video. 46

46

So what do you think the disc keyword will be 47

47

if dysfunction is an arrow function 48

48

and actually we still need to do that. 49

49

So birth year. 50

50

And so now it is a legit arrow function. 51

51

And so once more, what do you think 52

52

that these keywords will now be 53

53

think hard about it? 54

54

And then let's check 55

55

and so 56

56

it is window. 57

57

So that's a little bit weird maybe 58

58

right? 59

59

So why is that? 60

60

Why is the disk keyword undefined 61

61

in this function, but window in this 62

62

function? Well, it is because the 63

63

arrow function does not get its own disc keyword. 64

64

So instead the arrow function simply uses the lexical 65

65

this keyword, which means that it uses the disc keyword 66

66

of its parent function or of its parents scope. 67

67

So to say 68

68

and in this case, what is the lexical, this keyword? 69

69

So what is the disc keywords in the parent's scope 70

70

of this function? 71

71

Well, it is window because window is the disc keywords here 72

72

in the global scope. 73

73

So right here. 74

74

Okay. That's why I started by showing you this one here. 75

75

So in this case, this, this keyword here will simply point 76

76

to the disc keyword in the global scope. 77

77

And so therefore it will point 78

78

to window and like here in this normal function 79

79

which does actually get it's own disc keywords 80

80

it's simply as undefined here 81

81

but it is its own this keyword while this one here 82

82

in the arrow function is actually not the disc keywords 83

83

of this function here. 84

84

Okay. It is simply the disc keyword of the parent's scope. 85

85

And that happens to be the window object. 86

86

In this case, 87

87

in the next video 88

88

we will see some more real world implications of the fact 89

89

that the arrow function does not get its own disc keyword. 90

90

Now, next up 91

91

let's try to use the disc keyword inside of a method. 92

92

So let's quickly create a Jonas object here just 93

93

with a birth year, 94

94

1991, 95

95

and then again, or caulk H method. 96

96

And so remember 97

97

that this is basically now a function expression 98

98

that we need to write here. 99

99

Now let's lock the disc keyword here 100

100

and then 101

101

let's call actually the caulk H function 102

102

for now, just to see what the, this keyword will look like. 103

103

And my hope is 104

104

that you can guess already what it should look like. 105

105

So let's save it to see the result. 106

106

And indeed it is T Jonah's object. 107

107

So exactly this object with caulk age and year. 108

108

And so it means that's exactly this object. 109

109

And that's exactly the rule that I told you 110

110

in the previous lecture. 111

111

So when we have a method call, the disc keyword insight 112

112

of the method will be the object that is calling the method. 113

113

And in this case, that's the Jonas object. 114

114

So Jonas here is basically the owner of the method. 115

115

That's another way 116

116

of saying it and therefore, insight of cog H this is Jonas. 117

117

And then we can use that 118

118

to our advantage, to calculate the age here 119

119

based on the data that is already in this object. 120

120

And so that's one 121

121

of the big use cases for the disc keyword, right? 122

122

Because then we don't have to pass in this data here again. 123

123

So instead of having to do this again 124

124

we can simply use the birth year that is already 125

125

in the object itself. 126

126

And so we can use the disc award to reference that object. 127

127

And so this should now give us, or a usual value here of 46. 128

128

Great. So that's pretty important stuff. 129

129

And now let's move 130

130

on just to one final example here in this lecture. 131

131

So I keep saying that the disc keyword will point 132

132

to the object that is calling the method, right? 133

133

And that means that the disc keyword will not simply point 134

134

at the object in which we wrote the method. 135

135

So here we wrote the caulk H method inside 136

136

of the Jonas object. 137

137

And so we might think 138

138

that debt is the reason why the disc keyword points 139

139

to Jonas, but that is not true. 140

140

The reason that the disc keyword will point 141

141

to Jonas in this case is 142

142

because Jonah's was the object calling debt method 143

143

and that's a subtle, but very important difference. 144

144

And let me know, show you why that is. 145

145

So let's create a new object 146

146

which I'm going to call a Matilda 147

147

and let's create a first name. 148

148

We're actually, we don't need a name. 149

149

Let's just say, year 150

150

2017. 151

151

And that's it. 152

152

That's all we need in this object. 153

153

Now, remember that a function is just a value 154

154

right? 155

155

And therefore we can do this. 156

156

We can say Matilda thought caulk eight should be equal 157

157

to Jonas that caulk H 158

158

so basically here 159

159

we simply copy the caulk H method from Jonah's to Matilda. 160

160

But now when we take a look at Matilda here 161

161

then we see that the caulk H function is also in here. 162

162

Alright. 163

163

And of course it's still also 164

164

in Jonah's, but now we copied it from one object 165

165

to the other, 166

166

and this is called to method borrowing. 167

167

So we basically borrowed here the method 168

168

from one object to the other. 169

169

And so we don't have to write it in a duplicate way. 170

170

So now let's say Matilda dot caulk H 171

171

and what do you think 172

172

the disc keyword will look like now? 173

173

And let's get rid of some 174

174

of these 175

175

before, 176

176

so that they don't clutter 177

177

or output here. 178

178

And you can of course take them back 179

179

if you want to see them in your own coat. 180

180

But now let me save this 181

181

and see what the result of this cog age will be. 182

182

So 183

183

the age of Matilda gave us the correct result 184

184

of 20, which is exactly 185

185

37 minus 27. 186

186

And so this means that in this method 187

187

call here to this keyword does no actually point to Matilda. 188

188

And we can also see that here. 189

189

So here, as we locked to this keyword 190

190

we see that it's actually the Matilda object 191

191

because of this birth here. 192

192

And so this proves exactly what I 193

193

was just telling you before 194

194

which is the fact that the disc keyword always points 195

195

to the object that is calling the method. 196

196

And so here we are calling the method on Matilda 197

197

right? And so therefore the disc keyword will point 198

198

to Matilda, which was the object, which called the method. 199

199

So even though the method is written here inside 200

200

of the Jonas object 201

201

the disc keyword will still point to Matilda. 202

202

If it is Matilda, who calls the method. 203

203

Okay. And so that's really important to understand. 204

204

And it's the reason why I said 205

205

in the last video that the disc keyword is really dynamic. 206

206

It's not static 207

207

and it depends on how the function is called. 208

208

And we can take this even further 209

209

by basically completely taking the function 210

210

out of the Jonas object. 211

211

So let's create just a variable called F for function 212

212

and then say, Jonas dot caulk H and not call it, of course. 213

213

So we just want to copy now the function 214

214

into a new variable. 215

215

And so once more debt 216

216

as possible, because a function is just a value. 217

217

So we take this value here and copy it here. 218

218

And of course, without calling it 219

219

okay, just like here, where we copied the method 220

220

from one place to the other, but we did not call it. 221

221

So here we can take a look at F in the console. 222

222

And so you will see that it's actually this function 223

223

but now what implications is this going to have 224

224

for today's keyword? 225

225

Well, let's just try to call the F function 226

226

which remember is the code of Jonas dot cog H 227

227

and so now the disc keyword should be undefined. 228

228

And therefore we also get this error 229

229

that it cannot read year of undefined. 230

230

So that's coming from here because 231

231

the disc keyword is now undefined. 232

232

And so undefined the year does, of course not exist. 233

233

So this happens because this F 234

234

function here is now just a regular function call 235

235

right? It is not attached to any object. 236

236

There is no owner of this F function 237

237

anymore here at this point. 238

238

And therefore it is just a regular 239

239

function call just like here, for example. 240

240

And so therefore the disc award is then also undefined 241

241

just like again, here in this function 242

242

which was also a regular function call 243

243

just like our F function is now. 244

244

All right. 245

245

So again, that's a subtle difference 246

246

in our code, but it makes all the difference 247

247

in the result that we then get. 248

248

And for sure 249

249

the disc keyword is a subject that confuses many beginners 250

250

in JavaScript, but hopefully this lecture 251

251

and the previous one made it a little bit more clear. 252

252

Now we didn't talk about the event handler functions here 253

253

that I also showed you in the last video. 254

254

So on a slide there, but I'm leaving that 255

255

for the advanced Dom section where we will come back 256

256

to this, but for now in the next video 257

257

we need to take an even more closer look 258

258

at regular function versus arrow functions.