ECMAscript 6 introduces the "arrow function" as a shortcut for creating anonymous functions with this
scope bound.
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?
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()
receive
function as the arrow function, then it gives the error TypeError: 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()
this
is referred in two levels of depth in the function receive
as this.handleMessage
and in the function this.handleMessage
as this.name
. And it seems that the error is related to the this
scope. Would you please explain more about the scope of this
in the nested function?The only thing I would add to this video is that you cannot rebind to an arrow function.