Arrow functions vs Functions

Arrow-Funciton, apenas uma sugar syntax? Sera mesmo?

Imagem da serie Arrow

Arrow-Funciton incluida na es6 não é apenas uma sugar syntax de Function, as duas sintaxes tem suas peculiaridades. Abaixo citarei algumas delas e quais as vantagens em usar as Arrow functions.

Oque é arrow function

Arrow function é uma função no javascript, porem ela traz algumas diferenças quando comparada com funções normais, vejamos abaixo:

Lexical this

Ele captura o valor de this do contexto vinculado, ou seja do scopo em que ele se encontra, por exemplo:

Função tradicional em uma função construtora

A função Mensagem ao ser instanciada, retornara um objeto com 2 propriedades, messagem e loggar. Que não logou a menssagem desejada porque o this na linha 8 trata-se da função anônima loggar. Para funcionar como esperado, basta trocar a função na linha 7 por uma arrow function.

Arrow function em uma função construtora

Neste caso funciona como esperado porque o this dentro da arrow function é uma referência do this da função acima no caso a função Mensagem assim o this dentro da função loggar será o mesmo que o da função Mensagem.

Não é hoisted

O conceito de hoisted é poder usar a variável ou função antes de sua declaração, por exemplo:

Exemplo de hoisting

Funções não nomeadas “anonymous-function” não podem ser hoisted, e como arrow functions são apenas anônimas ou seja só podem ser atribuídas a uma variável, então consequentemente não é possível usa-las antes de sua declaração. Segue exemplo:

Hoisting anonymous function

Não pode ser usado como constructor

As arrow functions não podem ser usadas como construtores e caso você tente receberá um erro. O motivo é que, ela contem um this léxico, e não tem prototype, então não faria muito sentido.

Arrow functions não podem ser usadas como contructor

Não contem acesso ao arguments

Arrow functions não contem arguments pelo mesmo fato anterior, arguments também é léxico ou seja sera igual do contexto vinculado, ou não conterá se não estiver no scopo global.

Exemplo de arrow functions não contem arguments

uma solução para usar arrow function neste caso seria usar o spread operator, para criar uma função com REST params, desta forma

Como usar arguments em arrow functions

Sintax

Arrow function alem de ter uma declaração diferente, também podemos omitir os colchetes, quando omitido o colchetes não é necessário usar o return o retorno da função sera igual o retorno da expressão.

Exemplo quando omitir o colchetes

Para retornar um objeto em arrow functions sem colchetes, temos que utilizar parenteses

Retornando objetos em arrow functions

Conclusão

É importante entender que arrow functions não substituem as funções tradicionais, é apenas uma forma de facilitar o trabalho em scopos, então use com sabedoria :D