Arrow functions

Arrow functions são uma das principais novidades do ES6 e revolucionaram a forma de escrever funções em JavaScript.

Exemplo prático: uso em métodos de array

const names = ['Anna', 'Brian', 'Charles'];
const greetings = names.map(name => `Hello, ${name}!`);

console.log(greetings); // ["Hello, Anna!", "Hello, Brian!", "Hello, Charles!"]

Visualmente, é uma mudança simples e bem-vinda, que permite escrever funções com uma sintaxe mais curta!

Sem arrow functions:

let myFunction = function(name, nickname) {
	return 'My name is ' + nickname + ', ' + name;
};

console.log( myFunction('James Bond', 'Bond') ); // My name is Bond, James Bond

Com arrow functions:

let myFunction = (name, nickname) => {
	return 'My name is ' + nickname + ', ' + name;
};

console.log( myFunction('James Bond', 'Bond') ); // My name is Bond, James Bond

Se o corpo da função contiver apenas uma única instrução, você poderá omitir os colchetes e escrever tudo em uma única linha:

let myFunction = (name, nickname) => 'My name is ' + nickname + ', ' + name;

console.log( myFunction('James Bond', 'Bond') ); // My name is Bond, James Bond

Percebemos que os parâmetros são passados ​​entre parênteses normalmente, mas se você tiver um (e apenas um) parâmetro, você pode omitir completamente os parênteses:

var myFunction = what => 'I ' + what + ' you';

console.log( myFunction('hate') ); // I hate you

Perceba que a ideia é bastante similar à forma padrão de usar funções em JS, com a diferença que não usamos a palavra chave function, e sim uma seta => (responsável pelo nome "arrow") entre os parênteses e as chaves.

Diferente das function tradicionais, não existe uma forma literal de escrever uma arrow function. Ela sempre deve ser usada como uma expressão.

Também não é possível nomear uma arrow function. Elas são sempre anônimas.

Posso substituir todas as "function" por "arrow function"?

Infelizmente, apesar do Arrow Function ser uma feature muito bacana e útil, saiba que nem sempre será possível utilizar ela, pois ela não foi feita para substituir 100% a declaração de function principal, o arrow function, apesar de trazer um syntax sugar e algumas utilidades como, por exemplo, compartilhamento de contextos, você precisa antes de usá-la, aprender também quando não usá-la para que você não fique perdido na procura de um bug de difícil de resolver, vamos ver situações para NÃO USAR arrow funcition.

Para exemplificar, vamos supor que existe um botão pelo qual queremos mudar o css, conforme ele é clicado, vamos programar o evento de click desse botão, usando arrow function:

const button = document.querySelector('#button_click');
	
button.addEventListener('click', () => {
	this.classList.toggle('on');
});

Se você testar esse botão, vai gerar o erro: TypeError, cannot read property 'toggle' of undefined, isso ocorre pois o this de this.classList.toggle('on') compartilha os atributos de window e não do evento. E com isso nesse caso o ideal é utilizar a declaração de function:

Escopo e o uso de 'this'

Quando uma função é criada, ela gera seu próprio escopo, que existe apenas enquanto a função está ativa.

No caso das arrow functions, o this não faz referência ao escopo da própria função, mas sim herda o valor de this do contexto onde a arrow function foi criada. Isso é diferente das funções tradicionais, que criam seu próprio contexto para this.

Conclusão

Arrow functions podem parecer confusas no início, mas com a prática, sua sintaxe enxuta e o comportamento do this se tornam claros e muito úteis, principalmente para callbacks e padrões funcionais em JavaScript.