WEBVTT 1 00:00:01.200 --> 00:00:02.330 The this keyword, 2 00:00:02.330 --> 00:00:05.340 is an extremely important concept to understand 3 00:00:05.340 --> 00:00:06.770 in JavaScript. 4 00:00:06.770 --> 00:00:10.490 And many beginners, find it especially difficult. 5 00:00:10.490 --> 00:00:11.530 But don't worry, 6 00:00:11.530 --> 00:00:14.730 It's actually not that hard if you know exactly 7 00:00:14.730 --> 00:00:16.733 how the this Keyword works. 8 00:00:18.720 --> 00:00:22.180 So, the this keyword or this variable 9 00:00:22.180 --> 00:00:24.710 is basically a special variable that 10 00:00:24.710 --> 00:00:28.160 is created for every execution context 11 00:00:28.160 --> 00:00:30.800 and therefore any function. 12 00:00:30.800 --> 00:00:33.540 In fact, we learned before that it's one 13 00:00:33.540 --> 00:00:35.110 of the three components 14 00:00:35.110 --> 00:00:37.450 of any execution context, 15 00:00:37.450 --> 00:00:41.080 along with the variable environment and scope chain 16 00:00:41.080 --> 00:00:42.200 that we already learned 17 00:00:42.200 --> 00:00:44.070 about before. 18 00:00:44.070 --> 00:00:46.780 Now, in general terms, the this keyword, 19 00:00:46.780 --> 00:00:49.420 will always take the value of the owner 20 00:00:49.420 --> 00:00:53.860 of the function in which, the this keyword is used. 21 00:00:53.860 --> 00:00:58.230 We also say, that it points to the owner of that function. 22 00:00:58.230 --> 00:01:00.590 And that sounds very abstract 23 00:01:00.590 --> 00:01:03.840 but we will see what that means in a second. 24 00:01:03.840 --> 00:01:07.040 For now, what's very important to understand 25 00:01:07.040 --> 00:01:09.810 is that the value of the this keyword 26 00:01:09.810 --> 00:01:11.690 is not static. 27 00:01:11.690 --> 00:01:14.120 So it's not always the same. 28 00:01:14.120 --> 00:01:16.060 It depends on how the function 29 00:01:16.060 --> 00:01:17.560 is actually called. 30 00:01:17.560 --> 00:01:20.581 And its value is only assigned when the function 31 00:01:20.581 --> 00:01:23.190 is actually called. 32 00:01:23.190 --> 00:01:24.540 So it's very different 33 00:01:24.540 --> 00:01:25.910 from a normal value, 34 00:01:25.910 --> 00:01:27.023 In this regard. 35 00:01:27.930 --> 00:01:29.560 if we set, for example, 36 00:01:29.560 --> 00:01:31.110 X to five, 37 00:01:31.110 --> 00:01:34.370 then X will always just be five. 38 00:01:34.370 --> 00:01:36.530 But the this keyword again, 39 00:01:36.530 --> 00:01:40.560 depends on the way in which a function is called. 40 00:01:40.560 --> 00:01:43.320 But what does that actually mean? 41 00:01:43.320 --> 00:01:46.380 Well, let's analyze four different ways 42 00:01:46.380 --> 00:01:48.540 in which functions can be called. 43 00:01:48.540 --> 00:01:51.840 And the first way to call a function is 44 00:01:51.840 --> 00:01:53.290 as a method. 45 00:01:53.290 --> 00:01:57.100 So as a function attached to an object. 46 00:01:57.100 --> 00:02:00.700 So when we call a method, the this keyword inside 47 00:02:00.700 --> 00:02:03.810 that method will simply point to the object 48 00:02:03.810 --> 00:02:06.610 on which the method is called, 49 00:02:06.610 --> 00:02:08.220 or in other words, 50 00:02:08.220 --> 00:02:10.210 it points to the object that 51 00:02:10.210 --> 00:02:12.180 is calling the method. 52 00:02:12.180 --> 00:02:13.290 Okay? 53 00:02:13.290 --> 00:02:14.750 And so let's illustrate this 54 00:02:14.750 --> 00:02:16.353 with a simple example. 55 00:02:17.230 --> 00:02:18.600 So the method here 56 00:02:18.600 --> 00:02:21.480 is the calcAge method, again, 57 00:02:21.480 --> 00:02:25.810 because it's a function attached to the Jonas object. 58 00:02:25.810 --> 00:02:27.300 in the last line here, 59 00:02:27.300 --> 00:02:29.030 we then call the method 60 00:02:29.030 --> 00:02:30.330 and as you see 61 00:02:30.330 --> 00:02:31.770 inside the method, 62 00:02:31.770 --> 00:02:34.260 we used the this keyword. 63 00:02:34.260 --> 00:02:36.820 Now, according to what we just learned, 64 00:02:36.820 --> 00:02:38.330 what should be the value 65 00:02:38.330 --> 00:02:40.610 of the this keyword here? 66 00:02:40.610 --> 00:02:41.850 And that's right, 67 00:02:41.850 --> 00:02:45.450 it should be Jonas, because that is the object that 68 00:02:45.450 --> 00:02:47.750 is calling the method down there 69 00:02:47.750 --> 00:02:49.030 in the last line. 70 00:02:49.030 --> 00:02:50.230 Isn't it? 71 00:02:50.230 --> 00:02:53.590 And so then, on Jonas, we can of course access 72 00:02:53.590 --> 00:02:55.810 all the properties that it has. 73 00:02:55.810 --> 00:03:00.360 And so, this.year will become 1989, 74 00:03:00.360 --> 00:03:04.620 because that's Jonas.year as well. 75 00:03:04.620 --> 00:03:05.980 So in this case, 76 00:03:05.980 --> 00:03:07.600 writing 'Jonas.year' 77 00:03:07.600 --> 00:03:09.820 would have the exact same effect 78 00:03:09.820 --> 00:03:11.750 as 'this.year'. 79 00:03:11.750 --> 00:03:13.350 But doing it this way 80 00:03:13.350 --> 00:03:15.560 is a way better solution, 81 00:03:15.560 --> 00:03:17.980 for many reasons that we will get into 82 00:03:17.980 --> 00:03:19.860 throughout the course. 83 00:03:19.860 --> 00:03:21.030 And we will play around 84 00:03:21.030 --> 00:03:22.860 with this example a bit more 85 00:03:22.860 --> 00:03:24.582 in the next video. 86 00:03:24.582 --> 00:03:28.130 But anyway, another way we call functions 87 00:03:28.130 --> 00:03:29.750 is by simply calling them 88 00:03:29.750 --> 00:03:31.470 as normal functions. 89 00:03:31.470 --> 00:03:36.470 So not as a method and so not attached to any object. 90 00:03:37.120 --> 00:03:38.040 In this case, 91 00:03:38.040 --> 00:03:39.050 the this keyword, 92 00:03:39.050 --> 00:03:41.560 will simply be undefined. 93 00:03:41.560 --> 00:03:45.430 However, that is only valid for strict mode. 94 00:03:45.430 --> 00:03:47.740 So if you're not in strict mode, 95 00:03:47.740 --> 00:03:49.290 this will actually point 96 00:03:49.290 --> 00:03:50.560 to the global object, 97 00:03:50.560 --> 00:03:52.700 which in case of the browser 98 00:03:52.700 --> 00:03:54.920 is the window object. 99 00:03:54.920 --> 00:03:57.420 And that can be very problematic 100 00:03:57.420 --> 00:03:58.253 and so, 101 00:03:58.253 --> 00:04:00.430 this is yet another very good reason 102 00:04:00.430 --> 00:04:02.733 to always use strict mode. 103 00:04:03.600 --> 00:04:06.150 Next, we have arrow functions 104 00:04:06.150 --> 00:04:07.930 and while arrow functions 105 00:04:07.930 --> 00:04:09.632 are not exactly a way 106 00:04:09.632 --> 00:04:11.610 of calling functions. 107 00:04:11.610 --> 00:04:13.670 It's an important kind of function 108 00:04:13.670 --> 00:04:15.450 that we need to consider, 109 00:04:15.450 --> 00:04:19.620 because, remember, arrow functions do not get their own 110 00:04:19.620 --> 00:04:21.120 'this keyword'. 111 00:04:21.120 --> 00:04:23.720 Instead, if you use 'the this variable' 112 00:04:23.720 --> 00:04:25.200 in an arrow function, 113 00:04:25.200 --> 00:04:27.310 it will simply be the this keyword 114 00:04:27.310 --> 00:04:29.400 of the surrounding function. 115 00:04:29.400 --> 00:04:31.600 So of the parent function 116 00:04:31.600 --> 00:04:33.070 and in technical terms, 117 00:04:33.070 --> 00:04:36.230 this is called the 'lexical this keyword,' 118 00:04:36.230 --> 00:04:38.550 because it simply gets picked up 119 00:04:38.550 --> 00:04:40.860 from the outer lexical scope 120 00:04:40.860 --> 00:04:43.130 of the arrow function. 121 00:04:43.130 --> 00:04:46.770 So never ever forget this very important property 122 00:04:46.770 --> 00:04:48.420 of arrow functions. 123 00:04:48.420 --> 00:04:51.060 Believe me that actually I run into 124 00:04:51.060 --> 00:04:52.310 one or two bugs 125 00:04:52.310 --> 00:04:54.370 because of this behavior. 126 00:04:54.370 --> 00:04:55.203 Okay? 127 00:04:55.203 --> 00:04:57.480 So it's really important not to forget 128 00:04:57.480 --> 00:05:00.170 that arrow functions do not get their own 129 00:05:00.170 --> 00:05:01.157 'this keyword.' 130 00:05:02.170 --> 00:05:03.003 Okay. 131 00:05:03.003 --> 00:05:05.910 And finally, if a function is called 132 00:05:05.910 --> 00:05:07.700 as an event listener, 133 00:05:07.700 --> 00:05:10.250 then the this keyword will always point 134 00:05:10.250 --> 00:05:11.381 to the DOM element 135 00:05:11.381 --> 00:05:14.960 that the handler function is attached to. 136 00:05:14.960 --> 00:05:17.093 Very straightforward right? 137 00:05:17.960 --> 00:05:19.140 Now, the this keyword 138 00:05:19.140 --> 00:05:20.980 is usually a big source 139 00:05:20.980 --> 00:05:23.120 of confusion for beginners. 140 00:05:23.120 --> 00:05:25.130 But if you know these rules, 141 00:05:25.130 --> 00:05:27.920 then it shall become a lot simpler 142 00:05:27.920 --> 00:05:29.780 and to make it even simpler. 143 00:05:29.780 --> 00:05:31.460 It's also important to know 144 00:05:31.460 --> 00:05:34.470 what the, this keyword is not. 145 00:05:34.470 --> 00:05:37.880 So this will never point to the function 146 00:05:37.880 --> 00:05:40.090 in which we are using it. 147 00:05:40.090 --> 00:05:42.860 Also, the this keyword will never point 148 00:05:42.860 --> 00:05:44.590 to the variable environment 149 00:05:44.590 --> 00:05:46.180 of the function. 150 00:05:46.180 --> 00:05:49.050 And these are two pretty common misconceptions 151 00:05:49.050 --> 00:05:51.670 and so that's why I'm addressing them here. 152 00:05:51.670 --> 00:05:52.700 Okay? 153 00:05:52.700 --> 00:05:55.240 So again, the rules that I showed you here 154 00:05:55.240 --> 00:05:57.740 is all that you need to know. 155 00:05:57.740 --> 00:05:58.573 All right. 156 00:05:58.573 --> 00:06:01.400 And now just for the sake of completion, 157 00:06:01.400 --> 00:06:03.330 there are actually other ways 158 00:06:03.330 --> 00:06:05.790 in which we can call a function, 159 00:06:05.790 --> 00:06:06.623 for example, 160 00:06:06.623 --> 00:06:10.040 using the new keyword or the call apply 161 00:06:10.040 --> 00:06:12.110 and bind methods, 162 00:06:12.110 --> 00:06:15.100 but we don't know yet what any of these are. 163 00:06:15.100 --> 00:06:17.590 And so I will talk about how the this keyword 164 00:06:17.590 --> 00:06:18.950 works with them, 165 00:06:18.950 --> 00:06:21.210 when the time comes. 166 00:06:21.210 --> 00:06:24.170 Anyway, that's it for this lecture. 167 00:06:24.170 --> 00:06:26.180 So let's now use this in practice 168 00:06:26.180 --> 00:06:27.583 to make it crystal clear.