Entendendo Arrow Functions no Javascript

Publicado em: 03/06/2020

Sem sombras de dúvidas o Javascript evoluiu muito com o tempo, tornando-se uma linguagem extremamente rica, cheia de nuances e peculiaridades (e muitas controvérsias também). Desde da mais impactante atualização da história da linguagem, ocorrida na especificação ECMAScript 6, o Javascript só ganha mais força.

Uma das adições mais interessante foi as arrow functions, ou funções de seta. Isso porque literalmente usamos caracteres de forma que cria-se um formato de seta. Antes de partir para as arrow functions, vamos primeiro declarar duas funções no modo clássico:

// considere esse monstro:
let monstro = {
  nome: 'Orc',
  hp: 50
}

// funções:
function ataqueSimples (inimigo) {
  inimigo.hp -= 10;
}


function ataqueCarregado (inimigo, tempoCarregado) {
  inimigo.hp -= (10 + tempoCarregado)
}

Aqui temos funções que proferem dano a um inimigo, simplesmente decrementando o hp dele em uma quantia. A primeira recebe um parametro e a segunda dois. Vamos agora atacar o monstro:

ataqueSimples(monstro)
ataqueSimples(monstro)
console.log(monstro) // {nome: 'Orc', hp: 30}

// ou usando a de ataque carregado:
ataqueCarregado(monstro, 5)
console.log(monstro) // {nome: 'Orc', hp: 35}

Vamos reescreve-lás em arrow functions agora:

const ataqueSimples = inimigo => inimigo.hp -= 10;
const ataqueCarregado = (inimigo, tempoCarregado) => {
  inimigo.hp -= (10 + tempoCarregado)
}

Entendendo as diferenças

Na parte estética, logo de cara, percebemos que muita coisa muda:

  • agora atribuimos a função a uma variável (leia mais sobre variáveis em: Um pouco sobre variáveis no Javascript ), criando assim uma expressão e não mais declaramos a função de forma literal;
  • além de abrir o bloco da função simplesmente com chaves temos agora a seta => antes delas;
  • em funções que levam apenas um parametros, podemos omitir os parenteses (perceba na função ataqueSimples);
  • em funções onde o bloco possui apenas uma linha podemos omitir até mesmo as chaves (perceba novamente em ataqueSimples);

No que se diz respeito a chamada da função vemos que nada muda, mas vamos agora aos conceitos por debaixo dos panos:

  • As arrow functions não possuem seu próprio this, arguments e nem podem ser usadas como construtoras;
  • Quando criamos uma arrow function em uma linha, de forma implícita, o que estiver ali é retornado, como se usassemos a palavra reservada return;
  • Não é possível nomear uma arrow function, por isso elas sempre serão anônimas (damos o nome a variável, que contém a arrow function anônima);

Retorno implícito

Como relatado na sessão anterior, as arrow functions podem retornar algo de forma implícita quando nossa função tem apenas uma linha. Veja:

const pedirUmaMusicaAoBardo = musica => `Ei Bardo, toca ${musica}!`;


console.log(
  pedirUmaMusicaAoBardo('Blind Guardian - Bards Song')
)

// Ei Bardo, toca Blind Guardian - Bards Song!

Leia mais sobre concatenação de strings em: Concatenando string no Javascript

A arrow function subentendeu que queriamos que a função retornasse a string. Mas e se tentarmos fazer isso com uma function normal? Vejamos:

function pedirUmaMusicaAoBardo (musica) { `Ei Bardo, toca ${musica}!` }


console.log(
  pedirUmaMusicaAoBardo('Blind Guardian - Bards Song')
)

// undefined

Ou seja, escrevemos uma string lá dentro mas a function não entendeu que queriamos retorná-la. Para consertar isso teriamos de retornar explicitamente, fazendo o seguinte:

function pedirUmaMusicaAoBardo (musica) {
  return `Ei Bardo, toca ${musica}!`
}


console.log(
  pedirUmaMusicaAoBardo('Blind Guardian - Bards Song')
)

// Ei Bardo, toca Blind Guardian - Bards Song!

Considerações finais

As arrow functions realmente vieram para se tornar parte permanente do Javascript, são amplamente usadas em diversos frameworks, encorajadas no paradigma funcional mas realmente não é a bala de prata, devido as suas limitações (como não poder ser usada como construtora).

Você deve avaliar a sua necessidade, apesar de que, em aplicações modernas, você vai poder usar quase que em 100% das vezes. Até o próximo post!

Link para mais informações:

# Javascript