Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,400 --> 00:00:03,840 Let me now show you some pitfalls 2 2 00:00:03,840 --> 00:00:07,550 of the this keyword related to regular functions 3 3 00:00:07,550 --> 00:00:09,460 and arrow functions. 4 4 00:00:09,460 --> 00:00:13,330 This way we can learn when we should use and avoid 5 5 00:00:13,330 --> 00:00:14,163 each of them. 6 6 00:00:15,660 --> 00:00:19,260 And to start, let's get back the Jonas object 7 7 00:00:19,260 --> 00:00:20,463 from before, 8 8 00:00:24,400 --> 00:00:26,913 and I will also add a first name property. 9 9 00:00:32,240 --> 00:00:36,750 All right, and now let's add a second method here, 10 10 00:00:36,750 --> 00:00:39,490 but this time using an arrow function. 11 11 00:00:39,490 --> 00:00:43,320 So we will do a very simple greet method. 12 12 00:00:43,320 --> 00:00:45,980 And so an arrow function here, 13 13 00:00:45,980 --> 00:00:47,900 which simply logs to the console 14 14 00:00:49,240 --> 00:00:52,700 Hey, and then the name. 15 15 00:00:52,700 --> 00:00:57,370 And so we're gonna take this name from the object. 16 16 00:00:57,370 --> 00:01:00,890 So this dot first name, 17 17 00:01:00,890 --> 00:01:03,633 or at least, that's what we think we're doing. 18 18 00:01:05,410 --> 00:01:08,180 So let me now show you what happens, 19 19 00:01:08,180 --> 00:01:12,700 as I call jonas.greet. 20 20 00:01:12,700 --> 00:01:16,610 And maybe you can also anticipate it based on the knowledge 21 21 00:01:16,610 --> 00:01:19,440 that you already have off the this keywords 22 22 00:01:19,440 --> 00:01:21,780 when used in an arrow function. 23 23 00:01:21,780 --> 00:01:24,460 So let's see what the result is here. 24 24 00:01:24,460 --> 00:01:27,800 And we get, Hey undefined. 25 25 00:01:27,800 --> 00:01:32,450 So that's not Hey Jonas, as we might have expected. 26 26 00:01:32,450 --> 00:01:35,560 And the reason is exactly the one that I mentioned 27 27 00:01:35,560 --> 00:01:36,810 in the last lecture, 28 28 00:01:36,810 --> 00:01:39,510 which is the fact that an arrow function 29 29 00:01:39,510 --> 00:01:42,340 does not get its own this keyword, 30 30 00:01:42,340 --> 00:01:46,060 it will simply use the this keyword from its surroundings. 31 31 00:01:46,060 --> 00:01:49,760 So in other words, its parents this keyword, 32 32 00:01:49,760 --> 00:01:53,130 and the parent scope of this greet method 33 33 00:01:53,130 --> 00:01:56,203 is the global scope. Okay? 34 34 00:01:57,140 --> 00:02:02,140 Just note here that this is actually not a code block. 35 35 00:02:02,280 --> 00:02:06,470 So you might think that, like this kind of block here, 36 36 00:02:06,470 --> 00:02:10,360 ought to create its own scope, but it doesn't. 37 37 00:02:10,360 --> 00:02:14,080 So this is not a code block. It is an object literal. 38 38 00:02:14,080 --> 00:02:19,070 So it's just a way that we literally define objects. Okay? 39 39 00:02:19,070 --> 00:02:23,090 So all of this here is in the global scope still. 40 40 00:02:23,090 --> 00:02:26,690 And so therefore, that includes this greet method. 41 41 00:02:26,690 --> 00:02:28,200 It is in the global scope, 42 42 00:02:28,200 --> 00:02:31,430 and so therefore, the arrow function here, 43 43 00:02:31,430 --> 00:02:34,180 which does not have its own this keyword, 44 44 00:02:34,180 --> 00:02:37,490 will use the this keyword from the global scope. 45 45 00:02:37,490 --> 00:02:41,407 And remember that is the window object. Right? 46 46 00:02:43,440 --> 00:02:48,440 And so this dot first name is also undefined. 47 47 00:02:49,430 --> 00:02:52,570 And I think that this is actually something 48 48 00:02:52,570 --> 00:02:54,390 that we haven't seen before. 49 49 00:02:54,390 --> 00:02:57,790 So when we try to access a property that doesn't exist 50 50 00:02:57,790 --> 00:03:01,290 on a certain object, we do not get an error, 51 51 00:03:01,290 --> 00:03:03,120 but simply undefined. 52 52 00:03:03,120 --> 00:03:05,190 And so that is what is happening here. 53 53 00:03:05,190 --> 00:03:07,020 That's why we get undefined, 54 54 00:03:07,020 --> 00:03:09,783 because this is the window object, 55 55 00:03:10,700 --> 00:03:14,800 so just as we saw before, and then on the window object, 56 56 00:03:14,800 --> 00:03:18,503 there is no first name, and so we get undefined. Okay? 57 57 00:03:21,190 --> 00:03:24,600 And actually, this behavior can become pretty dangerous, 58 58 00:03:24,600 --> 00:03:28,030 in case we use var, to declare variables. 59 59 00:03:28,030 --> 00:03:30,880 Because remember from a previous lecture, 60 60 00:03:30,880 --> 00:03:35,290 that variables declared with var, actually create properties 61 61 00:03:35,290 --> 00:03:37,030 on the global object. 62 62 00:03:37,030 --> 00:03:39,323 And so let's imagine we have this. 63 63 00:03:40,760 --> 00:03:45,633 So var first name equals Matilda. 64 64 00:03:47,980 --> 00:03:51,560 And so now as we run the greet function, 65 65 00:03:51,560 --> 00:03:55,310 it will say, Hey Matilda, okay? 66 66 00:03:55,310 --> 00:03:57,240 So why is that? 67 67 00:03:57,240 --> 00:04:01,180 So again, it is because inside of this function here, 68 68 00:04:01,180 --> 00:04:03,830 the this keyword is window. 69 69 00:04:03,830 --> 00:04:07,483 And actually, let me print that here to the console as well, 70 70 00:04:08,710 --> 00:04:12,633 just so we can really see that here happening. Okay. 71 71 00:04:15,495 --> 00:04:19,578 So again, window is this keyword inside 72 72 00:04:19,578 --> 00:04:24,350 of this arrow function, even though that arrow function 73 73 00:04:24,350 --> 00:04:27,470 was called by the Jonas object. 74 74 00:04:27,470 --> 00:04:29,810 But that rule does not apply here, 75 75 00:04:29,810 --> 00:04:32,910 because again, it's an arrow function. 76 76 00:04:32,910 --> 00:04:36,930 And so if we take a look at this window object now, 77 77 00:04:36,930 --> 00:04:41,560 and here, close to F, for first name, 78 78 00:04:41,560 --> 00:04:44,860 you see here, that it does indeed have a property 79 79 00:04:44,860 --> 00:04:48,240 called first name with the value of Matilda. 80 80 00:04:48,240 --> 00:04:52,490 And again, that's because if we declare variables with var, 81 81 00:04:52,490 --> 00:04:56,530 that creates these kind of properties on the global object. 82 82 00:04:56,530 --> 00:04:59,190 And so therefore, this dot first name, 83 83 00:04:59,190 --> 00:05:04,190 which translates to window dot first name is then Matilda. 84 84 00:05:04,630 --> 00:05:08,180 And so that's why we then get Hey Matilda here. 85 85 00:05:08,180 --> 00:05:12,830 So that's yet another reason not to use var. 86 86 00:05:12,830 --> 00:05:17,310 So you see there's a pretty long list against var. 87 87 00:05:17,310 --> 00:05:19,570 So from this example, the big takeaway 88 88 00:05:19,570 --> 00:05:22,070 is that as a best practice, 89 89 00:05:22,070 --> 00:05:26,920 you should never ever use an arrow function as a method. 90 90 00:05:26,920 --> 00:05:30,690 And in my opinion, that's even true if you're not even using 91 91 00:05:30,690 --> 00:05:33,740 the this keyword in a particular method. 92 92 00:05:33,740 --> 00:05:36,720 Because if you have this rule of never using an arrow 93 93 00:05:36,720 --> 00:05:40,460 function as a method, then you never have to think about 94 94 00:05:40,460 --> 00:05:42,820 which type of function you should use. 95 95 00:05:42,820 --> 00:05:46,040 You will always just use a normal function expression, 96 96 00:05:46,040 --> 00:05:49,590 and like this, you will then prevent this kind of mistakes 97 97 00:05:49,590 --> 00:05:51,210 from happen. 98 98 00:05:51,210 --> 00:05:54,270 So this mistake that we saw here with Hey Matilda 99 99 00:05:54,270 --> 00:05:57,563 is easy to prevent by simply not using var. 100 100 00:05:58,610 --> 00:06:02,200 But even then, Hey undefined is still a buck. 101 101 00:06:02,200 --> 00:06:03,760 It's still not correct. 102 102 00:06:03,760 --> 00:06:05,960 And so that would have easily been avoided 103 103 00:06:05,960 --> 00:06:10,960 by just using a regular function. Right? 104 104 00:06:11,040 --> 00:06:16,040 If we had this, then of course now this object Jonas, 105 105 00:06:16,580 --> 00:06:18,240 which is calling the function 106 106 00:06:18,240 --> 00:06:22,630 would then be the this keyword. Right? 107 107 00:06:22,630 --> 00:06:25,840 So you see first name Jonas, and then Hey Jonas. 108 108 00:06:25,840 --> 00:06:28,980 Because now this method actually does get its own 109 109 00:06:28,980 --> 00:06:29,813 this keyword. 110 110 00:06:30,700 --> 00:06:31,883 But let's put it back. 111 111 00:06:33,870 --> 00:06:37,870 And, Okay. Great. 112 112 00:06:37,870 --> 00:06:42,510 And now, one final example of a pitfall of this keyword 113 113 00:06:42,510 --> 00:06:46,210 is when we have a function inside of a method. 114 114 00:06:46,210 --> 00:06:49,300 And that is a pretty common thing to happen. 115 115 00:06:49,300 --> 00:06:53,930 And so let's now take a look at an example of that. 116 116 00:06:53,930 --> 00:06:56,793 So let's create another Jonas object here. 117 117 00:06:57,840 --> 00:06:59,570 Or, actually don't. 118 118 00:06:59,570 --> 00:07:02,670 Actually let's just use this object here 119 119 00:07:02,670 --> 00:07:04,100 that we already have. 120 120 00:07:04,100 --> 00:07:07,730 And let's enhance this calcAge method. 121 121 00:07:07,730 --> 00:07:10,890 So what I want in here is a function 122 122 00:07:10,890 --> 00:07:15,360 that will basically return if the person is a millennial. 123 123 00:07:15,360 --> 00:07:17,730 So easy enough, 124 124 00:07:17,730 --> 00:07:22,653 let's create an isMillennial function in here. 125 125 00:07:28,190 --> 00:07:31,890 And let's simply log to the console, 126 126 00:07:31,890 --> 00:07:36,890 if this dot year is greater equal 1981, 127 127 00:07:38,800 --> 00:07:41,180 and so that's the same rule that we used before, 128 128 00:07:41,180 --> 00:07:46,133 so that the birth year needs to stay between 1981 and 1996. 129 129 00:07:48,920 --> 00:07:52,240 So below 1996. 130 130 00:07:52,240 --> 00:07:56,430 And then let's also call that function right here. 131 131 00:07:56,430 --> 00:07:59,780 So isMillennial will be called 132 132 00:07:59,780 --> 00:08:01,713 as we called the calcAge function. 133 133 00:08:02,660 --> 00:08:05,150 So let's also do that. 134 134 00:08:05,150 --> 00:08:07,440 So Jonas dot calcAge 135 135 00:08:09,180 --> 00:08:12,450 So we're calling this method here, the calcAge method, 136 136 00:08:12,450 --> 00:08:16,730 which is a regular method, so not an arrow function. 137 137 00:08:16,730 --> 00:08:19,540 And so therefore, the this keyword right here 138 138 00:08:19,540 --> 00:08:21,620 should be the Jonas object. 139 139 00:08:21,620 --> 00:08:26,350 But then in here, we have a regular function, so this one, 140 140 00:08:26,350 --> 00:08:29,580 and here we are then calling it again. 141 141 00:08:29,580 --> 00:08:33,310 Now inside of this function, we are using the this keyword. 142 142 00:08:33,310 --> 00:08:36,773 And so let's now see what happens as we reload the page. 143 143 00:08:38,210 --> 00:08:42,780 And we get cannot read property year of undefined 144 144 00:08:42,780 --> 00:08:45,350 on line 138. 145 145 00:08:45,350 --> 00:08:47,400 So that's right here. 146 146 00:08:47,400 --> 00:08:50,520 So what this means is that the this keyword 147 147 00:08:50,520 --> 00:08:52,130 must be undefined. 148 148 00:08:52,130 --> 00:08:54,000 That's what it says here. 149 149 00:08:54,000 --> 00:08:56,033 So let's just log that as well, 150 150 00:08:57,500 --> 00:09:02,500 and here, we can get rid of this one now, okay. 151 151 00:09:02,560 --> 00:09:06,580 And indeed, the this key word here is undefined. 152 152 00:09:06,580 --> 00:09:08,620 So why is that? 153 153 00:09:08,620 --> 00:09:11,860 Well, if we think about this, then this here 154 154 00:09:11,860 --> 00:09:15,410 is really just a regular function call, isn't it? 155 155 00:09:15,410 --> 00:09:17,310 It is a regular function call, 156 156 00:09:17,310 --> 00:09:20,960 even though it happens inside of a method. 157 157 00:09:20,960 --> 00:09:24,620 And the rule says that inside a regular function call, 158 158 00:09:24,620 --> 00:09:29,260 which this clearly is, that this keyword must be undefined. 159 159 00:09:29,260 --> 00:09:33,120 And so therefore it is undefined right here. 160 160 00:09:33,120 --> 00:09:37,300 So this is just as if this function was outside 161 161 00:09:37,300 --> 00:09:38,550 of this method. 162 162 00:09:38,550 --> 00:09:40,630 So if we copy this function out here, 163 163 00:09:40,630 --> 00:09:43,013 we would get the exact same result. 164 164 00:09:43,870 --> 00:09:48,450 Now some people consider that this is a bug in JavaScript 165 165 00:09:48,450 --> 00:09:51,060 but in my opinion, it's not really. 166 166 00:09:51,060 --> 00:09:53,700 It's just how the this keyword works. 167 167 00:09:53,700 --> 00:09:57,200 It's a clear rule that a regular function call 168 168 00:09:57,200 --> 00:09:59,860 has the this keyword set to undefined. 169 169 00:09:59,860 --> 00:10:02,820 And so that's just what is happening here. 170 170 00:10:02,820 --> 00:10:06,350 Now there are two solutions to this problem. 171 171 00:10:06,350 --> 00:10:09,513 The first solution is to use an extra variable 172 172 00:10:09,513 --> 00:10:12,143 that we usually call self. 173 173 00:10:13,300 --> 00:10:17,510 So outside of the function, let's say self 174 174 00:10:17,510 --> 00:10:20,710 and then we set that to this. 175 175 00:10:20,710 --> 00:10:23,200 Because here we are still outside 176 176 00:10:23,200 --> 00:10:25,960 of this isMillennial function. 177 177 00:10:25,960 --> 00:10:29,210 And so here, we still have access to this keyword 178 178 00:10:29,210 --> 00:10:31,630 set to Jonas. Right? 179 179 00:10:31,630 --> 00:10:35,473 And so then in here, we can use simply self. 180 180 00:10:37,800 --> 00:10:39,520 And let's do that just here. 181 181 00:10:39,520 --> 00:10:42,320 And here I will duplicate this line 182 182 00:10:44,410 --> 00:10:47,203 so that we can keep the original one. 183 183 00:10:49,680 --> 00:10:51,930 And so now let's use self here. 184 184 00:10:51,930 --> 00:10:54,430 And so then through the scope chain, 185 185 00:10:54,430 --> 00:10:57,920 this self will be equal to this. 186 186 00:10:57,920 --> 00:11:00,200 So self is referenced here, 187 187 00:11:00,200 --> 00:11:02,580 but it's not of course in the scope. 188 188 00:11:02,580 --> 00:11:05,130 And so JavaScript goes up the scope chain, 189 189 00:11:05,130 --> 00:11:08,240 into the parent scope, which is calcAge. 190 190 00:11:08,240 --> 00:11:13,240 So here is where self is defined, and it is defined as this. 191 191 00:11:13,673 --> 00:11:14,837 So as to this keyword. 192 192 00:11:14,837 --> 00:11:17,810 And so this is a way in which we can preserve 193 193 00:11:17,810 --> 00:11:18,793 the this keyword. 194 194 00:11:19,930 --> 00:11:24,930 This can also be called debt, so that you might also see. 195 195 00:11:25,920 --> 00:11:29,590 And so as we reload, now, this actually works. 196 196 00:11:29,590 --> 00:11:32,430 So now we get the value of true. 197 197 00:11:32,430 --> 00:11:36,170 So this was kind of the pre ES6 solution, 198 198 00:11:36,170 --> 00:11:38,970 but you might still find this solution 199 199 00:11:38,970 --> 00:11:40,940 in some older code bases. 200 200 00:11:40,940 --> 00:11:44,950 However, now in ES6 we have a more modern 201 201 00:11:44,950 --> 00:11:46,490 and better solution. 202 202 00:11:46,490 --> 00:11:50,693 And that solution is to use an arrow function. Alright. 203 203 00:11:52,780 --> 00:11:55,563 So let's actually copy all of this, 204 204 00:11:56,500 --> 00:11:59,993 because I want to preserve both versions here. 205 205 00:12:01,860 --> 00:12:04,233 And now I will just comment out this first. 206 206 00:12:05,700 --> 00:12:07,113 Let's say solution one, 207 207 00:12:09,500 --> 00:12:11,310 but now here we have solution two, 208 208 00:12:11,310 --> 00:12:15,083 which does not need this extra variable. 209 209 00:12:17,980 --> 00:12:21,020 Okay, so let's get rid of this 210 210 00:12:22,040 --> 00:12:26,010 bring this back and here this again. 211 211 00:12:26,010 --> 00:12:28,830 And now, again, the solution to the problem 212 212 00:12:28,830 --> 00:12:32,890 that we saw before is that we can now use an arrow function. 213 213 00:12:32,890 --> 00:12:35,940 And that is going to work because the arrow function 214 214 00:12:35,940 --> 00:12:40,940 does not have its own this keyword. Right? 215 215 00:12:40,940 --> 00:12:44,440 So let's remember again, that when we just call this, 216 216 00:12:44,440 --> 00:12:47,890 we get that to this keyword is undefined. 217 217 00:12:47,890 --> 00:12:50,020 And that's because a regular function 218 218 00:12:50,020 --> 00:12:52,260 gets its own this keyword. 219 219 00:12:52,260 --> 00:12:54,340 But the arrow function will not, 220 220 00:12:54,340 --> 00:12:57,810 it will simply use this keyword of its parent scope. 221 221 00:12:57,810 --> 00:13:01,990 And in this case, that will be the calcAge method, 222 222 00:13:01,990 --> 00:13:06,510 and in here the this keyword is Jonas, so the Jonas object. 223 223 00:13:06,510 --> 00:13:09,600 And therefore then here in an arrow function, 224 224 00:13:09,600 --> 00:13:11,453 that would also be the this keyword. 225 225 00:13:12,810 --> 00:13:15,433 And then it is gonna work as expected, 226 226 00:13:16,470 --> 00:13:18,650 and indeed, now it is true. 227 227 00:13:18,650 --> 00:13:21,470 And again, this worked because this arrow function 228 228 00:13:21,470 --> 00:13:25,030 uses the this keyword from its parent scope. 229 229 00:13:25,030 --> 00:13:27,260 And in this case, in the parent scope, 230 230 00:13:27,260 --> 00:13:29,730 the this keyword is Jonas. 231 231 00:13:29,730 --> 00:13:33,750 So basically an arrow function inherits the this keyword 232 232 00:13:33,750 --> 00:13:35,710 from the parent scope. 233 233 00:13:35,710 --> 00:13:39,780 And that is exactly what we need here. All right. 234 234 00:13:39,780 --> 00:13:42,650 And so here, you see that it's pretty important 235 235 00:13:42,650 --> 00:13:46,810 to know exactly how each of the different type of functions 236 236 00:13:46,810 --> 00:13:49,750 work in regards to the this keyword. 237 237 00:13:49,750 --> 00:13:52,720 Because then you can really use them according 238 238 00:13:52,720 --> 00:13:55,340 to your specific needs. 239 239 00:13:55,340 --> 00:13:58,760 Great. So I hope that especially this solution here 240 240 00:13:58,760 --> 00:14:00,420 made sense to you. 241 241 00:14:00,420 --> 00:14:03,730 And that when you need it at some point in your journey, 242 242 00:14:03,730 --> 00:14:08,060 or in your job, you can remember that this is a very useful 243 243 00:14:08,060 --> 00:14:10,363 use case of the arrow function. 244 244 00:14:11,530 --> 00:14:13,560 Now, just to finish this lecture, 245 245 00:14:13,560 --> 00:14:17,980 I also want to quickly touch on the arguments keywords. 246 246 00:14:17,980 --> 00:14:21,310 Maybe you remember me talking about that, 247 247 00:14:21,310 --> 00:14:23,630 also in a previous lecture. 248 248 00:14:23,630 --> 00:14:26,500 So in the video about execution context, 249 249 00:14:26,500 --> 00:14:27,870 and the call stack, 250 250 00:14:27,870 --> 00:14:30,850 we learned that functions also get access 251 251 00:14:30,850 --> 00:14:33,010 to an arguments keyword. 252 252 00:14:33,010 --> 00:14:37,300 So not just the this keyword, but also an arguments keyword. 253 253 00:14:37,300 --> 00:14:41,420 Now, just like the this keyword, the arguments keyword 254 254 00:14:41,420 --> 00:14:44,720 is only available in regular functions. 255 255 00:14:44,720 --> 00:14:49,103 So let's create another function here. 256 256 00:14:50,200 --> 00:14:51,713 So first an expression. 257 257 00:14:52,760 --> 00:14:55,610 So again, basically that's our functions for adding 258 258 00:14:55,610 --> 00:14:58,363 and actually let me just grab them from here. 259 259 00:14:59,460 --> 00:15:02,023 I think I defined them somewhere up here. 260 260 00:15:03,280 --> 00:15:04,113 Yes. 261 261 00:15:04,990 --> 00:15:06,460 So there's no need to rewrite 262 262 00:15:07,690 --> 00:15:09,483 the same code over and over again. 263 263 00:15:10,650 --> 00:15:12,223 Just add a comment here, 264 264 00:15:13,220 --> 00:15:15,633 arguments keyword. 265 265 00:15:18,170 --> 00:15:23,170 And then let me also print to the console, that keyword. 266 266 00:15:25,470 --> 00:15:27,923 So let me quickly call this function here now. 267 267 00:15:29,080 --> 00:15:31,930 So two and five 268 268 00:15:31,930 --> 00:15:35,180 so just so we see the arguments keyword. 269 269 00:15:35,180 --> 00:15:36,810 And so down here it is 270 270 00:15:36,810 --> 00:15:40,370 and you see that we get basically an array 271 271 00:15:40,370 --> 00:15:42,800 with two and five. 272 272 00:15:42,800 --> 00:15:47,120 And so that's exactly the two parameters that we passed in. 273 273 00:15:47,120 --> 00:15:49,690 And this can be useful when we need a function 274 274 00:15:49,690 --> 00:15:53,443 to accept more parameters than we actually specified. 275 275 00:15:54,740 --> 00:15:57,053 So this is something that we never did before. 276 276 00:15:59,720 --> 00:16:02,660 So up until this point, we have only ever specified 277 277 00:16:02,660 --> 00:16:07,080 exactly the arguments that we have here in the list 278 278 00:16:07,080 --> 00:16:08,480 of parameters. 279 279 00:16:08,480 --> 00:16:11,670 So we have two parameters, and so two arguments. 280 280 00:16:11,670 --> 00:16:16,280 But it is completely legal to add more arguments. 281 281 00:16:16,280 --> 00:16:19,120 They will not have a name, so we didn't name them, 282 282 00:16:19,120 --> 00:16:20,280 but they exist. 283 283 00:16:20,280 --> 00:16:25,280 And we can see them here in the arguments array. All right. 284 284 00:16:25,850 --> 00:16:28,310 So they do appear here, and we can use them 285 285 00:16:28,310 --> 00:16:30,330 therefore in the functions. 286 286 00:16:30,330 --> 00:16:32,290 For example, we could use a loop, 287 287 00:16:32,290 --> 00:16:34,670 and then loop over this array 288 288 00:16:34,670 --> 00:16:37,450 and add all the numbers together. 289 289 00:16:37,450 --> 00:16:40,740 But now my point here is that the arrow function 290 290 00:16:40,740 --> 00:16:43,030 does not get this keyword. 291 291 00:16:43,030 --> 00:16:45,360 So that's also log it to the console here 292 292 00:16:45,360 --> 00:16:50,350 so let's put this here in curly braces, 293 293 00:16:50,350 --> 00:16:53,410 then remember when we have more than one line of code, 294 294 00:16:53,410 --> 00:16:55,363 we need to explicitly return. 295 295 00:16:58,030 --> 00:17:02,950 And so let's try to take a look at the arguments keyword 296 296 00:17:02,950 --> 00:17:04,690 here as well. 297 297 00:17:04,690 --> 00:17:09,690 So add arrow two, five, eight, let's say, 298 298 00:17:09,950 --> 00:17:11,870 but then we get an error. 299 299 00:17:11,870 --> 00:17:15,820 So arguments is not defined. All right. 300 300 00:17:15,820 --> 00:17:18,090 So this was simply just to show you 301 301 00:17:18,090 --> 00:17:20,930 that the arguments keyword exists, 302 302 00:17:20,930 --> 00:17:24,220 but that it only exists in regular functions. 303 303 00:17:24,220 --> 00:17:26,570 So in function expressions like this, 304 304 00:17:26,570 --> 00:17:28,690 but also in function declarations, 305 305 00:17:28,690 --> 00:17:30,663 but not in an arrow function. 306 306 00:17:31,500 --> 00:17:35,020 But anyway, the arguments keyword is not that important 307 307 00:17:35,020 --> 00:17:37,210 in modern JavaScript anymore, 308 308 00:17:37,210 --> 00:17:40,000 because now we have a more modern way 309 309 00:17:40,000 --> 00:17:42,500 of dealing with multiple parameters. 310 310 00:17:42,500 --> 00:17:45,130 But still it's important that you are aware 311 311 00:17:45,130 --> 00:17:49,250 that this arguments keywords exists. 312 312 00:17:49,250 --> 00:17:52,280 All right, and now with all these lectures 313 313 00:17:52,280 --> 00:17:55,460 on regular functions and arrow functions, 314 314 00:17:55,460 --> 00:17:58,150 you should know all the differences between them, 315 315 00:17:58,150 --> 00:18:01,683 and even more importantly, when to use each of them. 27654