1 00:00:01,160 --> 00:00:03,040 Let's now see the rules 2 00:00:03,040 --> 00:00:06,883 of how the disc keywords is defined in action. 3 00:00:08,770 --> 00:00:10,760 And let's start by taking a look 4 00:00:10,760 --> 00:00:15,263 at the disc keywords outside of any function whatsoever. 5 00:00:16,150 --> 00:00:18,873 So just outside here in the global scope. 6 00:00:19,970 --> 00:00:22,900 And so we get that the disc keyword 7 00:00:22,900 --> 00:00:26,820 in the global scope is simply the window object. 8 00:00:26,820 --> 00:00:30,420 So that's the global object that we just saw before. 9 00:00:30,420 --> 00:00:34,120 Remember, and now let's do the same 10 00:00:34,120 --> 00:00:37,290 but inside of just a regular function call 11 00:00:39,420 --> 00:00:43,203 so we're going to use or old friend called H here. 12 00:00:49,380 --> 00:00:54,300 So let's look to the console, just the usual result 13 00:00:56,200 --> 00:00:58,540 so that we're actually doing something here. 14 00:00:58,540 --> 00:01:00,799 But then what we're really interested 15 00:01:00,799 --> 00:01:03,403 in is taking a look at this, this keyword. 16 00:01:04,495 --> 00:01:07,033 So let's now call this function. 17 00:01:08,806 --> 00:01:10,300 And so 18 00:01:10,300 --> 00:01:11,133 let's see. 19 00:01:11,980 --> 00:01:15,450 And now the result of taking a look so 20 00:01:15,450 --> 00:01:19,670 at the logging, the disc keyword is undefined. 21 00:01:19,670 --> 00:01:20,750 Okay. 22 00:01:20,750 --> 00:01:22,227 And so what that means is that 23 00:01:22,227 --> 00:01:25,370 insight is just regular function. 24 00:01:25,370 --> 00:01:26,580 Call here. 25 00:01:26,580 --> 00:01:30,000 The disc keyword will be undefined 26 00:01:30,000 --> 00:01:32,490 and that's because we are in strict mode. 27 00:01:32,490 --> 00:01:33,323 Remember 28 00:01:33,323 --> 00:01:37,260 that in sloppy mode, it would be also the global object. 29 00:01:37,260 --> 00:01:39,170 So in this case, the window object 30 00:01:39,170 --> 00:01:43,040 but you already know that you always should use strict mode. 31 00:01:43,040 --> 00:01:45,520 And so then in a regular function call 32 00:01:45,520 --> 00:01:49,060 like this D this keyboard will simply point 33 00:01:49,060 --> 00:01:53,520 to undefined and with a regular function call 34 00:01:53,520 --> 00:01:56,500 I simply mean a call of disfunction 35 00:01:56,500 --> 00:02:00,280 without the function being attached to any object. 36 00:02:00,280 --> 00:02:02,460 So without having an owner 37 00:02:02,460 --> 00:02:06,310 so to say, but now let's see what happens. 38 00:02:06,310 --> 00:02:09,433 If this function here was an arrow function. 39 00:02:10,290 --> 00:02:11,743 So let's just copy this. 40 00:02:15,030 --> 00:02:16,932 So cog H 41 00:02:16,932 --> 00:02:18,720 both here and here 42 00:02:20,960 --> 00:02:21,793 arrow, 43 00:02:22,820 --> 00:02:25,170 and let's call this one with a different value. 44 00:02:26,810 --> 00:02:29,650 And now think about the rules that we learned 45 00:02:29,650 --> 00:02:31,320 in the last video. 46 00:02:31,320 --> 00:02:33,930 So what do you think the disc keyword will be 47 00:02:33,930 --> 00:02:36,470 if dysfunction is an arrow function 48 00:02:36,470 --> 00:02:40,150 and actually we still need to do that. 49 00:02:40,150 --> 00:02:41,343 So birth year. 50 00:02:42,940 --> 00:02:46,150 And so now it is a legit arrow function. 51 00:02:46,150 --> 00:02:48,340 And so once more, what do you think 52 00:02:48,340 --> 00:02:51,010 that these keywords will now be 53 00:02:51,010 --> 00:02:52,300 think hard about it? 54 00:02:52,300 --> 00:02:54,750 And then let's check 55 00:02:54,750 --> 00:02:55,730 and so 56 00:02:55,730 --> 00:02:57,960 it is window. 57 00:02:57,960 --> 00:03:00,860 So that's a little bit weird maybe 58 00:03:00,860 --> 00:03:01,970 right? 59 00:03:01,970 --> 00:03:03,290 So why is that? 60 00:03:03,290 --> 00:03:05,550 Why is the disk keyword undefined 61 00:03:05,550 --> 00:03:08,440 in this function, but window in this 62 00:03:08,440 --> 00:03:11,280 function? Well, it is because the 63 00:03:11,280 --> 00:03:15,380 arrow function does not get its own disc keyword. 64 00:03:15,380 --> 00:03:19,650 So instead the arrow function simply uses the lexical 65 00:03:19,650 --> 00:03:23,490 this keyword, which means that it uses the disc keyword 66 00:03:23,490 --> 00:03:27,030 of its parent function or of its parents scope. 67 00:03:27,030 --> 00:03:28,580 So to say 68 00:03:28,580 --> 00:03:32,020 and in this case, what is the lexical, this keyword? 69 00:03:32,020 --> 00:03:35,480 So what is the disc keywords in the parent's scope 70 00:03:35,480 --> 00:03:36,890 of this function? 71 00:03:36,890 --> 00:03:40,462 Well, it is window because window is the disc keywords here 72 00:03:40,462 --> 00:03:42,330 in the global scope. 73 00:03:42,330 --> 00:03:43,883 So right here. 74 00:03:44,760 --> 00:03:48,390 Okay. That's why I started by showing you this one here. 75 00:03:48,390 --> 00:03:52,720 So in this case, this, this keyword here will simply point 76 00:03:52,720 --> 00:03:55,900 to the disc keyword in the global scope. 77 00:03:55,900 --> 00:03:57,620 And so therefore it will point 78 00:03:57,620 --> 00:04:00,833 to window and like here in this normal function 79 00:04:00,833 --> 00:04:04,710 which does actually get it's own disc keywords 80 00:04:04,710 --> 00:04:06,380 it's simply as undefined here 81 00:04:06,380 --> 00:04:10,070 but it is its own this keyword while this one here 82 00:04:10,070 --> 00:04:13,660 in the arrow function is actually not the disc keywords 83 00:04:13,660 --> 00:04:15,700 of this function here. 84 00:04:15,700 --> 00:04:19,310 Okay. It is simply the disc keyword of the parent's scope. 85 00:04:19,310 --> 00:04:21,770 And that happens to be the window object. 86 00:04:21,770 --> 00:04:23,310 In this case, 87 00:04:23,310 --> 00:04:24,240 in the next video 88 00:04:24,240 --> 00:04:28,100 we will see some more real world implications of the fact 89 00:04:28,100 --> 00:04:31,939 that the arrow function does not get its own disc keyword. 90 00:04:31,939 --> 00:04:33,400 Now, next up 91 00:04:33,400 --> 00:04:36,893 let's try to use the disc keyword inside of a method. 92 00:04:37,770 --> 00:04:41,727 So let's quickly create a Jonas object here just 93 00:04:42,836 --> 00:04:45,269 with a birth year, 94 00:04:45,269 --> 00:04:47,510 1991, 95 00:04:47,510 --> 00:04:50,180 and then again, or caulk H method. 96 00:04:50,180 --> 00:04:51,110 And so remember 97 00:04:51,110 --> 00:04:53,379 that this is basically now a function expression 98 00:04:53,379 --> 00:04:55,003 that we need to write here. 99 00:04:57,590 --> 00:05:00,000 Now let's lock the disc keyword here 100 00:05:01,000 --> 00:05:02,643 and then 101 00:05:02,643 --> 00:05:05,530 let's call actually the caulk H function 102 00:05:06,530 --> 00:05:10,860 for now, just to see what the, this keyword will look like. 103 00:05:10,860 --> 00:05:11,700 And my hope is 104 00:05:11,700 --> 00:05:15,670 that you can guess already what it should look like. 105 00:05:15,670 --> 00:05:18,860 So let's save it to see the result. 106 00:05:18,860 --> 00:05:22,910 And indeed it is T Jonah's object. 107 00:05:22,910 --> 00:05:26,950 So exactly this object with caulk age and year. 108 00:05:26,950 --> 00:05:30,100 And so it means that's exactly this object. 109 00:05:30,100 --> 00:05:32,550 And that's exactly the rule that I told you 110 00:05:32,550 --> 00:05:34,300 in the previous lecture. 111 00:05:34,300 --> 00:05:37,930 So when we have a method call, the disc keyword insight 112 00:05:37,930 --> 00:05:41,717 of the method will be the object that is calling the method. 113 00:05:41,717 --> 00:05:44,980 And in this case, that's the Jonas object. 114 00:05:44,980 --> 00:05:49,510 So Jonas here is basically the owner of the method. 115 00:05:49,510 --> 00:05:50,450 That's another way 116 00:05:50,450 --> 00:05:55,450 of saying it and therefore, insight of cog H this is Jonas. 117 00:05:58,220 --> 00:05:59,350 And then we can use that 118 00:05:59,350 --> 00:06:02,684 to our advantage, to calculate the age here 119 00:06:02,684 --> 00:06:07,270 based on the data that is already in this object. 120 00:06:07,270 --> 00:06:08,360 And so that's one 121 00:06:08,360 --> 00:06:11,867 of the big use cases for the disc keyword, right? 122 00:06:14,800 --> 00:06:18,210 Because then we don't have to pass in this data here again. 123 00:06:18,210 --> 00:06:20,510 So instead of having to do this again 124 00:06:20,510 --> 00:06:23,520 we can simply use the birth year that is already 125 00:06:23,520 --> 00:06:25,300 in the object itself. 126 00:06:25,300 --> 00:06:29,980 And so we can use the disc award to reference that object. 127 00:06:29,980 --> 00:06:34,813 And so this should now give us, or a usual value here of 46. 128 00:06:35,980 --> 00:06:39,360 Great. So that's pretty important stuff. 129 00:06:39,360 --> 00:06:40,193 And now let's move 130 00:06:40,193 --> 00:06:44,890 on just to one final example here in this lecture. 131 00:06:44,890 --> 00:06:48,630 So I keep saying that the disc keyword will point 132 00:06:48,630 --> 00:06:52,450 to the object that is calling the method, right? 133 00:06:52,450 --> 00:06:55,679 And that means that the disc keyword will not simply point 134 00:06:55,679 --> 00:06:59,730 at the object in which we wrote the method. 135 00:06:59,730 --> 00:07:03,270 So here we wrote the caulk H method inside 136 00:07:03,270 --> 00:07:05,650 of the Jonas object. 137 00:07:05,650 --> 00:07:07,200 And so we might think 138 00:07:07,200 --> 00:07:10,500 that debt is the reason why the disc keyword points 139 00:07:10,500 --> 00:07:13,360 to Jonas, but that is not true. 140 00:07:13,360 --> 00:07:15,900 The reason that the disc keyword will point 141 00:07:15,900 --> 00:07:18,020 to Jonas in this case is 142 00:07:18,020 --> 00:07:22,060 because Jonah's was the object calling debt method 143 00:07:22,060 --> 00:07:25,430 and that's a subtle, but very important difference. 144 00:07:25,430 --> 00:07:27,613 And let me know, show you why that is. 145 00:07:30,450 --> 00:07:32,760 So let's create a new object 146 00:07:32,760 --> 00:07:34,410 which I'm going to call a Matilda 147 00:07:36,540 --> 00:07:38,640 and let's create a first name. 148 00:07:38,640 --> 00:07:40,100 We're actually, we don't need a name. 149 00:07:40,100 --> 00:07:41,650 Let's just say, year 150 00:07:42,810 --> 00:07:44,560 2017. 151 00:07:44,560 --> 00:07:45,393 And that's it. 152 00:07:45,393 --> 00:07:48,180 That's all we need in this object. 153 00:07:48,180 --> 00:07:51,800 Now, remember that a function is just a value 154 00:07:51,800 --> 00:07:52,840 right? 155 00:07:52,840 --> 00:07:55,830 And therefore we can do this. 156 00:07:55,830 --> 00:08:00,830 We can say Matilda thought caulk eight should be equal 157 00:08:01,300 --> 00:08:03,820 to Jonas that caulk H 158 00:08:05,230 --> 00:08:06,155 so basically here 159 00:08:06,155 --> 00:08:11,155 we simply copy the caulk H method from Jonah's to Matilda. 160 00:08:11,560 --> 00:08:14,380 But now when we take a look at Matilda here 161 00:08:16,120 --> 00:08:19,423 then we see that the caulk H function is also in here. 162 00:08:21,440 --> 00:08:22,273 Alright. 163 00:08:23,220 --> 00:08:24,700 And of course it's still also 164 00:08:24,700 --> 00:08:28,420 in Jonah's, but now we copied it from one object 165 00:08:28,420 --> 00:08:29,920 to the other, 166 00:08:29,920 --> 00:08:32,170 and this is called to method borrowing. 167 00:08:32,170 --> 00:08:35,240 So we basically borrowed here the method 168 00:08:35,240 --> 00:08:37,530 from one object to the other. 169 00:08:37,530 --> 00:08:41,220 And so we don't have to write it in a duplicate way. 170 00:08:41,220 --> 00:08:46,200 So now let's say Matilda dot caulk H 171 00:08:46,200 --> 00:08:48,000 and what do you think 172 00:08:48,000 --> 00:08:51,200 the disc keyword will look like now? 173 00:08:51,200 --> 00:08:52,430 And let's get rid of some 174 00:08:52,430 --> 00:08:53,766 of these 175 00:08:53,766 --> 00:08:55,073 before, 176 00:08:55,940 --> 00:08:57,804 so that they don't clutter 177 00:08:57,804 --> 00:08:59,423 or output here. 178 00:09:01,440 --> 00:09:03,400 And you can of course take them back 179 00:09:03,400 --> 00:09:05,450 if you want to see them in your own coat. 180 00:09:06,550 --> 00:09:08,030 But now let me save this 181 00:09:08,030 --> 00:09:11,253 and see what the result of this cog age will be. 182 00:09:12,470 --> 00:09:13,390 So 183 00:09:13,390 --> 00:09:17,710 the age of Matilda gave us the correct result 184 00:09:17,710 --> 00:09:20,170 of 20, which is exactly 185 00:09:20,170 --> 00:09:23,070 37 minus 27. 186 00:09:23,070 --> 00:09:25,440 And so this means that in this method 187 00:09:25,440 --> 00:09:30,280 call here to this keyword does no actually point to Matilda. 188 00:09:30,280 --> 00:09:32,220 And we can also see that here. 189 00:09:32,220 --> 00:09:34,830 So here, as we locked to this keyword 190 00:09:34,830 --> 00:09:37,280 we see that it's actually the Matilda object 191 00:09:37,280 --> 00:09:39,041 because of this birth here. 192 00:09:39,041 --> 00:09:41,005 And so this proves exactly what I 193 00:09:41,005 --> 00:09:43,110 was just telling you before 194 00:09:43,110 --> 00:09:46,380 which is the fact that the disc keyword always points 195 00:09:46,380 --> 00:09:49,230 to the object that is calling the method. 196 00:09:49,230 --> 00:09:52,810 And so here we are calling the method on Matilda 197 00:09:52,810 --> 00:09:56,430 right? And so therefore the disc keyword will point 198 00:09:56,430 --> 00:10:00,870 to Matilda, which was the object, which called the method. 199 00:10:00,870 --> 00:10:04,780 So even though the method is written here inside 200 00:10:04,780 --> 00:10:06,740 of the Jonas object 201 00:10:06,740 --> 00:10:09,830 the disc keyword will still point to Matilda. 202 00:10:09,830 --> 00:10:12,812 If it is Matilda, who calls the method. 203 00:10:12,812 --> 00:10:16,610 Okay. And so that's really important to understand. 204 00:10:16,610 --> 00:10:18,090 And it's the reason why I said 205 00:10:18,090 --> 00:10:22,320 in the last video that the disc keyword is really dynamic. 206 00:10:22,320 --> 00:10:23,700 It's not static 207 00:10:23,700 --> 00:10:27,130 and it depends on how the function is called. 208 00:10:27,130 --> 00:10:29,460 And we can take this even further 209 00:10:29,460 --> 00:10:32,760 by basically completely taking the function 210 00:10:32,760 --> 00:10:35,032 out of the Jonas object. 211 00:10:35,032 --> 00:10:40,000 So let's create just a variable called F for function 212 00:10:40,000 --> 00:10:45,000 and then say, Jonas dot caulk H and not call it, of course. 213 00:10:46,060 --> 00:10:49,340 So we just want to copy now the function 214 00:10:49,340 --> 00:10:51,820 into a new variable. 215 00:10:51,820 --> 00:10:52,780 And so once more debt 216 00:10:52,780 --> 00:10:56,370 as possible, because a function is just a value. 217 00:10:56,370 --> 00:10:59,800 So we take this value here and copy it here. 218 00:10:59,800 --> 00:11:01,910 And of course, without calling it 219 00:11:01,910 --> 00:11:05,390 okay, just like here, where we copied the method 220 00:11:05,390 --> 00:11:08,593 from one place to the other, but we did not call it. 221 00:11:10,470 --> 00:11:14,670 So here we can take a look at F in the console. 222 00:11:14,670 --> 00:11:17,680 And so you will see that it's actually this function 223 00:11:19,290 --> 00:11:22,070 but now what implications is this going to have 224 00:11:22,070 --> 00:11:24,000 for today's keyword? 225 00:11:24,000 --> 00:11:28,510 Well, let's just try to call the F function 226 00:11:28,510 --> 00:11:32,280 which remember is the code of Jonas dot cog H 227 00:11:32,280 --> 00:11:37,280 and so now the disc keyword should be undefined. 228 00:11:37,760 --> 00:11:40,020 And therefore we also get this error 229 00:11:40,020 --> 00:11:43,200 that it cannot read year of undefined. 230 00:11:43,200 --> 00:11:46,080 So that's coming from here because 231 00:11:46,080 --> 00:11:47,790 the disc keyword is now undefined. 232 00:11:47,790 --> 00:11:52,790 And so undefined the year does, of course not exist. 233 00:11:52,880 --> 00:11:55,330 So this happens because this F 234 00:11:55,330 --> 00:11:58,860 function here is now just a regular function call 235 00:11:58,860 --> 00:12:02,020 right? It is not attached to any object. 236 00:12:02,020 --> 00:12:04,320 There is no owner of this F function 237 00:12:04,320 --> 00:12:06,640 anymore here at this point. 238 00:12:06,640 --> 00:12:08,560 And therefore it is just a regular 239 00:12:08,560 --> 00:12:12,810 function call just like here, for example. 240 00:12:12,810 --> 00:12:17,470 And so therefore the disc award is then also undefined 241 00:12:17,470 --> 00:12:21,610 just like again, here in this function 242 00:12:21,610 --> 00:12:23,960 which was also a regular function call 243 00:12:23,960 --> 00:12:25,883 just like our F function is now. 244 00:12:27,640 --> 00:12:28,473 All right. 245 00:12:28,473 --> 00:12:31,080 So again, that's a subtle difference 246 00:12:31,080 --> 00:12:33,860 in our code, but it makes all the difference 247 00:12:33,860 --> 00:12:36,410 in the result that we then get. 248 00:12:36,410 --> 00:12:37,508 And for sure 249 00:12:37,508 --> 00:12:41,990 the disc keyword is a subject that confuses many beginners 250 00:12:41,990 --> 00:12:45,190 in JavaScript, but hopefully this lecture 251 00:12:45,190 --> 00:12:48,515 and the previous one made it a little bit more clear. 252 00:12:48,515 --> 00:12:51,940 Now we didn't talk about the event handler functions here 253 00:12:51,940 --> 00:12:55,160 that I also showed you in the last video. 254 00:12:55,160 --> 00:12:58,070 So on a slide there, but I'm leaving that 255 00:12:58,070 --> 00:13:01,840 for the advanced Dom section where we will come back 256 00:13:01,840 --> 00:13:04,260 to this, but for now in the next video 257 00:13:04,260 --> 00:13:06,820 we need to take an even more closer look 258 00:13:06,820 --> 00:13:09,883 at regular function versus arrow functions.