Arrow Functions em JavaScript: guia atualizado para 2026

As arrow functions em JavaScript deixaram de ser novidade. Hoje, aparecem na maioria dos projetos modernos, de componentes React a rotas de API em Node.

Por isso, entender bem esse recurso não é mais opcional para quem programa em JS.

O que são arrow functions em JavaScript?

São uma forma mais curta de escrever funções, introduzida no ES6. A sintaxe tradicional exige a palavra function:

function saudacao(nome) {
  return `Olá, ${nome}!`
}

Já a arrow function reduz isso a uma linha:

const saudacao = nome => `Olá, ${nome}!`

O nome vem do sinal =>, que lembra uma seta. Além disso, quando a função tem apenas um parâmetro, os parênteses são opcionais. Com dois ou mais, porém, eles se tornam obrigatórios:

const somar = (a, b) => a + b

Por que usar arrow functions além da sintaxe curta?

A vantagem real não é só economizar linhas. Arrow functions não criam seu próprio this. Em vez disso, usam o this do contexto onde foram definidas.

Em funções tradicionais, o valor de this muda dependendo de como a função é chamada. Consequentemente, isso costuma gerar bugs difíceis de rastrear.

Arrow functions eliminam essa armadilha, principalmente dentro de callbacks e métodos de array como map, filter e reduce.

class Contador {
  constructor() {
    this.valor = 0
  }
  
  iniciar() {
    setInterval(() => {
      this.valor++
    }, 1000)
  }
}

Nesse exemplo, a arrow function dentro do setInterval mantém o this da classe Contador. Já uma função tradicional, no mesmo lugar, perderia essa referência.

Como as arrow functions são usadas em React?

São praticamente indispensáveis. Componentes funcionais em React costumam ser escritos como arrow functions:

const Botao = ({ texto, aoClicar }) => {
  return <button onClick={aoClicar}>{texto}</button>
}

Além disso, hooks como useEffect e useCallback dependem do comportamento previsível do this das arrow functions. Ou seja, quem trabalha com React hoje esbarra nesse recurso o tempo todo, mesmo sem perceber.

Quando não devo usar arrow functions?

Nem todo lugar pede arrow function. Métodos de objeto que precisam acessar o próprio objeto via this, por exemplo, funcionam melhor com a sintaxe tradicional:

const usuario = {
  nome: 'Ana',
  saudar: function() {
    return `Oi, eu sou ${this.nome}`
  }
}

Se saudar fosse escrito como arrow function, this não apontaria para usuario, e o código quebraria. Da mesma forma, o mesmo vale para métodos de prototype e para funções que precisam do objeto arguments, que arrow functions não possuem.

Por que evitar eval() em exemplos com arrow functions?

Porque abre brechas de segurança sérias. Versões antigas de exemplos com arrow functions costumavam usar eval() para simular cálculos dinâmicos, mas esse recurso executa qualquer string como código.

Se o valor vier de uma fonte não confiável, como um formulário, o risco é real. Por isso, uma alternativa mais segura é usar um objeto como mapa de funções:

const operacoes = {
  '+': (x, y) => x + y,
  '-': (x, y) => x - y,
  '*': (x, y) => x * y
}

const calcular = (operador, x, y) => operacoes[operador](x, y)

Assim, o resultado é o mesmo, sem os riscos do eval().

Como funcionam arrow functions com TypeScript?

Da mesma forma que funções tradicionais, só que com tipagem explícita:

const somar = (a: number, b: number): number => a + b

Times que priorizam manutenção a longo prazo usam essa combinação com frequência cada vez maior, porque esses projetos costumam adotar o TypeScript como padrão.

Portanto, dominar arrow functions em JavaScript exige muito mais do que escrever menos código.

Significa entender como o this se comporta, saber quando a sintaxe curta ajuda, e aplicar isso em contextos reais como React e TypeScript.

Wallace Erick