Funções e Arrow

Funções tradicionais e arrow functions

JavaScript tem duas formas principais de criar funções. Funções tradicionais (function declaration e function expression) têm seu próprio this, suportam hoisting e têm acesso ao objeto arguments. Arrow functions (=>) são mais concisas, herdam o this do escopo externo e não têm arguments próprio.

Hoisting move declarações de function para o topo do escopo, então você pode chamar uma function declaration antes de defini-la. Function expressions e arrow functions não sofrem hoisting — usar antes de declarar resulta em ReferenceError.

O this é o comportamento mais confuso do JavaScript. Em funções tradicionais, this muda dependendo de como a função é chamada: método de objeto, função livre, callback. Arrow functions resolvem isso ao não ter um this próprio — elas capturam o this do contexto onde foram criadas. Por isso, arrow functions são ideais para callbacks e métodos de classe modernos.

Exemplo.java

// ── Function declaration (sofre hoisting) ────────
saudar("Ana"); // "Olá, Ana!" — funciona antes da declaração!

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

// ── Function expression (sem hoisting) ────────────
// const dobrar = (n) => n * 2; // usar aqui: ReferenceError
const dobrar = (n) => n * 2;
console.log(dobrar(5)); // 10

// ── Arrow functions: variações de sintaxe ─────────
const somar = (a, b) => a + b;          // parâmetros + retorno implícito
const quadrado = n => n ** 2;           // um parâmetro, sem parênteses
const cumprimentar = () => "Olá!";     // zero parâmetros
const criarObjeto = n => ({ valor: n }); // retornar objeto: envolva em ()

// ── O problema do this com callbacks ──────────────
class Timer {
  constructor() {
    this.segundos = 0;
  }

  // ❌ Função tradicional: this seria undefined (strict mode)
  // iniciarErrado() {
  //   setInterval(function() { this.segundos++; }, 1000);
  // }

  // ✅ Arrow function: herda o this do método iniciar
  iniciar() {
    setInterval(() => {
      this.segundos++;
      console.log(this.segundos);
    }, 1000);
  }
}

💡 Dica pro

Regra prática: use arrow functions para callbacks e funções anônimas. Use function declaration para funções nomeadas no topo do módulo. Use function expression raramente.

Recompensa+30 XP+exercícios