Desvendando a Arrow Function JavaScript

Desvendando a Arrow Function JavaScript

02/06/2018 0 Por Alisson Suassuna

Olá galera, hoje vamos desvendar a arrow function, esse recurso veio na versão ecmascript 6 (também conhecida como ecmascript 2015). Podemos citar duas características fortes para esse novo recurso da linguagem, primeiro uma redução de escrita e segundo é ter um this associado a um contexto, no qual a função foi escrita.

Primeira Característica Reduzir a Sintaxe

Arrow Function

Nota: Outra característica da arrow function é que ela é anônima ou seja sempre terá que está atribuída a uma variável.

Podemos também escrever dessa forma, onde tiramos o corpo da função, mas nesse caso, só podemos retornar uma única linha. A ideia é forçar ao programador a criar funções especialista, facilitando assim o reuso de código e trazendo uma manutenabilidade maior ao mesmo. Nós como programadores devemos nos preocupar com a legibilidade e reuso quando escrevemos, recomendo a todos a leitura o livro código limpo do autor Robert Cecil Martin onde ele esplana com mais propriedade sobre o assunto.

Como citei acima quando a função possui um único retorno, podemos omitir na escrita.

Quando não queremos passar nenhum parâmetro para a função podemos eliminar o uso do parentese (), e escrever um underline_ como sinal que essa função não tem nenhum parâmetro. Mas para o javascript a função continua tendo parâmetro.

Segunda Característica: ter um this associado a uma função

O this dentro de uma arrow function ele é fixo, ou seja, ele é baseado no contexto de onde a função foi escrita, os locais de onde as funções estão sendo invocadas não influencia o valor do this.

Aqui temos uma função com o nome Pessoa, que temos uma idade que inicia com valor 0, tem uma segunda função setInterval() que recebe como parâmetro uma arrow function onde incremento + 1 ao valor de idade, mostrando na tela com o console.log(), o segundo parâmetro da função setInterval() é o tempo que essa função será invocada a cada 1000 Milissegundos que dá 1 segundo. Recapitulando a cada segundo a função setInterval() será invocada e a idade recebera +1.

Nota: quando executamos essa função o this fica realmente fixo.

Analisando o this

Aqui estou verificando se o this é estritamente igual a variável global.

Como estou executando o meu javascript no nodejs a variável global se chama global, já nos navegadores se chama window.

Arrow Function

imagem do inspetor do navegador

Então como vimos no exemplo, devemos ter bastante cuidado na hora de invocar o this que está dentro de uma função e atribuir algo a ele, pois vamos está trabalhando diretamente com o escopo global e não com o da função.

Para resolvemos esse problema de escopo antes de ter a arrow function tínhamos que usar a função bind(). Veja:

Agora com Arrow Function

Com o uso das arrow function o this não irá variar, será sempre fixo, pois ele leva em consideração o contexto léxico, onde foi escrito e apontará para o mesmo.

Resumindo tudo que vimos e testamos, o this de uma função normal aponta para a variável global (Executando o código no nodejs a variável chama-se global e nos browsers se chama window).
[Olá gente, esse espaço foi criado para compartilhar conhecimento, caso eu tenha errado algo por favor deixe nos comentários que terei o prazer de fazer a correção e citar o autor.]

By: Alisson Suassuna

Veja também: Usando o operador destruturing