Arrow Function => in ES6
ECMAscript 6 introduces the "arrow function" as a shortcut for creating anonymous functions with this scope bound.
[00:00] Let's rewrite this createGreeting function to the arrow function style. Let's say arrowGreeting is message name and then the fat arrow with some braces and return message plus name. Now, that actually looks about the same.
[00:16] The only difference really is that this is on the right side, whereas the function keyword is on the left side, so that'd be here, whereas this would go here. But we can actually make this much smaller.
[00:28] First, let's remove the braces. I'll remove him, remove him, and move everything up the same line and remove the return keyword. This will automatically return message plus name. You don't have to write the return keyword when you don't have the braces in there.
[00:45] Second, if there's only one parameter, like you only take in a message, you can actually get rid of the surrounding parens here and just say message would return message, or message would return hello, or whatever you want it to return. That's why you'll see something like var squared is X, which returns X times X to be X squared.
[01:09] An extremely common scenario that you've probably run into before whether though click handlers or anything else is that, you write a function to handle some sort of action and you write the body of the function, and you run into the scenario where you'll assign that to this because you actually want to get the name off of the parent scope.
[01:31] The name doesn't exist inside of this scope so we have to do the that is this, and then, to get this in here, you refer to that. It can get pretty confusing.
[01:41] Now, the arrow function actually helps handle this scenario. I'm going to delete the function keyword. I'll use the arrow function syntax. Then, that here can just become this. I can delete this line, delete that, and this now refers to the outer scope outside of this function because it's passing in this lexical scope that's coming in from above the function.
[02:09] This is no longer referring to the scope inside of the function. It's referring to the scope that's outside of the function.
[02:17] Again, if you'd prefer to do this in one line of code, we can delete this brace and bring everything up a line. We can delete the semicolon and delete the closing brace. We can remove the paren from here and handle this nicely in a simple one-liner.
[02:34] When I run this, you can see it prints out "Hello, John" because this is actually this handler right here and it's getting this message through here, which is coming from here. When the message goes here to here to here, down into our arrow function, I add it to this name, and this name is this name now...
Examples covered in this course do a good job highlighting noteworthy differences between ES5 and ES6.
For practice I worked alongside the vids and have made a repo with the examples in ES5 and ES6 side by side—here's a link it it comes handy: https://github.com/raunaqss/es6-egghead.io
Hi, can you please provide the config to be able to run the scripts as you do in Webstorm? Thanks!
Hi John, is there any explanation about how do you configure Webstorm like you? I want to run the script and look at the console in the same window, like in the video
Hi, I was wondering about the same as Lluís, but I use IntelliJ. Brave backend developer trying to catch with all the awesomeness in ES6 :)
Would you please explain the below scenarios when I try to convert all functions as arrow functions?
convert handleMessage to an arrow function, it works:
var deliveryBoy = {
name: 'John',
handleMessage: (message, handler) => handler(message),
receive: function() {
this.handleMessage( "Hello ",
message => console.log(message + this.name) )
}
}
deliveryBoy.receive()
- If I convert
receivefunction as the arrow function, then it gives the errorTypeError: this.handleMessage is not a function:
var deliveryBoy = {
name: 'John',
handleMessage: (message, handler) => handler(message),
receive: () => {
this.handleMessage( "Hello ",
message => console.log(message + this.name) )
}
}
deliveryBoy.receive()
- As in second scenario,
thisis referred in two levels of depth in the functionreceiveasthis.handleMessageand in the functionthis.handleMessageasthis.name. And it seems that the error is related to thethisscope. Would you please explain more about the scope ofthisin the nested function?
The only thing I would add to this video is that you cannot rebind to an arrow function.
In the second example where you show that 'this' references the outer scope, what if you needed to access this.handleMessage inside of that function?