 So what is this and how about this, is this even a function? What are those greater than or equals doing in the middle of my JavaScript? We're going to be talking about all of this on today's episode of browser neighbor. I know a lot of people get confused. In fact, I remember when I first started seeing these and I'm like, what the heck is that? I have a sample and everybody can get to this sample at the URL we'll show on the screen. But at the top, there's a couple of traditional functions. I could not figure out what you call a non-arrow function. It's either a regular function or a traditional function or just a function. They didn't go back and name the old type of function. But anyway, a couple of traditional ones. The first one is a named function. And the second one is an anonymous function that's been assigned to a variable. So kind of similar. Yep, I use both. You do. I do named functions more often, I think. Or anonymous functions, excuse me. You can actually combine them, by the way. You can put a name on your anonymous. Well, it's not anonymous anymore. But anyway, the advantages in the stack trace will show the names of the named functions. But anyway, the arrow function, there's four different formats that I know of anyway. And you can see them here. So the first one is kind of the whole enchilada. You've got arguments, and you've got a little body that you could put as many statements as you want. In this case, we're just returning the sum of these two. Let me just show the result tab. It's really simple, right? It's all about just showing the code. And then you, but then if you, all you want to do is a return statement, then you don't need the squigglies or the little braces or the return statement. You just put the output value. Right. And then if you don't have, if you only have one parameter, then you don't need the parentheses. Right. And then if you combine those, you get this very, very succinct little format, which is really useful in things like, you know, if you're going through an array or doing a map, you know, and you're just kind of creating a bunch of little transformations by passing in a function. Yeah, I think that could be super helpful for that. So yeah, so that's the main thing. I mean, there's a couple of other little things about them. One is there's the, you can't have a name for your error function. It's always anonymous. And they don't support the arguments array, which is a little obscure. But if you have a random number of arguments or whatever a variable number of arguments, you get this array inside of the function, you can't get those inside of arrow functions. Right. Right. We have that in .NET too. Yeah. When writing C sharp, you'd have the args from your host, your startup function, and you'd have the args and you could do something with it. So we're kind of used to having that. I don't know that I've really ever used it in JavaScript. I mean, not that I couldn't, I just don't have it. Yeah, right. I don't have any for very often. The other big difference is really about the this keyword, which is already confusing. Yeah. And so I guess I would invite people, as we go into the second sample here, I would invite people, if you'd like to see an entire episode dedicated to like, what is the meaning of this? You know? Yeah. Oh, what is the meaning of this? Yes. You know, drop us a comment because I think it's something that confuses a lot of people. In any case, this is, somebody had the idea that it was smarter to have the definition of the this keyword inside of a function be determined by how you call the function. So it's the opposite of encapsulation. It's like if I had something that was encapsulated and I took a piece out and put it somewhere else, just to randomize myself. At least that's the way I feel about it. Yeah. So here's an example. Here, I'm gonna add some HTML to the page and well, that's just a little utility function, but I'm really gonna create a mascot object. And so I'm gonna pick on Parker, the porcupine and the PNP mascot. And in a regular function, to this follows the normal binding rules. So get message, if I call it down here, mascot.getMessage, right? Get message one. I end up with, here comes, and it works, it pulls the name out of there. Whereas in the arrow function, let's see what happens. I get back invalid name. Right. And the only reason I get back invalid name is because I set window.name to be invalid name. Because before I did that, I got a big fat JavaScript or undefined, right? Right. And so that's an example where it's really, you know, kind of the traditional function sort of works better, it seems to. In that example, yeah. In that example, but then there's a counter example that I have, which is based on a callback. And arrow functions are really handy in callbacks. So here I have still window.name is invalid name, but now I'm gonna delay showing the output. So set alarm is gonna in one second or however many milliseconds, it's going to display the name. Right. You're saying, hey, I wanna time out in this many seconds. And so when it times out, it'll run the function. So we are calling it from a different context than we were the last time. Exactly. And that inner function is a traditional function. Right. And so this, what happens is that it doesn't work very well because I'll just fast forward to the hey invalid name time to wake up. Why didn't it work? Well, because set timeout, the contents of this is determined by what object it was called on. Yeah. And since set timeout doesn't really know about the mascot object. Right. It just sort of doesn't know what to do. So it gives you the global object or undefined depending on your context and what your strict mode and stuff like that. Whereas then the second example, we have a nice arrow function. Right. And that one, as you saw before works. And the reason that that works is because the this keyword is based on the outer function. So it's sort of being handled the same as a closure. In other words, the things that were outside of a nested function are available inside the nested function. Right. And so it sort of is more like a familiar to a C sharp developer, it just kind of seems to work because Parker, this dot name, the this was defined right here. Right. And because you have a traditional function because set alarm two is that traditional function like in our last example, it had in our last example, the this keyword was from the object. And so now by using an arrow function in your set timeout, you're getting that this context passed through into that arrow function. So this dot name, that means the same thing as it does for the traditional function. That's right. It makes perfect sense. Maybe. Well, once you know what you're doing, yes, I think it does make perfect sense, but figuring it out, maybe not so easy. Do you have any, any thoughts to add on all of this? Well, I think one of the, the sort of great things about the arrow functions, especially is when you're using certain frameworks, I'll use react as an example because it's one of the ones I do a lot. You end up having to, so for like HTML DOM events, you want to call a function from your event. And the this matters in that case, because as you were explaining, the context of this depends on how you're calling the function. And if you're calling it from an event, then the this is the DOM object and not the function that you're in or the class you're in or however you're calling that thing. And so by assigning a variable, and so we were sort of talking at the beginning, using the anonymous function, setting a variable name and then setting the variable name as the event target for your event means that you don't have to do the extra work of binding the function to the event. It just works right in the DOM. So that's a really handy use of arrow functions that I find. And you also brought up the map and the this, those are good examples too, but I love the fact that I can use arrow functions to bind events in HTML, that's handy. Really good perspectives, I agree completely. So I guess I would say, if you like this video, please give us a like, please subscribe to the channel. It'd be great to have you get notified of, because we're gonna keep creating these and there's a lot of other great things here on the Vojtaunos channel. And especially watch the classes video, which is coming up soon, where you'll learn how to use JavaScript classes, including arrow functions. Great, hey, see you next time.