fat arrow (es6)
TRANSCRIPT
Two$Parameters,$One$Expression
let adder = (x,y) => x + y;adder(3,5); // 8
note%the%()%around%arguments
Mul$ple'Statements
let doubleDouble = (value) => { let double = value * 2; return double * 2;};doubleDouble(4); // 16
note%the%{}
Return'Object
let cte = () => ({"travel": true, "expense": true});cte();// Object { travel: true, expense: true }
note%the%()%around%{}
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();
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();
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();
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();
Lexical(Arguments
function f() { var args = arguments; var g = () => arguments; assert.equal(args, g())}f()
arrow%func*ons%reference%the%arguments%from%the%parent
Yield&with&func.on
function* incr() { var index = 0; while (true) { yield index++; }}let forever = incr();forever.next() // 0forever.next() // 1forever.next() // 2
Yield&with&arrow
noIncr = () => { var index = 0; while (true) { yield index++; }}
// SyntaxError: arrow function may not contain yield
new$with$=>
let Expense = () => {};let dinner = new Expense();// TypeError: Expense is not a constructor
Strict&Mode&(example&in&a&Browser&Environment)
var arrow = () => {'use strict'; return this};var notArrow = function() {'use strict'; return this};arrow() === window; // truenotArrow() === window; // false
In#strict#mode#a#func0on's#this#is#undefined
Real%Example%(Before)
$http({url:url}).then(function(response) { deferred.resolve(response.data.items); },function(response) { deferred.reject(response.data); })
Real%Example%(A,er)
$http({url:url}).then( response => deferred.resolve(response.data.items), error => deferred.reject(error.data))
When%to%use%=>
• you%want%the%correct%this
• when%function(){}%would%be%too%verbose
• list%processing%(map,%filter,%reduce,%etc)
• anonymous%func<ons
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)