This course has been updated! We now recommend you take the ES6: The Right Parts course.
Transcript from the "Arrow Function Syntax" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Aaron Frost: This function comes from, a lot of languages have these things now, they're called lambdas, right? In JavaScript, the idea of lambda doesn't make a lot of sense. Not that it doesn't make sense, but in other languages, it's more significant, because you have to tie functions to methods to objects and it's just like a random object-less function, that doesn't make a lot of sense, but we have that now.
[00:00:33] And for us it's just a different syntax for functions than we've always kind of have this. But it does have some different performance stuff that you may not be used to. Like the way your code used to run is not the way it's gonna run if you use these arrow functions.
[00:00:54] So I'm gonna go through that, and I'm gonna explain to you how will my code be running different? If I just replace my functions with lambdas, not only will it kind of break, it's gonna totally break. Like big time, major. And I'll explain why. So, yeah, so arrow functions, that terminology comes from CoffeeScript, again.
[00:01:20] And CoffeeScript has two versions of the same thing, okay? So CoffeeScript, and I'm gonna explain it because it has some relevance in what we're gonna do, okay? So, CoffeeScript has a fat arrow function, and a skinny arrow function, okay? So we have two flavors of arrow functions. JavaScript only took the fat arrow function, okay?
[00:01:42] And if anyone knows CoffeeScript, and you understand the difference between the fat arrow functions and the skinny arrow functions, then you already know what I'm about to teach you, okay? Because this arrow function in JavaScript, does the exact same thing. Which it didn't, regular functions don't. So precedence, you've got lambdas and the fat arrow function from CoffeeScript.
[00:02:09] Again, we're taking these de facto standards from other languages. And ES6 is gonna throw the word fat off of the front, and just call it arrow functions. They didn't need to call it fat arrow, because we don't have two of them, so we don't have to specify the difference.
[00:02:28] And there was talk, there was talk about bringing over the other one too, but they were like we can already do it that way. Let's not bring over both, it's too much of a learning curve for new people, let's just keep one. And if you guys go through the logs you'll read why it ended up this way.
[00:02:47] So these two functions are a lot alike, okay? And if you execute them, for this example, they'll execute the exact same, okay? So, like one of the main differences you'll notice is we had to use the word function for our first example. So we're not using the word function, okay?
[00:03:13] So that will help with minification, that's kind of nice, right? So, we'll get performance enhancements at least there by using these. We're still using parenthesis for the parameters. So we don't have any parameters, so up here we have these parameters, these parentheses with nothing in them, over here empty parentheses so.
[00:03:37] And then, we just kinda do this fat arrow. We kinda point at the function body and we just put a 2, and it's gonna implicitly return that. Whereas in the top function, if we wanted it to return it, we had to say go ahead and return this, okay?
[00:03:57] So you could wrap the body of this arrow function. You could wrap it in braces if you want to. Like if you wanna put squiggly braces around it, do it. It's gonna stop implicitly returning though. It only implicitly returns if you don't wrap the body, okay? So the second you put parenthesis up there, you're gonna lose that implicit return, so you're gonna have to type the word return.
[00:04:25] So that might be confusing. Parens for parameters, no single brace for the single-line arrow of function bodies. So you could do multiple-line on arrow function bodies and on multiple-lines you are gonna need to wrap it with braces. But if you're just doing one line, I'm thinking D3. D3 there's a lot of like .data and then a function, and .this and a function.
[00:04:49] And then just one thing in the line thing. You could do a lot of this stuff for that kind of stuff. So on the single line arrow functions with no braces, it does implicitly return like we said. So I kinda wanna talk about the parentheses around the parameters rules.
[00:05:11] And some of you guys are gonna love this. I can already tell. But shout it out if you absolutely love it. Shout it out. Okay, so if you have no parameters, you have to use parentheses. So if you don't have any parameters, you must use parentheses. If you have one parameter and one only, it's optional, you can either use parentheses or not, okay?
[00:05:39] Everything else but I'm not talking about everything else, I'm just talking about the parameters, okay? And then two or more, you have to parentheses around them. So basically another way to sum this up is with only one parameter, it's optional parentheses, okay? So I wish they wouldn't have done that, I wish they would just say hey it's always parentheses.
[00:06:05] There's no not parentheses, it's always parentheses, do it that way. Anyway so that's the other way to sum this up, is when you only have one parameter you don't have to put the parentheses in. Because you're probably going to come in here one day and refactor it and do comma other thing and you're gonna get an error because you forgot to put the parentheses around.
[00:06:25] I'll probably always use them, just because I don't like to deal with those kind of problems. And I'm sure like uglify will go through and be like, hey do you only have one, cool, I'm gonna freaking remove the stuff out. I'm sure all our build tools will take care of stripping off that extra parentheses, if we don't need them.
[00:06:44] You know what I'm saying? And if you have a function that's only one line, and you have a return statement. I'm sure that the uglifiers will be like, dude get rid of the return or take the braces off and just make it one. We'll get some stuff. We'll get some tooling around that will make this stuff easier, but yeah I'm not sure.
[00:07:02] So anyway, so let's talk about the body declaration. So again I kind of talked about this. So here we have a function. It takes a number, and then it returns the number times itself, right?
>> Aaron Frost: And this is if you want to wrap the body with braces, you can, but you've got to then give it a return statement.
[00:07:36]
>> Aaron Frost: So that's gonna get confusing too. I think some people run into some bugs where they take a one line method in make it two and they forget to add the return value on the second line. You know what I'm saying? Or the return instruction. I think that they'll be like, why isn't this working?
[00:07:52] So anyway, just keep that in mind.