Javascript Arrow function

What is an arrow function?
ES6 feature that is an
alternative to writing regular
functions by providing a
concise syntax.

What is an arrow function?
However unlike regular functions,
arrow functions don’t have
bindings to this, arguments,
super, new.target keywords.

Arrow function syntax (1)
1. (param1, param2, …, paramN) => { statements }
2. (param1, param2, …, paramN) => expression
3. (param1, param2, …, paramN) => { return
expression;}
Equivalent

// Parentheses are optional when there's only one
parameter name:
5. (singleParam) => { statements }
6. singleParam => { statements }
// The parameter list for a function with no parameters
should be written with a pair of parentheses.
7. () => { statements }

// Parenthesize the body of a function to return an object literal
expression:
8. params => ({foo: bar})
// Rest parameters and default parameters are supported
9. (param1, param2, ...rest) => { statements }
10. (param1 = defaultValue1, param2, …, paramN = defaultValueN) => {
statements }

// Destructuring within the parameter list is also
supported
11. const f = ([a, b] = [1, 2], {x: c} = {x: a + b}) =>
a + b + c;
f(); // 6

Regular functions
const f = function (param1, param2, … paramN) { statements }
function f(param1, param2, … paramN) { statements }

Regular function VS Arrow function
Regular functions have their own this binding, arrow functions
lexically bind the this value.
// Regular function
const House = function () {
this.rent = 100;
setInterval( function () {
console.log(this.rent = this.rent * 2);
}, 1000);
}
const house = new House();
// NaN
// NaN
// NaN
// NaN
// Regular function, how to make it work 1
let self = this;
self.rent = 100;
setInterval( function() {
console.log(self.rent = self.rent * 2);
}, 1000);
}
// 200
// 400
// 800

// Regular function, how to make it work 2
this.rent = 100;
setInterval( function () {
}.bind(this), 1000);
}
// 200
// 400
// 800
// 1600
// Arrow function
this.rent = 100;
setInterval( () => {
}, 1000);
}
// 200
// 400
// 800
// 1600

Arrow functions cannot be used as constructors.
Arrow functions don’t have the local arguments value.
Arrow functions are anonymous similar to lamda
functions in other languages.

How I use Arrow functions
When I want to write less and expressive
let double = x => x*2;
With map, filter, reduce
let doubleList = [2, 4, 6].map(x => x*2);

How I use Arrow functions
As callback to api, function calls, and promises
new Promise( (success, faillure) => { … });
To make use of this without stress in class methods
class House {
id = "1";
house = "";
info() {
ApiCall.get(id).then( house => this.house = house);
}
}

Sample USE (angular)
export class ContainerLoadComponent implements OnInit {
…
ngOnInit() {
this.commandService
.getColis({limit:30, page:1, status:'registered'})
.subscribe( (results: any) => this.colis = results.colis) );
}
}

Sample USE (NodeJS)
PreCommand.findById(params.prid)
.populate('colis')
.exec((err, command) => {
if ( err )
return res.status(404).send('Not found.');
return res.jsonp(command || {});
});

Javascript Arrow function

In this document

More Related Content

What's hot

Similar to Javascript Arrow function

Recently uploaded

Javascript Arrow function