DevPath · Aprenda a programar ESPTEN

Funções

Arrow functions

Arrow functions (funções de seta)

Depois que você pega o jeito das funções, passa a escrevê-las o tempo todo. As arrow functions são a versão compacta: a mesma ideia, menos teclas. Chegaram no ES6 e usam o símbolo => (a seta que dá nome a elas).

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

Retorno implícito

Se a função tem apenas uma expressão, você pode omitir as chaves e a palavra-chave return. O resultado é retornado automaticamente:

const somar = (a, b) => a + b;
const quadrado = n => n * n;   // um único parâmetro: parênteses opcionais
const saudar = () => "Olá";    // sem parâmetros: parênteses obrigatórios

Cuidado ao retornar objetos

⚠️ Pegadinha clássica: para retornar um objeto literal diretamente, envolva-o em parênteses. Se não, o JavaScript acha que essas chaves são o corpo da função e te devolve undefined sem avisar:

const criarPonto = (x, y) => ({ x: x, y: y });

As arrow functions brilham nas funções curtas que você passa para métodos de array como map ou filter (logo logo você as verá). Acostume-se com essa seta: você vai escrever um montão delas.

Exemplos

Três formas equivalentes

const triplo1 = function (n) { return n * 3; };
const triplo2 = (n) => { return n * 3; };
const triplo3 = n => n * 3; // a mais compacta
console.log(triplo1(2), triplo2(2), triplo3(2)); // 6 6 6
Coloque isto em prática

O DevPath é um curso prático: aqui você lê a teoria; no app você a coloca em prática com exercícios que rodam de verdade, offline.

Comece grátis no app →
← Declaração vs expressão de funçãoParâmetros, valores padrão e return →