This course has been updated! We now recommend you take the ES6: The Right Parts course.
Transcript from the "Arrow Function Examples" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Aaron Frost: In some places where you could use them, like if you wanna make a map out of something. Currently we do something like this.
>> Aaron Frost: Where
>> Aaron Frost: Come on.
>> Aaron Frost: Where
>> Aaron Frost: Sorry, we're doing map, right?
>> Aaron Frost: So, currently, this is what that would look like.
>> Aaron Frost: Everything kinda squares up and it returns it to you.
[00:00:55] So this is what that would look like with an arrow function. It would be one line less code. If you ever have the need to make a map of squared numbers, you could do that. But a lot of times when we call a math function, we're just returning like some some ID.
[00:01:15] So instead of, you could pass in an array of user objects and just say return user dot ID and you'd have a map of user object. Anyway, just a thought. This is somewhere where you could use it. You could have a key_maker where you pass it a value and it says the key is this value, I don't know.
[00:01:37] And then you could make 100 keys or you could make a key with the value of 100. Let's talk about the real benefits of these arrow functions and I say benefits and it will also be the, kind of the source of some confusion. So let's talk about it.
[00:01:57] The way that this, one to ten, who really understands this in JavaScript? Who's like a three? Who's like a six or a five to six? Who's like a seven or eight? Who's like a seven or eight? Who's like a nine or a ten? I'm gonna raise my hand.
[00:02:18] I think I get it, but I don't know. Maybe I'm a seven. Okay, if I was in an interview I'm a ten, but like if I'm in front of my peers, it's probably like an eight or nine. Anyway, okay. Okay, I want you look at this function. Let's talk about what it's doing, okay?
[00:02:34] So we have a widget object. True? Everyone agree? Okay, and we're gonna call it widget.init. Right? And widget.init is gonna say cool. Under the document let's add a click listener. And
>> Aaron Frost: We're gonna say, I want you to call this .doSomething and pass it to the event type.
[00:03:01] Cuz the clicking handler has an event, right. So does anyone know why this, why that line is gonna error?
>> Speaker 2: Because doSomething is scope to the anonymous function or the this is scope to the anonymous function. So the do something is scope to the-
>> Aaron Frost: In the context that this exists, what is this?
[00:03:19]
>> Speaker 3: It's a document.
>> Aaron Frost: Is it the document?
>> Speaker 4: It's the anonymous function.
>> Aaron Frost: So, are you sure it's not like the dom moment? Might be the dom moment.
>> Speaker 5: No, cuz it's live.
>> Aaron Frost: None of us really know? [CROSSTALK] We just all went down a level? It's it's not the widget though, is what I'm trying to say.
[00:03:43] So and when you say this.doSomething. You think you're saying widget.doSomething. You're not saying that, that's not what you're saying. You're actually saying window.doSomething, okay. And window doesn't have a doSomething method. So what's going to happen when you try and, it's going to say window.doSomething is undefined and I want to invoke undefined.
[00:04:11] Once again, what's gonna happen when we try to invoke undefined? Undefined is not a function, right? Okay, that's exactly what's gonna happen. So there's two ways, normally people correct this, do you guys, does anyone wanna shout them off for me?
>> Speaker 6: self is this.
>> Aaron Frost: So who said bind?
[00:04:34] Bind. An then the other way is?
>> Speaker 7: Var self is this.
>> Aaron Frost: Yeah. Var something equals this. And then instead of, here I'll pull it up. So here's the two ways you can do it. Your function handler for your event, you can say go ahead and bind it to this and when this line of code is running this is actually the widget, okay?
[00:05:01] So you combined that function to this or you can say var me or var self or var underscore this equals this. And then instead of calling this.doSomething, you call me.doSomething. Or whatever you use, right? Who uses Self? No one? Who uses Bind? Yeah. I use me. So, anyway, this is how you fix it today, right?
[00:05:33] And when I used to write, I used to write in Sencha, is that okay? Anyway, I did and it was cool, but I had to do this a lot. It was a lot that we had to do this kind of stuff. And so fat arrow or arrow functions, sorry I keep calling them fat arrow and I don't mean to.
[00:05:58] Anyway, arrow functions aims to solve this problem that we're dealing with right there. This is what arrow functions is for okay.
>> Aaron Frost: Okay, so, this is how you would rewrite the exact same function with an arrow function.
>> Aaron Frost: So it's basically the same syntax but instead over here, you just have one of those anonymous functions.
[00:06:32] And I've wrapped it with braces, so it's not gonna return. It's just gonna call this.doSomething, but in this context when you use an arrow function, at the time that this line of code was evaluated, this was widget, right? So it's actually gonna go ahead and bind this event call to this.
[00:06:53] So instead of our frameworks like our backbones and stuff, people are gonna start using this syntax because it is nice. It's nice to not have to worry about that stuff or to have to go through and bind all your own functions or alias this onto something else.
>> Speaker 8: So in coffee script you end up actually almost always using fat arrow rather than the normal arrow?
[00:07:16] Do you think that we'll be sending JavaScript as well?
>> Aaron Frost: I'm gonna show an example why you won't. Cuz in this example, think about it. When this widget is being created, and can I answer that on another slide? Okay, good. I don't want to ruin my slide. I don't want to ruin my own wave, dude.
[00:07:39] Does anyone have any comments or question about that? That makes pretty good sense, what's going on here, right? When that line of code gets added as an event listener, this is the widget and so it knows exactly what to do. So in that way the code, it will at least run like we think it's gonna run.
[00:07:59] Whereas with, sorry, with a regular anonymous function, it doesn't run like we think it's gonna run. Okay, so I want to talk a little bit more about these functions. So the type of arrow function is function, okay? So, actually, Rick Waldron corrected me on this, it does have a prototype and it is function.
[00:08:32] But there's something about function it doesn't have. Sorry I can't remember. He corrected me on this and I didn't put it in to the slide. Kind of nullifying itself. Now that I think about it. Anyway, so if you call getPrototypeOf an arrow function, it's gonna return the function prototype.
[00:08:56]
>> Aaron Frost: So here's a big difference, though. So if I have a function Foo, And a function bar and the one is a regular function and the other one is an arrow function. I can use the regular function as a class constructor. I can say new Foo, and if I try and do new Bar, it's not going to work.
[00:09:19] You can't make, you can't make classes out of arrow functions.
>> Speaker 9: Because of the binding-
>> Aaron Frost: Is basically what it is. Yeah, because of how it's gonna bind this. If it bound this on an arrow function, what would this always be, 100% of the time? The window. So it would be tough.
[00:09:37] So you can't, I mean, it wouldn't really be usable. I guess they could make an exception in the case of the word new. But, I don't know. So the rule is, you can't use it as a constructor. We're cool? So, someone, you asked about this earlier. You were like, hey man, why don't I just.
[00:10:05]
>> Aaron Frost: Hold on.
>> Aaron Frost: I can't remember what I was trying to teach you guys with this slide.
>> Aaron Frost: Yeah, yeah got it. Good I got it. I got it. Okay, so I have a widget here right. It's got an ID of 123. And it's got a log method.
[00:10:45] Okay? And my call log, it's just gonna say is it a log this.id. Simple, everyone understand what's going here? So if I say new widget, new Widget.log is gonna just log Widget.log in 123. Simple, does anyone not get that? We should all get that. Okay, we got it.
[00:11:06] All right, so now I'm gonna say newWidget.log.call. And I'm gonna pass a different this. When you do on the method, when you do a .call, the very first parameter is a new this. You're basically reassigning the this. So I'm trying to say, instead of treating the widget as this, treat this pseudo-widget as this.
[00:11:31] So it should call log. And instead of, and I'm trying to make it call, instead of, I'm trying to make it use this ID instead of the ID up here, okay. But it's not going to, okay.
>> Aaron Frost: Yeah, it's not going to log in. Because because the ID was bound lexically even if I try and over-ride it it still going to use this ID.
[00:11:58] It's not going to use the ID I'm trying to cram down its throat. We get it, we're seeing eye to eye? Proceed?
>> Speaker 10: The chat was asking about the call applied bind, but you'vealready touched on call here.
>> Aaron Frost: Yes.
>> Speaker 10: The same, generally applies?
>> Aaron Frost: Yes. Yeah. So, even if you try and override it you're not going to get it.
[00:12:24] So, it's bound.