Arrow Function => in ES6

InstructorJohn Lindquist

Share this video with your friends

Send Tweet

ECMAscript 6 introduces the "arrow function" as a shortcut for creating anonymous functions with this scope bound.

Michael
~ 10 years ago

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?

Raunaq Sahni
~ 7 years ago

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

Lluís Peinado
~ 7 years ago

Hi, can you please provide the config to be able to run the scripts as you do in Webstorm? Thanks!

Lluís Peinado
~ 7 years ago

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

thomas andersen
~ 7 years ago

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 :)

Quang Le
~ 6 years ago

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 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()
  • As in second scenario, 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?
Ron
~ 5 years ago

The only thing I would add to this video is that you cannot rebind to an arrow function.