Arrow Function em JavaScript – O que é e Como Usá-la?

Você já ouviu falar sobre arrow function em JavaScript? Entenda o conceito por trás dessa função e como usá-la!

Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!

Arrow Function em JavaScript

Na aula de hoje, você vai aprender como funciona a arrow function em JavaScript, entender sua importância e saber como utilizá-la.

Em termos simples, uma arrow function é uma forma concisa de escrever uma função em JavaScript. Ela otimiza a escrita do seu código, deixando-o mais limpo, enxuto e aumentando a legibilidade.

Veremos como podemos fazer essa otimização em alguns casos, transformando funções em arrow functions em JavaScript.

Recomendo que você acompanhe esta aula utilizando algum editor de código para praticar. Isso facilitará seu aprendizado e compreensão. Eu estarei utilizando o Visual Studio Code.

Definindo as Funções em JavaScript

Vamos começar abrindo o Visual Studio Code em uma pasta escolhida para o nosso projeto e criar o arquivo arrow.js.

Dentro desse arquivo, iremos definir algumas funções. Caso você tenha perdido os últimos conteúdos sobre funções em JavaScript (Funções no JavaScript e Funções Anônimas), recomendo fortemente que você os revise, pois entender funções é fundamental na programação.

Vamos criar três funções no arquivo: uma função de subtração, que recebe dois números e retorna o valor da subtração entre eles, uma função de adição, que recebe um número e soma 2 a ele, e uma função que retorna o dia atual.

function subtracao(a, b) {
    return a - b;
}

function somar2(a) {
    return a + 2;
}

function diaDoMes() {
    return new Date().getDate();
}

As funções de subtração e soma são intuitivas, então vou explicar brevemente a função diaDoMes(). Essa função não precisa receber nenhum parâmetro. Através da instrução new Date(), que cria uma informação de data, seguida do método .getDate(), ela retorna o dia atual.

Podemos visualizar essa informação executando o comando:

console.log(diaDoMes());

O que é uma arrow function em JavaScript?

Agora que temos as nossas funções criadas, vamos entender como funcionam e o que são as arrow functions em JavaScript. Uma arrow function nada mais é do que uma forma diferente e mais enxuta de escrever certas funções.

Para compreender melhor, vamos reescrever cada uma das funções que criamos utilizando a sintaxe de arrow function.

const subtracaoVersao2 = (a, b) => a - b;

const somar2Versao2 = a => a + 2;

const diaDoMesVersao2 = () => new Date().getDate();

A primeira mudança que podemos perceber é que nas arrow functions não precisamos usar a palavra-chave function. Em vez disso, as definimos como variáveis constantes e usamos a função como seu valor.

Além disso, utilizamos o sinal => (seta) para definir a instrução da função e o valor que ela irá retornar. Esse símbolo se parece com uma seta, daí o nome arrow function.

Quando uma função tem apenas uma instrução e essa instrução é o retorno (return), não precisamos escrever explicitamente a palavra return. Podemos simplesmente colocar o valor que será retornado após a seta =>.

Outra característica das arrow functions é que, se a função tem apenas um parâmetro, não precisamos colocá-lo entre parênteses. Podemos observar isso na função somar2Versao2.

Por fim, se a função não requer nenhum parâmetro, como a diaDoMesVersao2, basta colocar um par de parênteses vazio ().

Todas essas arrow functions irão funcionar exatamente da mesma maneira que as funções que definimos anteriormente. A única diferença é que elas possuem uma sintaxe mais concisa, o que torna o código mais limpo.

Funções com várias instruções no formato arrow function em JavaScript

Até agora, as funções que definimos usando arrow function tinham apenas uma instrução. Mas e se quisermos usar arrow functions em funções mais complexas?

Vamos começar definindo uma função, da mesma forma que fizemos nos exemplos anteriores:

function superFuncao(a, b) {
    let subtracao = a - b;
    subtracao = subtracao - 2;
    let diaDoMes = new Date().getDate();
    return diaDoMes;
}

Criei essa função apenas para ilustrar, mesmo que não tenha um sentido prático. Ela possui mais de uma instrução e recebe mais de um argumento, o que é importante para observarmos como transformar uma função assim em uma arrow function em JavaScript.

Vamos fazer isso agora:

const superFuncaoVersao2 = (a, b) => {
    let subtracao = a - b;
    subtracao = subtracao - 2;
    let diaDoMes = new Date().getDate();
    return diaDoMes;
}

Repare que agora nossa arrow function é praticamente idêntica à nossa função original. Não foi possível simplificá-la, pois é uma função com mais de um parâmetro e tem mais de uma instrução além do return. Portanto, não há muita diferença entre elas nesse caso específico.

Em resumo, o uso de arrow functions permitirá uma sintaxe mais enxuta em certos casos, mas em outros casos, como funções com várias instruções, a diferença será mínima. Portanto, a escolha de qual sintaxe utilizar será uma questão de preferência pessoal.

Conclusão – Arrow Function em JavaScript

Nessa aula, aprendemos o conceito de arrow function em JavaScript e como utilizá-las para deixar o código mais limpo e conciso.

Através de exemplos práticos, vimos como aplicar arrow functions em diferentes situações. No entanto, é importante ressaltar que em algumas situações, as arrow functions não proporcionarão uma simplificação significativa do código.

Aprender sobre funções é um passo fundamental no JavaScript e na programação de forma geral. Portanto, estude e pratique bastante para dominar esse conceito tão importante e útil para qualquer programador.

Hashtag Treinamentos

Para acessar publicações de JavaScript, clique aqui!

Diego Monutti

Expert em conteúdos da Hashtag Treinamentos. Auxilia na criação de conteúdos de variados temas voltados para aqueles que acompanham nossos canais.