Funções anônimas e Arrow Functions: formas modernas de escrever funções

Conheça estilos mais concisos e flexíveis para criar funções.

Até aqui, você criou funções com function nomeDaFuncao() { ... }.
Agora vamos conhecer duas formas muito usadas no JavaScript moderno:

  • Funções anônimas (funções sem nome)
  • Arrow Functions (funções com seta =>)

Pense assim: você já aprendeu a escrever uma receita completa com título.
Agora vai aprender também a escrever versões mais rápidas da mesma receita.


1) O que é função anônima?

É uma função sem nome próprio, geralmente guardada em uma variável.

const saudacao = function () {
  console.log("Olá!");
};

saudacao();

Aqui:

  • a função não tem nome depois de function;
  • quem “carrega” a função é a variável saudacao.

2) Por que usar função anônima?

Porque ela é prática em cenários como:

  • passar função como argumento;
  • usar em eventos;
  • criar lógica pontual sem precisar nomear tudo.

Exemplo:

setTimeout(function () {
  console.log("Executou depois de 1 segundo");
}, 1000);

3) O que é Arrow Function?

É uma forma mais curta de escrever função, usando =>.

const saudacao = () => {
  console.log("Olá com arrow!");
};

saudacao();

4) Comparando formas

Função tradicional

function somar(a, b) {
  return a + b;
}

Função anônima

const somar = function (a, b) {
  return a + b;
};

Arrow Function

const somar = (a, b) => {
  return a + b;
};

As três podem resolver o mesmo problema.


5) Arrow com retorno curto (implícito)

Quando a função tem só uma expressão, você pode simplificar:

const dobro = n => n * 2;

console.log(dobro(5)); // 10

Sem chaves, o retorno já acontece automaticamente.


6) Casos comuns no dia a dia

Arrow functions aparecem muito com arrays:

const numeros = [1, 2, 3, 4];

const dobrados = numeros.map(n => n * 2);

console.log(dobrados); // [2, 4, 6, 8]

7) Atenção importante com this

Arrow function não cria seu próprio this.
Isso é ótimo em alguns casos, mas pode confundir em outros.

Para quem está começando, regra prática:

  • use arrow para funções curtas e callbacks;
  • em objetos e cenários com this, teste com atenção.

8) Boas práticas

  • Prefira nomes claros na variável que guarda a função.
  • Use arrow para código curto e legível.
  • Não escolha “porque é moderno”; escolha quando deixar mais claro.
  • Mantenha consistência no projeto.

Resumo da lição

Função anônima é uma função sem nome direto, geralmente armazenada em variável.
Arrow function é uma sintaxe mais curta e moderna para escrever funções.
As duas ajudam a escrever código mais enxuto, especialmente em callbacks e manipulação de listas.