WEBVTT 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.