1. Arrow functions provide a concise syntax for defining anonymous functions and avoiding issues with binding 'this'. 2. They are best used for list processing and anonymous callback functions. 3. Arrow functions lexically bind 'this' from the enclosing context and cannot be used as constructors or contain yield expressions. 4. When a function requires a constructor, generator, changing 'this' binding, or needs arguments - a regular function expression is better.

1. Fat$Arrows

2. =>

3. What?
lightweight(synax(for(lightweight(func3ons

4. No#Parameters,#No#Statements
let empty = () => {};
empty(); // undefined

5. One$Parameter,$One$Statement
let identity = x => x;
identity(1); // 1
implicit'return

6. Two$Parameters,$One$Expression
let adder = (x,y) => x + y;
adder(3,5); // 8
note%the%()%around%arguments

7. Mul$ple'Statements
let doubleDouble = (value) => {
let double = value * 2;
return double * 2;
};
doubleDouble(4); // 16
note%the%{}

8. Return'Object
let cte = () => ({"travel": true, "expense": true});
cte();
// Object { travel: true, expense: true }
note%the%()%around%{}

9. Lexical(vs(Dynamic(this
function hasBeenBought(company, cb){ cb(true); }
function Company() { this.name = 'Concur'; }
Company.prototype.newName = function() {
console.log(this.name);
hasBeenBought(this.name, function(bool) {
if (bool) console.log(this.name + ', an SAP Company');
});
}
let concur = new Company();
concur.newName();

10. Lexical(vs(Dynamic(this
function hasBeenBought(company, cb){ cb(true); }
function Company() { this.name = 'Concur'; }
Company.prototype.newName = function() {
console.log(this.name); // "Concur"
hasBeenBought(this.name, function(bool) {
if (bool) console.log(this.name + ', an SAP Company');
// ", an SAP Company"
});
}
let concur = new Company();
concur.newName();

11. Lexical(vs(Dynamic(this(with(=>
function hasBeenBought(company, cb){ cb(true); }
function Company() { this.name = 'Concur'; }
Company.prototype.newName = function() {
console.log(this.name);
hasBeenBought(this.name, bool => {
if (bool) console.log(this.name + ', an SAP Company');
});
}
let concur = new Company();
concur.newName();

12. Lexical(vs(Dynamic(this(with(=>
function hasBeenBought(company, cb){ cb(true); }
function Company() { this.name = 'Concur'; }
Company.prototype.newName = function() {
console.log(this.name); // "Concur"
hasBeenBought(this.name, bool => {
if (bool) console.log(this.name + ', an SAP Company');
// "Concur, an SAP Company"
});
}
let concur = new Company();
concur.newName();

13. Lexical(Arguments
function f() {
var args = arguments;
var g = () => arguments;
assert.equal(args, g())
}
f()
arrow%func*ons%reference%the%arguments%from%the%parent

14. Yield&with&func.on
function* incr() {
var index = 0;
while (true) {
yield index++;
}
}
let forever = incr();
forever.next() // 0
forever.next() // 1
forever.next() // 2

15. Yield&with&arrow
noIncr = () => {
var index = 0;
while (true) {
yield index++;
}
}
// SyntaxError: arrow function may not contain yield

16. new
function Expense(){}
let dinner = new Expense();
// !

17. new$with$=>
let Expense = () => {};
let dinner = new Expense();
// TypeError: Expense is not a constructor

18. Strict&Mode&(example&in&a&Browser&Environment)
var arrow = () => {'use strict'; return this};
var notArrow = function() {'use strict'; return this};
arrow() === window; // true
notArrow() === window; // false
In#strict#mode#a#func0on's#this#is#undefined

19. Shorter
var a2 = a.map( function( s ){ return s.length } );
var a3 = a.map( s => s.length );

20. Real%Example%(Before)
$http({url:url})
.then(function(response) { deferred.resolve(response.data.items); },
function(response) { deferred.reject(response.data); })

21. Real%Example%(A,er)
$http({url:url})
.then(
response => deferred.resolve(response.data.items),
error => deferred.reject(error.data)
)

22. When%to%use%=>
• you%want%the%correct%this
• when%function(){}%would%be%too%verbose
• list%processing%(map,%filter,%reduce,%etc)
• anonymous%func<ons

23. When%not%to%use%=>
• you%need%a%constructor%(new)
• you%need%a%generator%(func*)
• you%need%to%touch%this.
• (apply,%call,%bind%won't%change%this%on%arrows)

24. !