JavaScript: From Fundamentals to Functional JS, v2 ES6 Arrow Functions

Transcript from the "ES6 Arrow Functions" Lesson

[00:00:00]
>> Bianca Gandolfo: All right, let's talk about arrow functions. Who uses arrow functions in the day to day? Yeah, a couple of people, awesome. So here is our functions with arrow function notation.
>> Bianca Gandolfo: Let's see, what are the differences here? We have a big fat arrow, great, you see that around.

[00:00:26]
>> Bianca Gandolfo: A lack of the function keyword, is replaced by the arrow. And we don't have to wrap our parameters in a parentheses if there's only one.
>> Bianca Gandolfo: And also, if it's one line you don't have to wrap it in curly brackets. Those are the main differences.
>> Speaker 2: So it's only cleaner, it doesn't necessarily have anything beyond stylistic differences?

[00:01:00]
>> Bianca Gandolfo: I'm just talking about the syntax right now. It does have a very different behavior than a regular function would. But just syntax-wise, those are the main things to look out for. And it gets tricky when people start doing multiple functions. Say this returned something.
>> Bianca Gandolfo: And then you wanna do something else with it in a different function.

[00:01:31] It starts to look a little crazy, in my opinion. But the main difference is that it's gonna bind the context. And the context is the value that this has to its parent context. I know that sounds a little confusing to some people who aren't familiar with using contexts.

[00:01:58] But that's the main difference, really, is that it doesn't own its own keyword this. All functions have a keyword this that gets bound at call time. Again, I'm not gonna talk too much about the details. I have another course, and there's a lot of courses on here that talk about how that works.

[00:02:18] But it's important to know that arrow functions do not have their own value for this. And they inherit, they reach up into the parent scope and grab that value of this in that parent scope. And this replaces any time you see .bind. Have you guys used bind before?

[00:02:36] So this replaces the need for that. Or it replaces a need if you ever say, var this equals that, and then you refer like that .whatever, you know what I'm talking about? Have you guys or self? Var self equals this? Have you guys seen that? Cuz sometimes your context or your keyword this loses its value, sometimes it's through asynchronous functions or nested functions, it can lose its value.

[00:03:04] And so there're some tricks that you have to do to keep this keyword with a value that you wanted. And a lot of times, it'll just be the window and you're like great, that's not what I wanted. Or take you a little while to figure out why, why is it saying undefined is not a function?

[00:03:26] And stuff like that, so that takes care of that. However, it does get tricky because we expect all functions to have its own value for this and it doesn't. Another thing is that it doesn't have its own value for the arguments keyword. So the arguments keyword, at call time, gets bound to all the arguments that are being passed into the function.

[00:03:55] So the arguments of this, the arguments keyword is the same as the arguments that are being passed, except it's this object like array. And that comes for free in all of our regular functions in JavaScript, and that's great. However, in arrow functions we don't have that. So those are just some things to keep in mind.

[00:04:15] Another thing to keep in mind is just that the variances in syntax can be a bit confusing. Particularly when there's an automatic return. I recommend if you're trying to return something from an arrow function, just write an explicit return function. Because you have to understand, sometimes it'll return something and other times it won't.

[00:04:38] And it all has to do with whether or not something's a statement, and you have to truly understand deeply what a statement is and that's complicated. So the easy fix is just write a return statement if you're trying to return something from that function instead of letting it auto return, cool?

[00:04:57] Does that make sense? Any questions?
>> Speaker 3: Please, just repeat the relationship with the arguments between the arrow function and-
>> Bianca Gandolfo: Yeah, so have you ever referenced the keyword arguments in the body of a function? So in an arrow function, it doesn't have that, so it would just be undefined.

[00:05:22] Yeah, yeah, cool.
>> Bianca Gandolfo: Anything else?
>> Speaker 4: Maybe this is a tangent, but I'm curious about in the return statement there, you talked really quick about using back-ticks yesterday. And so obviously the dollar sign bracket syntax is different for the thing there. So what all is happening there? And is that something that's ES6 specific?

[00:05:53]
>> Bianca Gandolfo: Mm-hm.
>> Speaker 4: I'm not familiar with that.
>> Bianca Gandolfo: Yeah, so this is a template string, which is one of my favorite things about ES6. Basically, it allows you to, I think it's called interpolation or something like that. But basically, you can add variable names in here. So you wrap it with a dollar sign bracket.

[00:06:13] Similar, if you've used a templating language, it's kind of like that, like Mustache or JSX and things like that have this built in. I guess JSX might be a template string. Anyway, point is you can reference a variable name without having to say quotation plus name plus quotation.

[00:06:41] How we have it up here, see this, this is before template strings, so it's just a lot of mess. And then sometimes, maybe you forgot to close a string or you forgot to add a plus on the other side and you get an error. And it just wastes a whole second.

[00:06:58]
>> Speaker 4: Sure, and the back ticks are just required to use that template's chain form?
>> Bianca Gandolfo: Mm-hm, so this is gonna evaluate to a string, it will look up the name, and then you can also do math in here too if you want stuff like that. Or if there's a property, you can do stuff like that.

[00:07:17] Yeah, it's pretty nice.