JS.Next: ES6 / ES2015 Exercise: Arrow Functions

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

[00:00:03]
>> Aaron: So let's have everyone try some Noni functions out. So these actually work in Firefox. So yes, you go ahead and try them out straight in your Firefox console. They also work in the Traceur Repl like you saw me using them. But go ahead and try them out inside an object, try with some event handlers.

[00:00:21] And then try passing some error functions to an array map or array for each or an array reverse. See if you can not reverse. See if you can figure how to do [INAUDIBLE] with that stuff. So, good?
>> Speaker 2: Couple of questions here.
>> Aaron: Yeah, yeah ,yeah.
>> Speaker 2: Is it a good spot?

[00:00:50]
>> Aaron: Yeah, yeah, it is a great spot for questions.
>> Speaker 2: So an arrow function in ES6 is different than the one used in CoffeeScript?
>> Aaron: So CoffeeScript has two arrow functions. And they have a skinny arrow, which is instead of the equals sign, it's just the hyphen and then the greater than.

[00:01:10] And let me show you here, so in CoffeeScript, they have no, voice. So they have this kind of an arrow function.
>> Aaron: And then they have, so they have those two arrow functions. In a CoffeeScript, they built them for this purpose, this is why they have two of them for exactly what we're talking about.

[00:01:45] And use your skinny arrow functions where wherever you would use an anonymous, just a regular function. You don't care whether this is you just need the codec skew when you do. And then they're like well, we have this time where we need to bind stuff like can easily be scoped lexically to this.

[00:02:01] And so they're like well, in that case, we'll create this second arrow function which is a fat arrow. And so, in CoffeeScript you have to learn and and you have to read in parts of your eyes. That is skinny function, that's a fat function, which one of the two is it.

[00:02:17] And so this actually does work just like CoffeeScript's fat arrow functions. It does not work like CoffeeScript's skinny arrow functions, so yeah?
>> Speaker 3: But is the parsing different? Cuz with your last example where you changed the emit function to be a fat arrow function instead. And then this ended up bound to window.

[00:02:41] I thought CoffeeScript parses that differently, so it would have worked the way you expect.
>> Aaron: I don't know, man, I'm not a CoffeeScript guy. So maybe someone who's used it. Maybe on the livestream can tell. But I don't know what CoffeeScript would do. I would imagine that if fat arrow did what I've been told it does, it would break.

[00:03:02] But it may work, I don't know.
>> Speaker 2: Another question was, are there any performance improvements with the arrow function?
>> Aaron: That's a good question, why didn't I talk about that. Well, [INAUDIBLE], you gotta stop [CROSSTALK]
>> Speaker 2: I just got here and we started questions.
>> Aaron: Okay, so it's not like strictly sugar, right?

[00:03:21] It is sugar because it's going to bind this for you which is nice and it takes the word function out and it gets rid of the return statement if you only have one line. So there's a little bit of sugar. I'm gonna say mostly sugar, but combined. So remember how we said you can't new this up, you can't new this guy?

[00:03:47] Combined with classes, there's a potential long-term benefit of having these kind of functions. And that is, so right now we have functions and every function has this constructor thing on it, so that you can construct it if you need to. And I'm not 100% into how much weight that takes up in memory, but I mean it's not nothing.

[00:04:23] And so if every function, if you can get rid of these constructors on every single function. Cuz most functions, I mean that almost all functions aren't constructors, they're just methods, right? I'm not ever gonna new up my click handler, it's just a function. And if there was a time where all constructors were only used to the class syntax.

[00:04:48] And functions were only used as functions but not as constructors. You could conceivably remove the constructor binding from a function which might make it lighter weight in memory. Which could potentially have a benefit over runtime in that it wouldn't take up such a big memory footprints. But again, I'm talking about something I read one time, not that I write JavaScript engines, right?

[00:05:22] Because I don't.
>> Speaker 2: One other kind of question here, so object functions can be bind by skinny arrow functions, but I think skinny arrow functions are only CoffeeScript, right?
>> Aaron: Totally, yeah, I think that's what they're saying. Yes, skinnier, like the word fat and skinny, that's not an [INAUDIBLE] script thing, that's purely Java.

[00:05:48] I keep saying it. I said it so now you guys are gonna go say it and I felt bad, because I didn't mean to teach that habit. They're just arrow functions. And then someone on the livestream is obsessed with it and so we've said it ten more times.

[00:06:00] But again, it's not called fat arrows, they're just called arrow functions. Okay, let's code up a destructuring inside of an array function, should we do that? With default parameters?
>> Speaker 3: Mm-hm, I can do that.
>> Aaron: Okay, let's try it. [COUGH] Let's try it. So let me hide the runtime or the generated code, okay.

[00:06:33] So I'm gonna make an array, for now it's just gonna be of numbers.
>> Aaron: Right, so we got numbers. Does everyone agree?
>> Speaker 2: [LAUGH]
>> Aaron: Okay? And then we're gonna say, nums.forEach or excuse me, map. Let's do a forEach, it doesn't matter. Okay, so we're gonna do a forEach on these guys.

[00:07:12] So here we're gonna have this parameter. We're gonna do our arrow.
>> Speaker 4: Can you bump up the farm maybe one or two?
>> Aaron: Is that good? Okay, [COUGH] so in here, we're gonna say this is the num and we will default it to 1,000. In the forEach it passes the second parameter which is the index.

[00:07:52]
>> Speaker 4: ForEach? Yeah.
>> Aaron: It does, right?
>> Speaker 4: Yep.
>> Aaron: Okay.
>> [INAUDIBLE].
>> Aaron: [COUGH]
>> Aaron: So, I don't think I can do index minus one.
>> Aaron: Probably not.
>> Aaron: Let's try it though
>> Aaron: Num are the index+1.
>> Speaker 4: Your experimental's turned off, is it?
>> Aaron: Was it? Do I need a num?

[00:08:46]
>> Speaker 4: Create the default, wouldn't you?
>> Aaron: I don't think so.
>> Speaker 5: Mine is working fine with it.
>> Aaron: Horn.