JS.Next: ES6 / ES2015

JS.Next: ES6 / ES2015 Functions vs. Arrow Functions

Topics:

This course has been updated! We now recommend you take the ES6: The Right Parts course.

Check out a free preview of the full JS.Next: ES6 / ES2015 course:
The "Functions vs. Arrow Functions" Lesson is part of the full, JS.Next: ES6 / ES2015 course featured in this preview video. Here's what you'd learn in this lesson:

Aaron quickly demonstrates why developers will still need to use traditional functions and can’t completely replace them with arrow functions because they can cause scope issues.

Get Unlimited Access Now

Transcript from the "Functions vs. Arrow Functions" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Aaron Frost: You've a question.
>> Speaker 2: It might have been covered but you say, you can't use .collar.applied to dynamically set this.
>> Aaron Frost: True, you cannot. Well, you can try to, you will get an error but it won't do what, when you look at it you'll be like, it's gonna overwrite this and use this as the this, but it's not going to do that, actually.

[00:00:24]
>> Speaker 3: Can you-
>> Aaron Frost: I just wanted to say this eight times in one sentence.
>> Speaker 3: [INAUDIBLE] be like you found something twice. It's gonna take the first value.
>> Aaron Frost: If you bind it twice?
>> Speaker 3: If you said .bind .bind cuz The result of a .bind is a function, so you can bind a .bind, but it's not gonna take that second-

[00:00:43]
>> Aaron Frost: The second one?
>> Speaker 3: Yeah.
>> Aaron Frost: Same concept here then, right?
>> Speaker 3: Exactly.
>> Aaron Frost: Yeah, so okay, so someone else asking a question that I skipped? I didn't mean to. If I did, I'm sorry, okay. Still use functions. So, let's go back to our widget guy. And we've got we've got a function on our net right and it's a function, we agree?

[00:01:11] So what if I,
>> Aaron Frost: I'm gonna copy this to the Traceur REPL.
>> Aaron Frost: Can everyone see this okay?
>> Aaron Frost: Everyone see this code okay?
>> Aaron Frost: Okay, so I'm gonna change this to be an arrow function instead of an anonymous function just so we can see why you still gonna use function, irregular functions.

[00:02:03] So I'm gonna say blah, wait I'm not gonna say that I gonna say haha, okay?
>> Aaron Frost: I'm actually gonna refresh cuz every time I type it's adding another bloody click listeners. I'm actually in a refresher real quick just to get rid of the freakin' listeners. Okay, so you guys see what happened when I clicked the body?

[00:02:31]
>> Aaron Frost: It can't find, undefined, not a function. So it's trying to do something on the this. So why don't we do this real quick.
>> Aaron Frost: So what's this? Window, yeah, yeah, yeah. So we've got we've now got this new. We've got this new this that's the window, okay?

[00:03:04] And the reason is because when it was go through the code ,it was setting this up and it was okay evaluate that line evaluate this line, if I, don't execute it yet just freaking load it up. Get this put this on the. Had to bind this function init to whatever that this was at this context.

[00:03:23] And what's when the page is loading what's this? Like when it's just going through and parsing everything what's this? It's the Window, right? At least in the browser in node it's not the browser obvious not one, anyway, so it's the goal, so it's going to bind all your individual widget functions, straight to the window, which is stupid.

[00:03:48] So yeah that's exactly weird, because the window doesn't have a do something, and the widget has to do something still, and if I change this guy, to also do it, guess what? The window now has a do something feature, okay?
>> [LAUGH]
>> Aaron Frost: Yeah, it's still not going to work.

[00:04:08] Anyway, my point in what I'm trying to show you guys is you're not gonna just replace all functions with arrow functions. Otherwise you're going to be like who did this to my code. I don't know how to do this anymore so yeah, just like know what it is be cool with it, accept it for what it is and use it where you need it.

[00:04:30] Don't I mean anywhere where you would have said of if var me equals this or you would have used a bind you can use this, okay? And new people coming into JavaScript and they see this once in a while. People use this function. They're going to have to know, they're going to have to explicitly learn why they're doing it that way.

[00:04:47] Just like he learned, I'm going to explicitly use function bind and why I said, I'm going to use var me equals this, I'm going to save a reference to this. Because we had to learn it on the fly and so people coming in are still going to need to learn to use when you want to use a federal function-- an arrow function versus a regular anonymous function.