=>

function

{}

return

this

function sum(a,b) { return a + b; }

const sum = (a,b) => a + b; const squareRoot = a => Math.sqrt(a); // no need of parentheses when there is only one parameter const test = () => console.log(1);

fat arrow function

this in Arrow Function

this

this.greeting = "Hello world!"; const foo = { greeting: "Hi" }; foo.bar = () => { console.log(this.greeting); }; foo.bar(); // Hello world!

"Hi"

"Hello world!"

this

this

this.greeting

bind

this

this

arrow function

call(), apply()

bind()

this

function

this

Tip:

source)

Use function in the global scope and for Object.prototype properties. Use class for object constructors. Use => everywhere else.

One of the most popular ES6 features -Arrow function (or Fat Arrow function) expression is just a sugary syntax for defining a function expression in ES6. It useswhile defining a function expression by eliminating the use ofbrackets andkeywords and it does not bind its ownES5 way:ES6 way using fat arrow:As we noticed so far,is there to write the code in a more condensed way but it offers more than that.The most important keyword in JS -. ( What's this in JS? In ES6, the fat arrow function use lexical scoping for binding this to the enclosing function."Lexical scoping" simply means the value ofis determined by the surrounded code.In global code, it will be set to the global context.Consider the following example:In this case, the result is not what we expected. It should be. The reason we are having the globalis because arrow function looked for the value ofin the surrounding code and it didn't exist there. That means the value ofis taken from the globally defined. Even if we usemethod to bind the value ofto the object, arrow function will always take precedence and will always override any previously bound or dynamically determined value ofBasically,overrulesandmethods to determine the value of. The only solution is to go ES5 way and useexpression if you wantto be bound to a different value.