Javascript→Arrow Functions

Arrow Functions

Arrow Functions em JavaScript: Um Guia Completo para Iniciantes

Olá, dev! Vamos mergulhar no mundo das Arrow Functions, uma das features mais amadas do JavaScript moderno. Se você já viu aquela setinha => e ficou confuso, esse guia é para você.

O que são Arrow Functions?

Arrow Functions são uma forma mais concisa de escrever funções em JavaScript. Elas foram introduzidas no ES6 (2015) e desde então se tornaram super populares.

Sintaxe Básica

A sintaxe tradicional vs arrow function:

// Função tradicional
function somar(a, b) {
  return a + b;
}

// Arrow function equivalente
const somar = (a, b) => {
  return a + b;
};

Percebeu a diferença? A seta => substitui a palavra function.

Quando Omitir Chaves e Return

Aqui vai uma dica de ouro: se sua função tem apenas uma expressão, você pode simplificar ainda mais:

// Com chaves e return explícito
const dobrar = (numero) => {
  return numero * 2;
};

// Sem chaves e return implícito
const dobrar = (numero) => numero * 2;

Nesse caso, o return está implícito. Mas cuidado: isso só funciona se for uma única expressão!

// ERRADO - não funciona assim
const calcular = (a, b) => {
  const resultado = a + b;
  resultado * 2; // Isso não retorna nada!
};

// CERTO - precisa de return explícito
const calcular = (a, b) => {
  const resultado = a + b;
  return resultado * 2;
};

Parênteses nos Parâmetros

Mais uma simplificação: quando sua função tem apenas um parâmetro, você pode omitir os parênteses:

// Com um parâmetro
const quadrado = x => x * x;

// Com múltiplos parâmetros - precisa de parênteses
const soma = (a, b) => a + b;

// Sem parâmetros - precisa de parênteses vazios
const saudacao = () => "Olá!";

A Grande Diferença: O Comportamento do `this`

Aqui está a parte mais importante e que mais confunde iniciantes. O this em arrow functions se comporta de maneira completamente diferente.

Como funciona o `this` em funções tradicionais

const usuario = {
  nome: "João",
  saudacao: function() {
    console.log("Olá, " + this.nome); // this = usuario
  }
};

usuario.saudacao(); // "Olá, João"

O problema com funções tradicionais

const usuario = {
  nome: "João",
  amigos: ["Maria", "Pedro"],
  listarAmigos: function() {
    this.amigos.forEach(function(amigo) {
      console.log(this.nome + " tem o amigo " + amigo);
      // this aqui NÃO é o objeto usuario!
      // this = undefined (ou window no navegador)
    });
  }
};

usuario.listarAmigos();
// Saída: undefined tem o amigo Maria
// Saída: undefined tem o amigo Pedro

Solução com Arrow Functions

const usuario = {
  nome: "João",
  amigos: ["Maria", "Pedro"],
  listarAmigos: function() {
    this.amigos.forEach((amigo) => {
      console.log(this.nome + " tem o amigo " + amigo);
      // this AQUI é o objeto usuario!
    });
  }
};

usuario.listarAmigos();
// Saída: João tem o amigo Maria
// Saída: João tem o amigo Pedro

Regra de ouro: Arrow functions não têm seu próprio this. Elas "herdam" o this do escopo onde foram criadas.

Quando Usar Arrow vs Função Tradicional

Use Arrow Functions quando:

Callbacks simples - especialmente em map, filter, reduce

const numeros = [1, 2, 3, 4, 5];
const dobrados = numeros.map(n => n * 2);

Funções curtas - uma linha só

const ehPar = num => num % 2 === 0;

Preservar o this do escopo externo

class Botao {
  constructor(texto) {
    this.texto = texto;
  }
  
  clicar() {
    // Arrow function preserva o this da classe
    setTimeout(() => {
      console.log(`Botão ${this.texto} clicado`);
    }, 1000);
  }
}

Use Funções Tradicionais quando:

Métodos de objetos que precisam acessar this

const carro = {
  marca: "Toyota",
  acelerar: function() {
    console.log(this.marca + " acelerou");
  }
};

Funções construtoras (arrow functions não podem ser usadas com new)

// ERRADO - não funciona
const Carro = (marca) => {
  this.marca = marca;
};
const meuCarro = new Carro("Toyota"); // Erro!

// CERTO
function Carro(marca) {
  this.marca = marca;
}
const meuCarro = new Carro("Toyota");

Quando precisar do objeto arguments

// Arrow functions não têm arguments
const soma = () => {
  console.log(arguments); // Erro!
};

// Função tradicional tem
function soma() {
  console.log(arguments); // Funciona!
}

Exemplos Práticos do Dia a Dia

1. Filtrando Arrays

const usuarios = [
  { nome: "Ana", idade: 25 },
  { nome: "João", idade: 17 },
  { nome: "Maria", idade: 30 }
];

// Arrow function deixa mais limpo
const maiores = usuarios.filter(usuario => usuario.idade >= 18);
console.log(maiores); // [{nome: "Ana", ...}, {nome: "Maria", ...}]

2. Ordenando Arrays

const precos = [100, 50, 200, 150];
precos.sort((a, b) => a - b);
console.log(precos); // [50, 100, 150, 200]

3. Event Listeners

const botao = document.querySelector("button");

// Cuidado com o this aqui!
botao.addEventListener("click", () => {
  // this NÃO é o botão aqui!
  // this = window (ou undefined em strict mode)
});

// Se precisar do this do botão, use function
botao.addEventListener("click", function() {
  this.style.backgroundColor = "blue";
});

Erros Comuns e Como Evitá-los

Erro 1: Esquecer o return implícito com objetos

// ERRADO - retorna undefined
const criarUsuario = (nome, idade) => { nome, idade };

// CERTO - precisa de parênteses no objeto
const criarUsuario = (nome, idade) => ({ nome, idade });

Erro 2: Usar arrow function como método

const calculadora = {
  valor: 10,
  // ERRADO - this não funciona
  dobrar: () => this.valor * 2,
  
  // CERTO
  dobrar: function() {
    return this.valor * 2;
  }
};

Erro 3: Tentar usar bind, call ou apply com arrow functions

const saudacao = () => console.log(this.nome);

// Isso NÃO funciona - arrow functions ignoram bind
const saudacaoJoao = saudacao.bind({ nome: "João" });
saudacaoJoao(); // undefined

Dicas Finais

Seja consistente - escolha um estilo e mantenha ele no seu código
Prefira arrow functions para callbacks - elas deixam o código mais limpo
Use funções tradicionais para métodos - quando precisar do this dinâmico
Lembre-se: arrow functions são sempre anônimas (você precisa guardar em variáveis)

// Arrow function anônima guardada em variável
const minhaFuncao = () => {};

// Função tradicional nomeada
function minhaFuncao() {}

E aí, curtiu? Arrow functions são poderosas e vão tornar seu código JavaScript muito mais elegante. Pratique esses exemplos e logo você estará usando elas naturalmente no seu dia a dia como dev!

← Funções Objetos →