Fat Arrow (ES6)

Fat$Arrows

=>

What?

lightweight(synax(for(lightweight(func3ons

No#Parameters,#No#Statements

let empty = () => {};empty(); // undefined

One$Parameter,$One$Statement

let identity = x => x;identity(1); // 1

implicit'return

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

function Expense(){}let dinner = new Expense();

// !

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

Shorter

var a2 = a.map( function( s ){ return s.length } );

var a3 = a.map( s => s.length );

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)

!