WEBVTT 1 00:00:01.353 --> 00:00:03.506 Welcome to the next lecture. 2 00:00:03.506 --> 00:00:05.759 Let's continue with arrow functions, 3 00:00:05.759 --> 00:00:09.592 and see another reason why they are so useful. 4 00:00:10.760 --> 00:00:14.626 So, maybe the biggest advantage of using arrow functions 5 00:00:14.626 --> 00:00:17.906 is that they share the surrounding this keyword. 6 00:00:17.906 --> 00:00:21.799 So, this means that, unlike normal functions, 7 00:00:21.799 --> 00:00:25.532 arrow functions don't get their own this keyword. 8 00:00:25.532 --> 00:00:29.915 So, again, arrow functions do not have a this keyword. 9 00:00:29.915 --> 00:00:32.068 They simply use the this keyword 10 00:00:32.068 --> 00:00:34.141 of the function they are written in. 11 00:00:34.141 --> 00:00:38.053 And so we say that they have a lexical this variable. 12 00:00:38.053 --> 00:00:39.693 So let's now see how we can 13 00:00:39.693 --> 00:00:42.326 actually use that to our advantage. 14 00:00:42.326 --> 00:00:44.072 And now we're going to use 15 00:00:44.072 --> 00:00:47.260 one of these boxes here for the first time. 16 00:00:47.260 --> 00:00:51.187 So, let's write an object with some properties, 17 00:00:51.187 --> 00:00:53.572 and then we will have also a function, 18 00:00:53.572 --> 00:00:57.535 which will attach an event handler to this box here. 19 00:00:57.535 --> 00:00:58.774 Okay? 20 00:00:58.774 --> 00:01:00.692 So let's do that. 21 00:01:00.692 --> 00:01:03.766 And, once again, I'm gonna start by writing 22 00:01:03.766 --> 00:01:05.766 the ES5 version of this. 23 00:01:07.983 --> 00:01:11.316 So let's call this object box, and box5. 24 00:01:15.271 --> 00:01:19.137 And we're gonna say the first property is color, 25 00:01:19.137 --> 00:01:20.702 and it's green. 26 00:01:20.702 --> 00:01:22.989 Okay, so, we're talking about 27 00:01:22.989 --> 00:01:25.572 this very first box here, okay? 28 00:01:27.404 --> 00:01:29.737 This, of course, is a comma. 29 00:01:31.975 --> 00:01:35.803 And the position of that box is number one, all right? 30 00:01:35.803 --> 00:01:37.641 So it's the first one. 31 00:01:37.641 --> 00:01:41.808 And then we also want a method here, called clickMe. 32 00:01:44.696 --> 00:01:47.196 And let's just add a function. 33 00:01:49.350 --> 00:01:50.863 All right. 34 00:01:50.863 --> 00:01:52.791 Now, what we want this method to do 35 00:01:52.791 --> 00:01:56.814 is to simply attach an event handler to this element here. 36 00:01:56.814 --> 00:02:00.727 So let's just quickly jump into our HTML file 37 00:02:00.727 --> 00:02:02.860 and see that it's this one. 38 00:02:02.860 --> 00:02:06.204 So it's with the class of green, okay? 39 00:02:06.204 --> 00:02:09.121 So, how do we add an event handler? 40 00:02:10.375 --> 00:02:13.542 We say, document.querySelector, right, 41 00:02:14.508 --> 00:02:16.675 to first selected element. 42 00:02:19.056 --> 00:02:21.306 And then, addEventListener. 43 00:02:23.354 --> 00:02:26.054 And we want it to happen on a click, 44 00:02:26.054 --> 00:02:29.203 because that's the easiest one. 45 00:02:29.203 --> 00:02:33.024 And then we add our callback, right? 46 00:02:33.024 --> 00:02:35.606 And we actually want something very simple here. 47 00:02:35.606 --> 00:02:38.256 All we want is to have an alert 48 00:02:38.256 --> 00:02:43.219 which says the color of the box, so, in this case, green, 49 00:02:43.219 --> 00:02:45.538 so it's stored in here, and the position, 50 00:02:45.538 --> 00:02:47.288 which is stored here. 51 00:02:48.206 --> 00:02:51.241 So, let's start by creating a string. 52 00:02:51.241 --> 00:02:55.319 So, I'm just gonna call this string str. 53 00:02:55.319 --> 00:02:56.152 This 54 00:02:57.626 --> 00:03:01.612 is box number, and since we're writing ES5 here, 55 00:03:01.612 --> 00:03:04.593 I'm actually gonna do it entirely in ES5, 56 00:03:04.593 --> 00:03:06.546 and so I'm gonna use the plus sign here 57 00:03:06.546 --> 00:03:09.359 instead of the template literal. 58 00:03:09.359 --> 00:03:10.287 Okay. 59 00:03:10.287 --> 00:03:11.120 So, I say, 60 00:03:11.956 --> 00:03:13.123 this.position. 61 00:03:17.471 --> 00:03:19.054 So, box number one. 62 00:03:20.748 --> 00:03:21.581 And it is, 63 00:03:23.825 --> 00:03:25.408 and then the color. 64 00:03:27.514 --> 00:03:28.974 All right. 65 00:03:28.974 --> 00:03:31.807 And then we can alert this string. 66 00:03:34.387 --> 00:03:35.220 Okay. 67 00:03:36.404 --> 00:03:38.987 So, let's now call this method. 68 00:03:39.890 --> 00:03:41.307 So, box5.clickMe. 69 00:03:44.302 --> 00:03:48.006 And as soon as this method is executed, is called, 70 00:03:48.006 --> 00:03:52.130 the event listener will be added to this element. 71 00:03:52.130 --> 00:03:54.339 So, let's reload this. 72 00:03:54.339 --> 00:03:56.603 Now, do you think that this is really gonna happen 73 00:03:56.603 --> 00:03:59.429 the way that we intended it to work? 74 00:03:59.429 --> 00:04:00.576 Let's check it out. 75 00:04:00.576 --> 00:04:04.451 So I'm now going to click on this box here. 76 00:04:04.451 --> 00:04:07.417 And it says, this is box number undefined 77 00:04:07.417 --> 00:04:09.696 and it's undefined. 78 00:04:09.696 --> 00:04:11.812 Okay, so, why is this happening? 79 00:04:11.812 --> 00:04:16.125 Why is it not reading our values from this object here? 80 00:04:16.125 --> 00:04:17.858 So, green and one. 81 00:04:17.858 --> 00:04:20.285 And the reason for that is something that I said 82 00:04:20.285 --> 00:04:22.523 in the very beginning of the course, 83 00:04:22.523 --> 00:04:24.862 and that is, that only the method call, 84 00:04:24.862 --> 00:04:28.664 the this keyword, actually points to that object. 85 00:04:28.664 --> 00:04:31.796 But in a regular function call, the this keyword 86 00:04:31.796 --> 00:04:34.170 will always point to the global object, 87 00:04:34.170 --> 00:04:37.975 which, in the case of the browser, is the window object. 88 00:04:37.975 --> 00:04:40.494 And that is exactly what happens here. 89 00:04:40.494 --> 00:04:44.428 So, this clickMe method is a function attached to an object. 90 00:04:44.428 --> 00:04:47.028 So it's a method, and so in here, 91 00:04:47.028 --> 00:04:49.768 we have access to the color and to position 92 00:04:49.768 --> 00:04:51.931 by using the this keyword, right? 93 00:04:51.931 --> 00:04:55.986 But then, this callback function that we have here 94 00:04:55.986 --> 00:04:59.101 and this event handler here is not a method, 95 00:04:59.101 --> 00:05:01.381 it's a regular function call, and therefore, 96 00:05:01.381 --> 00:05:06.104 the this keyword here does not point to this box5 object, 97 00:05:06.104 --> 00:05:09.787 but instead, it points to the window object. 98 00:05:09.787 --> 00:05:12.764 And, of course, position and color 99 00:05:12.764 --> 00:05:14.880 are not defined in the window object. 100 00:05:14.880 --> 00:05:16.665 And therefore, what we have here 101 00:05:16.665 --> 00:05:19.248 is undefined for both of these. 102 00:05:20.562 --> 00:05:23.684 So, some say that this is a bug in JavaScript, 103 00:05:23.684 --> 00:05:26.894 and others say that this is actually how it should behave. 104 00:05:26.894 --> 00:05:30.060 Now, a very common pattern to avoid this 105 00:05:30.060 --> 00:05:32.855 is to simply create a new variable in here 106 00:05:32.855 --> 00:05:37.195 and store the this variable in that new variable. 107 00:05:37.195 --> 00:05:39.510 So let's try that out. 108 00:05:39.510 --> 00:05:41.010 So let's say, var, 109 00:05:42.698 --> 00:05:46.120 and we usually use a variable called self, or that, 110 00:05:46.120 --> 00:05:48.772 and I prefer to call it self. 111 00:05:48.772 --> 00:05:50.855 And so we simply say self 112 00:05:52.003 --> 00:05:53.530 equals this. 113 00:05:53.530 --> 00:05:57.250 And then the self variable points to this. 114 00:05:57.250 --> 00:06:01.604 And so, in here, instead of using this, we use self. 115 00:06:01.604 --> 00:06:05.218 And then we basically stored the this variable here 116 00:06:05.218 --> 00:06:09.823 in this new variable, so that we can then use it 117 00:06:09.823 --> 00:06:11.670 in the rest of the function. 118 00:06:11.670 --> 00:06:14.724 So, this is kind of a workaround, kind of a hack, 119 00:06:14.724 --> 00:06:18.747 to avoid the situation that, in this function call here, 120 00:06:18.747 --> 00:06:22.312 we don't have access to the box5 object. 121 00:06:22.312 --> 00:06:23.575 Okay? 122 00:06:23.575 --> 00:06:28.235 So let's now run this again, click here, and now it works. 123 00:06:28.235 --> 00:06:31.155 Now it says, this is box number one and it's green. 124 00:06:31.155 --> 00:06:32.113 All right. 125 00:06:32.113 --> 00:06:34.949 So, remember that in the beginning I said 126 00:06:34.949 --> 00:06:37.712 that with arrow functions, they actually share 127 00:06:37.712 --> 00:06:40.237 the surrounding this keyword. 128 00:06:40.237 --> 00:06:43.831 So let's see how we can use arrow functions 129 00:06:43.831 --> 00:06:47.807 in order to avoid this hack here, right? 130 00:06:47.807 --> 00:06:51.403 So let me just go ahead and copy all of this, actually. 131 00:06:51.403 --> 00:06:55.345 There is no need to write it all again. 132 00:06:55.345 --> 00:06:58.762 So, it's ES6 now, I'm gonna call it box6, 133 00:06:59.829 --> 00:07:02.680 and call box6 here, and now, 134 00:07:02.680 --> 00:07:05.347 it's not a var, it's a constant. 135 00:07:05.347 --> 00:07:07.103 So, let's say const. 136 00:07:07.103 --> 00:07:09.460 And we don't use this, 137 00:07:09.460 --> 00:07:10.293 okay? 138 00:07:12.267 --> 00:07:14.072 Because now, what we're gonna do here 139 00:07:14.072 --> 00:07:16.134 is to use an arrow function 140 00:07:16.134 --> 00:07:19.577 instead of this anonymous function here. 141 00:07:19.577 --> 00:07:22.022 So let's get rid of this. 142 00:07:22.022 --> 00:07:24.837 And remember that when we don't have any arguments 143 00:07:24.837 --> 00:07:26.790 or if we have more than one argument, 144 00:07:26.790 --> 00:07:29.190 we have to specify the parenthesis. 145 00:07:29.190 --> 00:07:32.085 So we do that, then the arrow, 146 00:07:32.085 --> 00:07:35.812 and then our function body, which is this. 147 00:07:35.812 --> 00:07:37.896 And it's actually as simple as this. 148 00:07:37.896 --> 00:07:40.323 So now, in here we have a function 149 00:07:40.323 --> 00:07:43.455 that shares the this keyword with its surrounding, 150 00:07:43.455 --> 00:07:45.782 so, with the clickMe method here. 151 00:07:45.782 --> 00:07:48.161 And we know that in here, the this keyword 152 00:07:48.161 --> 00:07:49.265 points to the object. 153 00:07:49.265 --> 00:07:54.136 So now, in here, we can actually use the this keyword. 154 00:07:54.136 --> 00:07:54.969 Right? 155 00:07:56.298 --> 00:07:59.131 So let's get rid of this one here. 156 00:08:00.715 --> 00:08:02.132 And let's run it. 157 00:08:03.151 --> 00:08:06.451 And I'm gonna click now and here it is. 158 00:08:06.451 --> 00:08:09.586 So, this is box number one and it's green. 159 00:08:09.586 --> 00:08:11.885 So now, by using the arrow function, 160 00:08:11.885 --> 00:08:15.100 we really have access to the this keyword 161 00:08:15.100 --> 00:08:17.757 of this method here, because, again, 162 00:08:17.757 --> 00:08:21.439 the arrow function shares the lexical this keyword 163 00:08:21.439 --> 00:08:23.255 of its surroundings. 164 00:08:23.255 --> 00:08:25.780 So, if you want to start using ES6 165 00:08:25.780 --> 00:08:27.666 and arrow functions today, 166 00:08:27.666 --> 00:08:30.169 then the best practice is to actually 167 00:08:30.169 --> 00:08:33.185 always use arrow functions when you need to preserve 168 00:08:33.185 --> 00:08:37.290 the value of the this keyword, such as we did here. 169 00:08:37.290 --> 00:08:41.879 So, using arrow functions here was very useful, right? 170 00:08:41.879 --> 00:08:45.462 Let me just show you another scenario here. 171 00:08:48.568 --> 00:08:51.209 Let me copy this again, 172 00:08:51.209 --> 00:08:53.209 and get rid of this one, 173 00:08:54.244 --> 00:08:58.411 and this is the ES6, let's call this 66 now, okay. 174 00:08:59.534 --> 00:09:01.760 So in here, we still have a function 175 00:09:01.760 --> 00:09:03.691 that we could potentially replace 176 00:09:03.691 --> 00:09:05.435 with an arrow function, right? 177 00:09:05.435 --> 00:09:06.935 And it's this one. 178 00:09:08.085 --> 00:09:11.070 So, if I, instead of this function expression, 179 00:09:11.070 --> 00:09:13.684 I wanted to write an arrow, 180 00:09:13.684 --> 00:09:16.180 I could simply do it like this, right? 181 00:09:16.180 --> 00:09:19.021 It would work the exact same thing. 182 00:09:19.021 --> 00:09:23.918 But let's see if the result is still the one that we want. 183 00:09:23.918 --> 00:09:26.942 So, reload, and now I click here. 184 00:09:26.942 --> 00:09:30.489 And now it says undefined again, and why is that? 185 00:09:30.489 --> 00:09:32.309 And it's actually very simple. 186 00:09:32.309 --> 00:09:35.246 And it's because this method here does now 187 00:09:35.246 --> 00:09:40.213 also share the lexical this keyword from its surroundings. 188 00:09:40.213 --> 00:09:44.482 And the surrounding of this is the global context, right? 189 00:09:44.482 --> 00:09:46.802 So this means that this method here 190 00:09:46.802 --> 00:09:49.913 also no longer has its own this keyword. 191 00:09:49.913 --> 00:09:53.175 So it shares the global this keyword, 192 00:09:53.175 --> 00:09:57.024 which, of course, points to the global object window. 193 00:09:57.024 --> 00:10:00.260 So this is the same situation as right in the beginning. 194 00:10:00.260 --> 00:10:04.010 We don't have position and color in the window, right? 195 00:10:04.010 --> 00:10:07.093 And, therefore, it becomes undefined. 196 00:10:08.088 --> 00:10:10.629 So, this is not something that we want, 197 00:10:10.629 --> 00:10:11.739 but I just wanted to show you 198 00:10:11.739 --> 00:10:13.644 that you have to be really careful 199 00:10:13.644 --> 00:10:16.923 with these arrow functions, so that you don't lose track 200 00:10:16.923 --> 00:10:20.577 of what the this keyword actually points to. 201 00:10:20.577 --> 00:10:22.714 So, I will just comment this one out, 202 00:10:22.714 --> 00:10:25.777 because it's not really interesting for us. 203 00:10:25.777 --> 00:10:28.884 So, again, I just wanted to show you to be careful. 204 00:10:28.884 --> 00:10:30.205 All right, and since this is 205 00:10:30.205 --> 00:10:33.639 one of the really great new things in JavaScript, 206 00:10:33.639 --> 00:10:35.372 let me just show you another example, 207 00:10:35.372 --> 00:10:38.402 because I really, really like these arrow functions. 208 00:10:38.402 --> 00:10:40.556 So we'll have another example here. 209 00:10:40.556 --> 00:10:42.913 Let's create a function constructor 210 00:10:42.913 --> 00:10:46.263 in order to create a Person object, okay? 211 00:10:46.263 --> 00:10:49.935 So, once again, we've done that a lot of times before. 212 00:10:49.935 --> 00:10:52.849 So you already know how to do this. 213 00:10:52.849 --> 00:10:57.310 And I'm gonna keep it very simple, just with the name. 214 00:10:57.310 --> 00:11:00.477 So, this.name is, of course, the name. 215 00:11:01.855 --> 00:11:03.686 And let's now add a method 216 00:11:03.686 --> 00:11:06.587 to the prototype property of the Person 217 00:11:06.587 --> 00:11:08.278 so the object created through 218 00:11:08.278 --> 00:11:10.415 the Person function constructor 219 00:11:10.415 --> 00:11:12.722 inherit this method. 220 00:11:12.722 --> 00:11:15.088 So, once again, nothing new here. 221 00:11:15.088 --> 00:11:18.028 So, Person.prototype property, 222 00:11:18.028 --> 00:11:20.528 and then let's say, myFriends. 223 00:11:21.821 --> 00:11:24.143 And, once again, it's myFriends5, 224 00:11:24.143 --> 00:11:28.529 because we're using ES5, in this case, first, 225 00:11:28.529 --> 00:11:31.437 so that I can show you the first example with ES5 226 00:11:31.437 --> 00:11:33.770 and the second one with ES6. 227 00:11:35.553 --> 00:11:37.386 So, this is a function 228 00:11:39.157 --> 00:11:42.824 which actually receives an array of friends, 229 00:11:44.986 --> 00:11:46.766 and what we want to do here 230 00:11:46.766 --> 00:11:50.155 is to simply return an array which says 231 00:11:50.155 --> 00:11:52.794 that the name of the person is friends 232 00:11:52.794 --> 00:11:55.183 with each of these elements 233 00:11:55.183 --> 00:11:57.458 that are in this friends array, right? 234 00:11:57.458 --> 00:11:59.561 So, imagine that the person is John, 235 00:11:59.561 --> 00:12:02.332 and that the friends are Bob and Jane. 236 00:12:02.332 --> 00:12:05.182 Then we want to say, John is friends with Bob, 237 00:12:05.182 --> 00:12:08.540 and John is friends with Jane, okay? 238 00:12:08.540 --> 00:12:11.031 So let's create an array. 239 00:12:11.031 --> 00:12:12.971 Simply call it arr. 240 00:12:12.971 --> 00:12:14.894 And then we're gonna use the map method 241 00:12:14.894 --> 00:12:17.380 that we used before once again. 242 00:12:17.380 --> 00:12:20.688 And this time, here, on the friends array. 243 00:12:20.688 --> 00:12:22.263 All right. 244 00:12:22.263 --> 00:12:23.241 So, you already know that we 245 00:12:23.241 --> 00:12:26.563 could use the arrow function here, 246 00:12:26.563 --> 00:12:30.794 but since I'm writing ES5, I'm just gonna do it this way. 247 00:12:30.794 --> 00:12:33.509 So, we have access to the current element, 248 00:12:33.509 --> 00:12:36.663 and so I'm gonna call it el, 249 00:12:36.663 --> 00:12:38.746 which stands for element. 250 00:12:41.634 --> 00:12:44.717 And so in each element of this array, 251 00:12:45.865 --> 00:12:49.448 all I want is to say the name of the person 252 00:12:54.344 --> 00:12:55.177 is friends 253 00:12:57.571 --> 00:13:00.208 with, and then, of course, 254 00:13:00.208 --> 00:13:03.541 the current element, which is called el. 255 00:13:04.487 --> 00:13:07.820 Okay, and then we simply can console.log 256 00:13:08.842 --> 00:13:09.675 the array. 257 00:13:11.448 --> 00:13:12.281 All right. 258 00:13:13.985 --> 00:13:17.068 Let's now create a couple of friends. 259 00:13:18.916 --> 00:13:19.749 Bob, 260 00:13:21.607 --> 00:13:22.440 Jane, 261 00:13:23.868 --> 00:13:25.798 and Mark, let's say. 262 00:13:25.798 --> 00:13:28.768 That should be enough for now. 263 00:13:28.768 --> 00:13:31.185 So let's create a new Person, 264 00:13:33.542 --> 00:13:35.264 called John. 265 00:13:35.264 --> 00:13:37.847 And then we can call right away 266 00:13:39.028 --> 00:13:41.622 the myFriends5 method. 267 00:13:41.622 --> 00:13:44.397 And we're gonna pass the friends into it, of course. 268 00:13:44.397 --> 00:13:45.568 All right. 269 00:13:45.568 --> 00:13:48.664 So, again, do you think that this is going to work? 270 00:13:48.664 --> 00:13:51.664 Take a deep look at this method here 271 00:13:52.908 --> 00:13:55.658 and see if the this variable will actually point 272 00:13:55.658 --> 00:13:58.401 to what we think it points. 273 00:13:58.401 --> 00:13:59.234 Okay? 274 00:14:01.126 --> 00:14:03.043 So, let's now run this. 275 00:14:05.112 --> 00:14:07.881 And, actually, something weird happens. 276 00:14:07.881 --> 00:14:10.214 So, the name is not defined. 277 00:14:11.255 --> 00:14:14.929 And this is because of the exact same reason as before. 278 00:14:14.929 --> 00:14:18.024 So, in here, in this method, 279 00:14:18.024 --> 00:14:20.605 we of course have access to the this variable, 280 00:14:20.605 --> 00:14:23.034 and it points to the name of the person, 281 00:14:23.034 --> 00:14:24.541 so it would be John. 282 00:14:24.541 --> 00:14:26.343 But the thing is that, in here, 283 00:14:26.343 --> 00:14:28.671 we call another function, right? 284 00:14:28.671 --> 00:14:30.316 Which is this anonymous function. 285 00:14:30.316 --> 00:14:32.711 And so, in here, the this keyword 286 00:14:32.711 --> 00:14:34.243 is not going to point to the object, 287 00:14:34.243 --> 00:14:37.750 but, instead, it's going to point to the global object, 288 00:14:37.750 --> 00:14:40.802 which is window, once again. 289 00:14:40.802 --> 00:14:44.170 Now we could, again, use that trick that we used before 290 00:14:44.170 --> 00:14:46.800 by saying var self equal this, 291 00:14:46.800 --> 00:14:49.198 so, basically storing the this variable 292 00:14:49.198 --> 00:14:52.255 in a separate variable, but I just want to show you 293 00:14:52.255 --> 00:14:56.187 another cool trick that we could use here instead. 294 00:14:56.187 --> 00:15:00.875 So, remember that we have to bind call and apply methods, 295 00:15:00.875 --> 00:15:04.245 which we can use to set the this keyword, right? 296 00:15:04.245 --> 00:15:06.294 Remember that part? 297 00:15:06.294 --> 00:15:09.290 So, call, bind, and apply allow us to 298 00:15:09.290 --> 00:15:11.974 define the this variable manually, 299 00:15:11.974 --> 00:15:14.847 and bind creates a copy of this function, 300 00:15:14.847 --> 00:15:19.264 while call actually calls it immediately, okay? 301 00:15:19.264 --> 00:15:23.931 So, what we can do here is to create a copy of this function 302 00:15:23.931 --> 00:15:27.461 with the this variable set to this. 303 00:15:27.461 --> 00:15:30.235 So, this here is the function, right? 304 00:15:30.235 --> 00:15:33.173 And so in this function, we can create 305 00:15:33.173 --> 00:15:37.624 a copy of this function using the bind method, right here. 306 00:15:37.624 --> 00:15:41.624 So, what we want the this keyword in here to be? 307 00:15:42.546 --> 00:15:45.157 Exactly, we want it to be this. 308 00:15:45.157 --> 00:15:48.785 So, this maybe sounds or looks a little bit weird, 309 00:15:48.785 --> 00:15:50.535 but this is actually going to work. 310 00:15:50.535 --> 00:15:52.947 Because, remember, here, outside, 311 00:15:52.947 --> 00:15:55.920 we still have access to the this variable, 312 00:15:55.920 --> 00:15:58.727 and it points to the new person, 313 00:15:58.727 --> 00:16:01.299 so, in this case, it would be John. 314 00:16:01.299 --> 00:16:03.626 And so we can basically pass it 315 00:16:03.626 --> 00:16:07.168 into this function here simply by creating 316 00:16:07.168 --> 00:16:09.228 a new copy of the function 317 00:16:09.228 --> 00:16:12.505 with a manually-defined this keyword. 318 00:16:12.505 --> 00:16:15.771 So let's check if this works now. 319 00:16:15.771 --> 00:16:17.271 And, yes, it does. 320 00:16:18.108 --> 00:16:21.453 So, John is friends with Bob, with Jane, and with Mark. 321 00:16:21.453 --> 00:16:23.865 So, this is the ES5 version. 322 00:16:23.865 --> 00:16:25.992 And you still learned a very cool trick 323 00:16:25.992 --> 00:16:28.242 with this bind here, right? 324 00:16:30.657 --> 00:16:33.426 All right, and now, the ES6 version. 325 00:16:33.426 --> 00:16:37.257 And, once again, I'm going to copy it 326 00:16:37.257 --> 00:16:39.507 and just modify some stuff. 327 00:16:41.057 --> 00:16:44.279 So this one is called myFriends6, 328 00:16:44.279 --> 00:16:48.446 and then in here, we can change the content of our method. 329 00:16:50.148 --> 00:16:52.293 Now, I want you to go ahead on your own 330 00:16:52.293 --> 00:16:54.011 and change everything here, 331 00:16:54.011 --> 00:16:56.710 so that we no longer need this trick here. 332 00:16:56.710 --> 00:16:59.387 And I'm sure that you can do that by now, right? 333 00:16:59.387 --> 00:17:03.845 So, please pause the video and do that right now. 334 00:17:03.845 --> 00:17:06.586 So, I'm sure that you managed to do it, 335 00:17:06.586 --> 00:17:09.169 so let me show you my solution. 336 00:17:11.038 --> 00:17:15.363 So, of course, we used an arrow function here, right? 337 00:17:15.363 --> 00:17:18.625 And we actually don't need any of this, right? 338 00:17:18.625 --> 00:17:22.187 Because we simply have one line of code. 339 00:17:22.187 --> 00:17:25.690 So what I'm gonna do is copy this, 340 00:17:25.690 --> 00:17:29.690 delete all of this, and just paste it back here. 341 00:17:32.402 --> 00:17:34.006 And another thing that we can do 342 00:17:34.006 --> 00:17:36.451 is to use a template string, 343 00:17:36.451 --> 00:17:40.422 which is way cooler than doing it this way. 344 00:17:40.422 --> 00:17:42.922 So, we get rid of all of this. 345 00:17:47.536 --> 00:17:50.869 So I'm missing the backticks here, okay? 346 00:17:56.427 --> 00:17:58.453 And here we go. 347 00:17:58.453 --> 00:18:02.653 So now we have transformed this to an arrow function, 348 00:18:02.653 --> 00:18:04.447 and so, as you learned before, 349 00:18:04.447 --> 00:18:07.757 this function does not have its own this keyword, 350 00:18:07.757 --> 00:18:10.588 and therefore, we share the lexical this keyword 351 00:18:10.588 --> 00:18:11.856 from our surroundings. 352 00:18:11.856 --> 00:18:14.845 And the surroundings is, in this case, of course, 353 00:18:14.845 --> 00:18:16.744 this method, where the this variable 354 00:18:16.744 --> 00:18:19.542 points exactly to the point where we want, 355 00:18:19.542 --> 00:18:22.459 which is the instance that we create. 356 00:18:22.459 --> 00:18:25.480 So let's create a new instance, 357 00:18:25.480 --> 00:18:28.454 and then the this keyword will point to it. 358 00:18:28.454 --> 00:18:30.954 This time, let's call it Mike. 359 00:18:31.983 --> 00:18:33.636 Okay? 360 00:18:33.636 --> 00:18:37.158 And then Friends6 here, of course. 361 00:18:37.158 --> 00:18:40.230 And let's see that it's gonna work. 362 00:18:40.230 --> 00:18:43.215 And, actually, it doesn't, and that's because 363 00:18:43.215 --> 00:18:46.382 I didn't copy the new operator, right? 364 00:18:47.482 --> 00:18:50.052 So we were simply doing a function call 365 00:18:50.052 --> 00:18:54.006 with the Person, instead of creating a new object. 366 00:18:54.006 --> 00:18:56.786 So, let's try it again, and now it works. 367 00:18:56.786 --> 00:19:01.053 Mike is friends with Bob, Mike, Jane, and Mike, Mark. 368 00:19:01.053 --> 00:19:02.053 Okay. 369 00:19:02.053 --> 00:19:04.414 So, once again, we used the power 370 00:19:04.414 --> 00:19:06.594 of the arrow function here. 371 00:19:06.594 --> 00:19:08.881 So, I hope that these two lectures 372 00:19:08.881 --> 00:19:11.070 were enough to really convince you 373 00:19:11.070 --> 00:19:13.859 to start using the arrow functions. 374 00:19:13.859 --> 00:19:16.675 I hope that everything makes a lot of sense to you 375 00:19:16.675 --> 00:19:19.795 up until this point, and if it does, 376 00:19:19.795 --> 00:19:22.546 then let's go right now to the next lecture, 377 00:19:22.546 --> 00:19:24.471 which is gonna be about destructuring, 378 00:19:24.471 --> 00:19:27.498 so, another new concept in ES6. 379 00:19:27.498 --> 00:19:28.915 So let's move on.