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.