WEBVTT 1 00:00:01.400 --> 00:00:03.840 Let me now show you some pitfalls 2 00:00:03.840 --> 00:00:07.550 of the this keyword related to regular functions 3 00:00:07.550 --> 00:00:09.460 and arrow functions. 4 00:00:09.460 --> 00:00:13.330 This way we can learn when we should use and avoid 5 00:00:13.330 --> 00:00:14.163 each of them. 6 00:00:15.660 --> 00:00:19.260 And to start, let's get back the Jonas object 7 00:00:19.260 --> 00:00:20.463 from before, 8 00:00:24.400 --> 00:00:26.913 and I will also add a first name property. 9 00:00:32.240 --> 00:00:36.750 All right, and now let's add a second method here, 10 00:00:36.750 --> 00:00:39.490 but this time using an arrow function. 11 00:00:39.490 --> 00:00:43.320 So we will do a very simple greet method. 12 00:00:43.320 --> 00:00:45.980 And so an arrow function here, 13 00:00:45.980 --> 00:00:47.900 which simply logs to the console 14 00:00:49.240 --> 00:00:52.700 Hey, and then the name. 15 00:00:52.700 --> 00:00:57.370 And so we're gonna take this name from the object. 16 00:00:57.370 --> 00:01:00.890 So this dot first name, 17 00:01:00.890 --> 00:01:03.633 or at least, that's what we think we're doing. 18 00:01:05.410 --> 00:01:08.180 So let me now show you what happens, 19 00:01:08.180 --> 00:01:12.700 as I call jonas.greet. 20 00:01:12.700 --> 00:01:16.610 And maybe you can also anticipate it based on the knowledge 21 00:01:16.610 --> 00:01:19.440 that you already have off the this keywords 22 00:01:19.440 --> 00:01:21.780 when used in an arrow function. 23 00:01:21.780 --> 00:01:24.460 So let's see what the result is here. 24 00:01:24.460 --> 00:01:27.800 And we get, Hey undefined. 25 00:01:27.800 --> 00:01:32.450 So that's not Hey Jonas, as we might have expected. 26 00:01:32.450 --> 00:01:35.560 And the reason is exactly the one that I mentioned 27 00:01:35.560 --> 00:01:36.810 in the last lecture, 28 00:01:36.810 --> 00:01:39.510 which is the fact that an arrow function 29 00:01:39.510 --> 00:01:42.340 does not get its own this keyword, 30 00:01:42.340 --> 00:01:46.060 it will simply use the this keyword from its surroundings. 31 00:01:46.060 --> 00:01:49.760 So in other words, its parents this keyword, 32 00:01:49.760 --> 00:01:53.130 and the parent scope of this greet method 33 00:01:53.130 --> 00:01:56.203 is the global scope. Okay? 34 00:01:57.140 --> 00:02:02.140 Just note here that this is actually not a code block. 35 00:02:02.280 --> 00:02:06.470 So you might think that, like this kind of block here, 36 00:02:06.470 --> 00:02:10.360 ought to create its own scope, but it doesn't. 37 00:02:10.360 --> 00:02:14.080 So this is not a code block. It is an object literal. 38 00:02:14.080 --> 00:02:19.070 So it's just a way that we literally define objects. Okay? 39 00:02:19.070 --> 00:02:23.090 So all of this here is in the global scope still. 40 00:02:23.090 --> 00:02:26.690 And so therefore, that includes this greet method. 41 00:02:26.690 --> 00:02:28.200 It is in the global scope, 42 00:02:28.200 --> 00:02:31.430 and so therefore, the arrow function here, 43 00:02:31.430 --> 00:02:34.180 which does not have its own this keyword, 44 00:02:34.180 --> 00:02:37.490 will use the this keyword from the global scope. 45 00:02:37.490 --> 00:02:41.407 And remember that is the window object. Right? 46 00:02:43.440 --> 00:02:48.440 And so this dot first name is also undefined. 47 00:02:49.430 --> 00:02:52.570 And I think that this is actually something 48 00:02:52.570 --> 00:02:54.390 that we haven't seen before. 49 00:02:54.390 --> 00:02:57.790 So when we try to access a property that doesn't exist 50 00:02:57.790 --> 00:03:01.290 on a certain object, we do not get an error, 51 00:03:01.290 --> 00:03:03.120 but simply undefined. 52 00:03:03.120 --> 00:03:05.190 And so that is what is happening here. 53 00:03:05.190 --> 00:03:07.020 That's why we get undefined, 54 00:03:07.020 --> 00:03:09.783 because this is the window object, 55 00:03:10.700 --> 00:03:14.800 so just as we saw before, and then on the window object, 56 00:03:14.800 --> 00:03:18.503 there is no first name, and so we get undefined. Okay? 57 00:03:21.190 --> 00:03:24.600 And actually, this behavior can become pretty dangerous, 58 00:03:24.600 --> 00:03:28.030 in case we use var, to declare variables. 59 00:03:28.030 --> 00:03:30.880 Because remember from a previous lecture, 60 00:03:30.880 --> 00:03:35.290 that variables declared with var, actually create properties 61 00:03:35.290 --> 00:03:37.030 on the global object. 62 00:03:37.030 --> 00:03:39.323 And so let's imagine we have this. 63 00:03:40.760 --> 00:03:45.633 So var first name equals Matilda. 64 00:03:47.980 --> 00:03:51.560 And so now as we run the greet function, 65 00:03:51.560 --> 00:03:55.310 it will say, Hey Matilda, okay? 66 00:03:55.310 --> 00:03:57.240 So why is that? 67 00:03:57.240 --> 00:04:01.180 So again, it is because inside of this function here, 68 00:04:01.180 --> 00:04:03.830 the this keyword is window. 69 00:04:03.830 --> 00:04:07.483 And actually, let me print that here to the console as well, 70 00:04:08.710 --> 00:04:12.633 just so we can really see that here happening. Okay. 71 00:04:15.495 --> 00:04:19.578 So again, window is this keyword inside 72 00:04:19.578 --> 00:04:24.350 of this arrow function, even though that arrow function 73 00:04:24.350 --> 00:04:27.470 was called by the Jonas object. 74 00:04:27.470 --> 00:04:29.810 But that rule does not apply here, 75 00:04:29.810 --> 00:04:32.910 because again, it's an arrow function. 76 00:04:32.910 --> 00:04:36.930 And so if we take a look at this window object now, 77 00:04:36.930 --> 00:04:41.560 and here, close to F, for first name, 78 00:04:41.560 --> 00:04:44.860 you see here, that it does indeed have a property 79 00:04:44.860 --> 00:04:48.240 called first name with the value of Matilda. 80 00:04:48.240 --> 00:04:52.490 And again, that's because if we declare variables with var, 81 00:04:52.490 --> 00:04:56.530 that creates these kind of properties on the global object. 82 00:04:56.530 --> 00:04:59.190 And so therefore, this dot first name, 83 00:04:59.190 --> 00:05:04.190 which translates to window dot first name is then Matilda. 84 00:05:04.630 --> 00:05:08.180 And so that's why we then get Hey Matilda here. 85 00:05:08.180 --> 00:05:12.830 So that's yet another reason not to use var. 86 00:05:12.830 --> 00:05:17.310 So you see there's a pretty long list against var. 87 00:05:17.310 --> 00:05:19.570 So from this example, the big takeaway 88 00:05:19.570 --> 00:05:22.070 is that as a best practice, 89 00:05:22.070 --> 00:05:26.920 you should never ever use an arrow function as a method. 90 00:05:26.920 --> 00:05:30.690 And in my opinion, that's even true if you're not even using 91 00:05:30.690 --> 00:05:33.740 the this keyword in a particular method. 92 00:05:33.740 --> 00:05:36.720 Because if you have this rule of never using an arrow 93 00:05:36.720 --> 00:05:40.460 function as a method, then you never have to think about 94 00:05:40.460 --> 00:05:42.820 which type of function you should use. 95 00:05:42.820 --> 00:05:46.040 You will always just use a normal function expression, 96 00:05:46.040 --> 00:05:49.590 and like this, you will then prevent this kind of mistakes 97 00:05:49.590 --> 00:05:51.210 from happen. 98 00:05:51.210 --> 00:05:54.270 So this mistake that we saw here with Hey Matilda 99 00:05:54.270 --> 00:05:57.563 is easy to prevent by simply not using var. 100 00:05:58.610 --> 00:06:02.200 But even then, Hey undefined is still a buck. 101 00:06:02.200 --> 00:06:03.760 It's still not correct. 102 00:06:03.760 --> 00:06:05.960 And so that would have easily been avoided 103 00:06:05.960 --> 00:06:10.960 by just using a regular function. Right? 104 00:06:11.040 --> 00:06:16.040 If we had this, then of course now this object Jonas, 105 00:06:16.580 --> 00:06:18.240 which is calling the function 106 00:06:18.240 --> 00:06:22.630 would then be the this keyword. Right? 107 00:06:22.630 --> 00:06:25.840 So you see first name Jonas, and then Hey Jonas. 108 00:06:25.840 --> 00:06:28.980 Because now this method actually does get its own 109 00:06:28.980 --> 00:06:29.813 this keyword. 110 00:06:30.700 --> 00:06:31.883 But let's put it back. 111 00:06:33.870 --> 00:06:37.870 And, Okay. Great. 112 00:06:37.870 --> 00:06:42.510 And now, one final example of a pitfall of this keyword 113 00:06:42.510 --> 00:06:46.210 is when we have a function inside of a method. 114 00:06:46.210 --> 00:06:49.300 And that is a pretty common thing to happen. 115 00:06:49.300 --> 00:06:53.930 And so let's now take a look at an example of that. 116 00:06:53.930 --> 00:06:56.793 So let's create another Jonas object here. 117 00:06:57.840 --> 00:06:59.570 Or, actually don't. 118 00:06:59.570 --> 00:07:02.670 Actually let's just use this object here 119 00:07:02.670 --> 00:07:04.100 that we already have. 120 00:07:04.100 --> 00:07:07.730 And let's enhance this calcAge method. 121 00:07:07.730 --> 00:07:10.890 So what I want in here is a function 122 00:07:10.890 --> 00:07:15.360 that will basically return if the person is a millennial. 123 00:07:15.360 --> 00:07:17.730 So easy enough, 124 00:07:17.730 --> 00:07:22.653 let's create an isMillennial function in here. 125 00:07:28.190 --> 00:07:31.890 And let's simply log to the console, 126 00:07:31.890 --> 00:07:36.890 if this dot year is greater equal 1981, 127 00:07:38.800 --> 00:07:41.180 and so that's the same rule that we used before, 128 00:07:41.180 --> 00:07:46.133 so that the birth year needs to stay between 1981 and 1996. 129 00:07:48.920 --> 00:07:52.240 So below 1996. 130 00:07:52.240 --> 00:07:56.430 And then let's also call that function right here. 131 00:07:56.430 --> 00:07:59.780 So isMillennial will be called 132 00:07:59.780 --> 00:08:01.713 as we called the calcAge function. 133 00:08:02.660 --> 00:08:05.150 So let's also do that. 134 00:08:05.150 --> 00:08:07.440 So Jonas dot calcAge 135 00:08:09.180 --> 00:08:12.450 So we're calling this method here, the calcAge method, 136 00:08:12.450 --> 00:08:16.730 which is a regular method, so not an arrow function. 137 00:08:16.730 --> 00:08:19.540 And so therefore, the this keyword right here 138 00:08:19.540 --> 00:08:21.620 should be the Jonas object. 139 00:08:21.620 --> 00:08:26.350 But then in here, we have a regular function, so this one, 140 00:08:26.350 --> 00:08:29.580 and here we are then calling it again. 141 00:08:29.580 --> 00:08:33.310 Now inside of this function, we are using the this keyword. 142 00:08:33.310 --> 00:08:36.773 And so let's now see what happens as we reload the page. 143 00:08:38.210 --> 00:08:42.780 And we get cannot read property year of undefined 144 00:08:42.780 --> 00:08:45.350 on line 138. 145 00:08:45.350 --> 00:08:47.400 So that's right here. 146 00:08:47.400 --> 00:08:50.520 So what this means is that the this keyword 147 00:08:50.520 --> 00:08:52.130 must be undefined. 148 00:08:52.130 --> 00:08:54.000 That's what it says here. 149 00:08:54.000 --> 00:08:56.033 So let's just log that as well, 150 00:08:57.500 --> 00:09:02.500 and here, we can get rid of this one now, okay. 151 00:09:02.560 --> 00:09:06.580 And indeed, the this key word here is undefined. 152 00:09:06.580 --> 00:09:08.620 So why is that? 153 00:09:08.620 --> 00:09:11.860 Well, if we think about this, then this here 154 00:09:11.860 --> 00:09:15.410 is really just a regular function call, isn't it? 155 00:09:15.410 --> 00:09:17.310 It is a regular function call, 156 00:09:17.310 --> 00:09:20.960 even though it happens inside of a method. 157 00:09:20.960 --> 00:09:24.620 And the rule says that inside a regular function call, 158 00:09:24.620 --> 00:09:29.260 which this clearly is, that this keyword must be undefined. 159 00:09:29.260 --> 00:09:33.120 And so therefore it is undefined right here. 160 00:09:33.120 --> 00:09:37.300 So this is just as if this function was outside 161 00:09:37.300 --> 00:09:38.550 of this method. 162 00:09:38.550 --> 00:09:40.630 So if we copy this function out here, 163 00:09:40.630 --> 00:09:43.013 we would get the exact same result. 164 00:09:43.870 --> 00:09:48.450 Now some people consider that this is a bug in JavaScript 165 00:09:48.450 --> 00:09:51.060 but in my opinion, it's not really. 166 00:09:51.060 --> 00:09:53.700 It's just how the this keyword works. 167 00:09:53.700 --> 00:09:57.200 It's a clear rule that a regular function call 168 00:09:57.200 --> 00:09:59.860 has the this keyword set to undefined. 169 00:09:59.860 --> 00:10:02.820 And so that's just what is happening here. 170 00:10:02.820 --> 00:10:06.350 Now there are two solutions to this problem. 171 00:10:06.350 --> 00:10:09.513 The first solution is to use an extra variable 172 00:10:09.513 --> 00:10:12.143 that we usually call self. 173 00:10:13.300 --> 00:10:17.510 So outside of the function, let's say self 174 00:10:17.510 --> 00:10:20.710 and then we set that to this. 175 00:10:20.710 --> 00:10:23.200 Because here we are still outside 176 00:10:23.200 --> 00:10:25.960 of this isMillennial function. 177 00:10:25.960 --> 00:10:29.210 And so here, we still have access to this keyword 178 00:10:29.210 --> 00:10:31.630 set to Jonas. Right? 179 00:10:31.630 --> 00:10:35.473 And so then in here, we can use simply self. 180 00:10:37.800 --> 00:10:39.520 And let's do that just here. 181 00:10:39.520 --> 00:10:42.320 And here I will duplicate this line 182 00:10:44.410 --> 00:10:47.203 so that we can keep the original one. 183 00:10:49.680 --> 00:10:51.930 And so now let's use self here. 184 00:10:51.930 --> 00:10:54.430 And so then through the scope chain, 185 00:10:54.430 --> 00:10:57.920 this self will be equal to this. 186 00:10:57.920 --> 00:11:00.200 So self is referenced here, 187 00:11:00.200 --> 00:11:02.580 but it's not of course in the scope. 188 00:11:02.580 --> 00:11:05.130 And so JavaScript goes up the scope chain, 189 00:11:05.130 --> 00:11:08.240 into the parent scope, which is calcAge. 190 00:11:08.240 --> 00:11:13.240 So here is where self is defined, and it is defined as this. 191 00:11:13.673 --> 00:11:14.837 So as to this keyword. 192 00:11:14.837 --> 00:11:17.810 And so this is a way in which we can preserve 193 00:11:17.810 --> 00:11:18.793 the this keyword. 194 00:11:19.930 --> 00:11:24.930 This can also be called debt, so that you might also see. 195 00:11:25.920 --> 00:11:29.590 And so as we reload, now, this actually works. 196 00:11:29.590 --> 00:11:32.430 So now we get the value of true. 197 00:11:32.430 --> 00:11:36.170 So this was kind of the pre ES6 solution, 198 00:11:36.170 --> 00:11:38.970 but you might still find this solution 199 00:11:38.970 --> 00:11:40.940 in some older code bases. 200 00:11:40.940 --> 00:11:44.950 However, now in ES6 we have a more modern 201 00:11:44.950 --> 00:11:46.490 and better solution. 202 00:11:46.490 --> 00:11:50.693 And that solution is to use an arrow function. Alright. 203 00:11:52.780 --> 00:11:55.563 So let's actually copy all of this, 204 00:11:56.500 --> 00:11:59.993 because I want to preserve both versions here. 205 00:12:01.860 --> 00:12:04.233 And now I will just comment out this first. 206 00:12:05.700 --> 00:12:07.113 Let's say solution one, 207 00:12:09.500 --> 00:12:11.310 but now here we have solution two, 208 00:12:11.310 --> 00:12:15.083 which does not need this extra variable. 209 00:12:17.980 --> 00:12:21.020 Okay, so let's get rid of this 210 00:12:22.040 --> 00:12:26.010 bring this back and here this again. 211 00:12:26.010 --> 00:12:28.830 And now, again, the solution to the problem 212 00:12:28.830 --> 00:12:32.890 that we saw before is that we can now use an arrow function. 213 00:12:32.890 --> 00:12:35.940 And that is going to work because the arrow function 214 00:12:35.940 --> 00:12:40.940 does not have its own this keyword. Right? 215 00:12:40.940 --> 00:12:44.440 So let's remember again, that when we just call this, 216 00:12:44.440 --> 00:12:47.890 we get that to this keyword is undefined. 217 00:12:47.890 --> 00:12:50.020 And that's because a regular function 218 00:12:50.020 --> 00:12:52.260 gets its own this keyword. 219 00:12:52.260 --> 00:12:54.340 But the arrow function will not, 220 00:12:54.340 --> 00:12:57.810 it will simply use this keyword of its parent scope. 221 00:12:57.810 --> 00:13:01.990 And in this case, that will be the calcAge method, 222 00:13:01.990 --> 00:13:06.510 and in here the this keyword is Jonas, so the Jonas object. 223 00:13:06.510 --> 00:13:09.600 And therefore then here in an arrow function, 224 00:13:09.600 --> 00:13:11.453 that would also be the this keyword. 225 00:13:12.810 --> 00:13:15.433 And then it is gonna work as expected, 226 00:13:16.470 --> 00:13:18.650 and indeed, now it is true. 227 00:13:18.650 --> 00:13:21.470 And again, this worked because this arrow function 228 00:13:21.470 --> 00:13:25.030 uses the this keyword from its parent scope. 229 00:13:25.030 --> 00:13:27.260 And in this case, in the parent scope, 230 00:13:27.260 --> 00:13:29.730 the this keyword is Jonas. 231 00:13:29.730 --> 00:13:33.750 So basically an arrow function inherits the this keyword 232 00:13:33.750 --> 00:13:35.710 from the parent scope. 233 00:13:35.710 --> 00:13:39.780 And that is exactly what we need here. All right. 234 00:13:39.780 --> 00:13:42.650 And so here, you see that it's pretty important 235 00:13:42.650 --> 00:13:46.810 to know exactly how each of the different type of functions 236 00:13:46.810 --> 00:13:49.750 work in regards to the this keyword. 237 00:13:49.750 --> 00:13:52.720 Because then you can really use them according 238 00:13:52.720 --> 00:13:55.340 to your specific needs. 239 00:13:55.340 --> 00:13:58.760 Great. So I hope that especially this solution here 240 00:13:58.760 --> 00:14:00.420 made sense to you. 241 00:14:00.420 --> 00:14:03.730 And that when you need it at some point in your journey, 242 00:14:03.730 --> 00:14:08.060 or in your job, you can remember that this is a very useful 243 00:14:08.060 --> 00:14:10.363 use case of the arrow function. 244 00:14:11.530 --> 00:14:13.560 Now, just to finish this lecture, 245 00:14:13.560 --> 00:14:17.980 I also want to quickly touch on the arguments keywords. 246 00:14:17.980 --> 00:14:21.310 Maybe you remember me talking about that, 247 00:14:21.310 --> 00:14:23.630 also in a previous lecture. 248 00:14:23.630 --> 00:14:26.500 So in the video about execution context, 249 00:14:26.500 --> 00:14:27.870 and the call stack, 250 00:14:27.870 --> 00:14:30.850 we learned that functions also get access 251 00:14:30.850 --> 00:14:33.010 to an arguments keyword. 252 00:14:33.010 --> 00:14:37.300 So not just the this keyword, but also an arguments keyword. 253 00:14:37.300 --> 00:14:41.420 Now, just like the this keyword, the arguments keyword 254 00:14:41.420 --> 00:14:44.720 is only available in regular functions. 255 00:14:44.720 --> 00:14:49.103 So let's create another function here. 256 00:14:50.200 --> 00:14:51.713 So first an expression. 257 00:14:52.760 --> 00:14:55.610 So again, basically that's our functions for adding 258 00:14:55.610 --> 00:14:58.363 and actually let me just grab them from here. 259 00:14:59.460 --> 00:15:02.023 I think I defined them somewhere up here. 260 00:15:03.280 --> 00:15:04.113 Yes. 261 00:15:04.990 --> 00:15:06.460 So there's no need to rewrite 262 00:15:07.690 --> 00:15:09.483 the same code over and over again. 263 00:15:10.650 --> 00:15:12.223 Just add a comment here, 264 00:15:13.220 --> 00:15:15.633 arguments keyword. 265 00:15:18.170 --> 00:15:23.170 And then let me also print to the console, that keyword. 266 00:15:25.470 --> 00:15:27.923 So let me quickly call this function here now. 267 00:15:29.080 --> 00:15:31.930 So two and five 268 00:15:31.930 --> 00:15:35.180 so just so we see the arguments keyword. 269 00:15:35.180 --> 00:15:36.810 And so down here it is 270 00:15:36.810 --> 00:15:40.370 and you see that we get basically an array 271 00:15:40.370 --> 00:15:42.800 with two and five. 272 00:15:42.800 --> 00:15:47.120 And so that's exactly the two parameters that we passed in. 273 00:15:47.120 --> 00:15:49.690 And this can be useful when we need a function 274 00:15:49.690 --> 00:15:53.443 to accept more parameters than we actually specified. 275 00:15:54.740 --> 00:15:57.053 So this is something that we never did before. 276 00:15:59.720 --> 00:16:02.660 So up until this point, we have only ever specified 277 00:16:02.660 --> 00:16:07.080 exactly the arguments that we have here in the list 278 00:16:07.080 --> 00:16:08.480 of parameters. 279 00:16:08.480 --> 00:16:11.670 So we have two parameters, and so two arguments. 280 00:16:11.670 --> 00:16:16.280 But it is completely legal to add more arguments. 281 00:16:16.280 --> 00:16:19.120 They will not have a name, so we didn't name them, 282 00:16:19.120 --> 00:16:20.280 but they exist. 283 00:16:20.280 --> 00:16:25.280 And we can see them here in the arguments array. All right. 284 00:16:25.850 --> 00:16:28.310 So they do appear here, and we can use them 285 00:16:28.310 --> 00:16:30.330 therefore in the functions. 286 00:16:30.330 --> 00:16:32.290 For example, we could use a loop, 287 00:16:32.290 --> 00:16:34.670 and then loop over this array 288 00:16:34.670 --> 00:16:37.450 and add all the numbers together. 289 00:16:37.450 --> 00:16:40.740 But now my point here is that the arrow function 290 00:16:40.740 --> 00:16:43.030 does not get this keyword. 291 00:16:43.030 --> 00:16:45.360 So that's also log it to the console here 292 00:16:45.360 --> 00:16:50.350 so let's put this here in curly braces, 293 00:16:50.350 --> 00:16:53.410 then remember when we have more than one line of code, 294 00:16:53.410 --> 00:16:55.363 we need to explicitly return. 295 00:16:58.030 --> 00:17:02.950 And so let's try to take a look at the arguments keyword 296 00:17:02.950 --> 00:17:04.690 here as well. 297 00:17:04.690 --> 00:17:09.690 So add arrow two, five, eight, let's say, 298 00:17:09.950 --> 00:17:11.870 but then we get an error. 299 00:17:11.870 --> 00:17:15.820 So arguments is not defined. All right. 300 00:17:15.820 --> 00:17:18.090 So this was simply just to show you 301 00:17:18.090 --> 00:17:20.930 that the arguments keyword exists, 302 00:17:20.930 --> 00:17:24.220 but that it only exists in regular functions. 303 00:17:24.220 --> 00:17:26.570 So in function expressions like this, 304 00:17:26.570 --> 00:17:28.690 but also in function declarations, 305 00:17:28.690 --> 00:17:30.663 but not in an arrow function. 306 00:17:31.500 --> 00:17:35.020 But anyway, the arguments keyword is not that important 307 00:17:35.020 --> 00:17:37.210 in modern JavaScript anymore, 308 00:17:37.210 --> 00:17:40.000 because now we have a more modern way 309 00:17:40.000 --> 00:17:42.500 of dealing with multiple parameters. 310 00:17:42.500 --> 00:17:45.130 But still it's important that you are aware 311 00:17:45.130 --> 00:17:49.250 that this arguments keywords exists. 312 00:17:49.250 --> 00:17:52.280 All right, and now with all these lectures 313 00:17:52.280 --> 00:17:55.460 on regular functions and arrow functions, 314 00:17:55.460 --> 00:17:58.150 you should know all the differences between them, 315 00:17:58.150 --> 00:18:01.683 and even more importantly, when to use each of them.