Entendendo as arrow functions do JavaScript

Com a adoção do ES6, um recurso que se destacou muito, com certeza foi o das arrows functions. Elas basicamente são uma nova forma de criar funções no JavaScript, com uma estrutura mais curta e bem poderosa.

Essa é a forma convencional para se escrever funções:

function() {}

Já a escrita básica de uma arrow function é a essa:

() => {}

Perceba que não precisamos escrever a palavra function e usamos o sinal => que se parece com uma flecha, por isso o nome arrow function.
Ao analisar a estrutura, devemos reconhecer que a escrita fica muito mais elegante, mas as arrow functions vão muito além disso, elas possuem recursos muito poderosos.

Recursos das Arrow Functions

Se nossa função possuir apenas um retorno como resultado, não precisamos escrevê-lo, pois ele será retornado automaticamente.

Criamos uma função que irá retornar uma mensagem para o usuário, onde seu nome será informado como parâmetro.

const hello = function(name) {
  return `Olá, ${name}!`
}

Essa função está super correta, mas utilizamos três linhas de código para retornar a mensagem. Se escrevermos ela utilizando uma arrow function, conseguimos reduzir para uma linha e obter o mesmo resultado.

const hello = name => `Olá, ${name}!`

Então executando ambos os códigos passando um nome como parâmetro hello('Astronauta'), obteremos o mesmo retorno Olá, Astronauta!.

Quais as diferenças?

• 1. Removemos a palavra function e inserimos => entre o parâmetro e as chaves
• 2. Removemos as chaves e a palavra return.
• 3. Removemos os parênteses do parâmetro.

Muito mais simples, né?
Refatoramos uma função que ocupava três linhas para uma linha.

O parâmetro name foi definido sem a utilização de parênteses, isso porque ele é um parâmetro único na função. Então, se nossa função tiver dois ou mais parâmetros, o uso dos parênteses é obrigatório.

Como nessa função que executa um cálculo e recebe entre parênteses 3 parâmetros, dois números e um operador para retornar o resultado.

const calculate = (operator, x, y) => eval(`${x} ${operator} ${y}`)

Se executarmos calc('*', 5, 10,) teremos 50 como resultado. Note que foi necessário informar os parâmetros com parênteses.

Nós podemos usar essa sintaxe para definir valores padrão para os parâmetros dessa função, esse é um outro recurso do ECMAScript 6 conhecido como desestruturação (destructuring), com isso podemos apenas informar a operação para a função e ela deverá realizar o cálculo com números já definidos.

const calculate = (operator, [x, y] = [5, 10]) => eval(`${x} ${operator} ${y}`)

Então, se executarmos essa função pasando apenas o operador calculate ('+'), ela vai assumir os valor de y e y que definimos e retornar o resultado como 15.

Essas são apenas algumas formas de utilizar as arrows functions, mas o podem delas vai muito mais além. No site da Mozilla Developer Network, tem essa documentacao com absolutamente tudo sobre as arrow functions, vale muito a pela a leitura.

---