ES6: arrow functions em 5 minutos

As arrow functions a princípio podem parecer confusas (experiência própria (◕︵◕)), mas depois de um tempo, é possível entender sua sintaxe mais curta e a mágica do escopo do this.

Vários parâmetros

Sem arrow functions.

var oldWay = function(name, nickname) {
return 'My name is ' + nickname + ', ' + name;
};
console.log( oldWay('James Bond', 'Bond') );
// My name is Bond, James Bond
view raw es6-arrow-functions-01.js hosted with ❤ by GitHub

Com arrow functions.

let newWay = (name, nickname) => {
return 'My name is ' + nickname + ', ' + name;
};
console.log( newWay('James Bond', 'Bond') );
// My name is Bond, James Bond
view raw es6-arrow-functions-02.js hosted with ❤ by GitHub

Ou de uma maneira um pouco mais curta.

let newWay2 = (name, nickname) => 'My name is ' + nickname + ', ' + name;
console.log( newWay2('James Bond', 'Bond') );
// My name is Bond, James Bond
view raw es6-arrow-functions-03.js hosted with ❤ by GitHub

Apenas um parâmetro

Sem arrow functions.

var one = function(what) {
return 'I ' + what + ' you';
};
console.log( one('hate') );
// I hate you
view raw es6-arrow-functions-04.js hosted with ❤ by GitHub

Com arrow functions.

var oneNew = what => 'I ' + what + ' you';
console.log( oneNew('hate') );
// I hate you
view raw es6-arrow-functions-05.js hosted with ❤ by GitHub

Escopo

Sem arrow functions.

var sandwich = {
bread: 'integral',
cheese: 'white',
prepare: function() {
return 'I want a sandwich with ' + this.bread + ' bread and ' + this.cheese + ' cheese';
},
make: function() {
var that = this; // (◕︵◕)
window.setTimeout( function () {
console.log( that.prepare() );
}, 100 );
}
};
// sandwich.make();
// I want a sandwich with integral bread and white cheese
view raw es6-arrow-functions-06.js hosted with ❤ by GitHub

Com arrow functions.

let newSandwich = {
bread: 'integral',
cheese: 'white',
prepare: function() {
return 'I want a sandwich with ' + this.bread + ' bread and ' + this.cheese + ' cheese';
},
make: function() {
window.setTimeout( () => console.log(this.prepare()), 100 );
}
};
// newSandwich.make();
// I want a sandwich with integral bread and white cheese
view raw es6-arrow-functions-07.js hosted with ❤ by GitHub

Exemplo com map

Sem arrow functions.

var sample = [1, 2, 3, 4, 5];
var double = sample.map(function(item) {
return item * 2;
});
// console.log(double);
// [2, 4, 6, 8, 10]
view raw es6-arrow-functions-08.js hosted with ❤ by GitHub

Com arrow functions.

let sample = [1, 2, 3, 4, 5];
let newDouble = sample.map(item => item * 2);
// console.log(newDouble);
// [2, 4, 6, 8, 10]
view raw es6-arrow-functions-09.js hosted with ❤ by GitHub

Aqui vocĂŞ encontra um JS Bin com os exemplos acima.

Ver mais posts