Arrow functions vs Functions
Arrow-Funciton, apenas uma sugar syntax? Sera mesmo?
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:
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.
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:
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:
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.
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.
uma solução para usar arrow function neste caso seria usar o spread operator, para criar uma função com REST params, desta forma
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.
Para retornar um objeto em arrow functions sem colchetes, temos que utilizar parenteses
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