Funções seta
Você já sabe declarar uma função, passar argumentos e devolver um valor com return. Muitos ajudantes do dia a dia são tão curtos que a palavra function completa parece pesada. O JavaScript também permite escrevê-los com uma seta — o token => — numa linha mais compacta.
O que é uma função seta
Continua sendo uma função: recebe entradas, executa um corpo e pode devolver um resultado. Muda só a forma. Costuma ficar num const, listar parâmetros, escrever => e depois uma expressão curta ou um bloco { }.
Seta ao lado da função clássica
📊 Função clássica versus seta
| Ideia | Estilo clássico | Estilo seta |
|---|---|---|
| ajudante nomeado | function add(a, b) { return a + b; } |
const add = (a, b) => a + b; |
| devolver uma expressão | return a + b; dentro de { } |
a expressão após => volta sozinha |
| várias instruções | { } mais return |
mesma regra: { } e return |
| um parâmetro | (name) |
name => ... (parênteses opcionais) |
| sem parâmetros | function hi() { ... } |
const hi = () => ... — () vazios obrigatórios |
| onde vive | declaração ou expressão | quase sempre numa variável |
Os dois estilos podem devolver números e strings. Prefira a seta quando o ajudante é pequeno e você quer um nome claro com const. Prefira function clássica quando um bloco nomeado deve se destacar — ambos são JavaScript válido.
const double = (n) => n * 2;
let answer = double(5);
console.log(answer);
O corpo expressão devolve sozinho
Depois de =>, uma única expressão é avaliada e devolvida automaticamente. Sem { } e sem a palavra return. Aqui double(5) vira 10. Mude o argumento; o produto acompanha.
const label = (score) => {
if (score < 0) {
return "invalid";
}
return "ok";
};
console.log(label(-1));
console.log(label(8));
Chaves significam que você controla o return
Quando o corpo usa { }, o JavaScript não devolve a última linha sozinho. Escreva return você mesmo, como numa função clássica. Saídas antecipadas e lógica em etapas ficam legíveis.
const greet = name => "Hello, " + name;
let line = greet("Sara");
console.log(line);
Um parâmetro pode omitir os parênteses
Se há exatamente um parâmetro, você pode escrever name => ... sem ( ). O local da chamada não muda: greet("Sara"). Com dois ou mais parâmetros, mantenha os parênteses.
const hello = () => "Hello";
console.log(hello());
Zero parâmetros ainda precisam de ()
Sem entradas, escreva parênteses vazios antes de =>. Omiti-los é erro de sintaxe. A chamada continua hello() — o par vazio marca «sem parâmetros».
const add = (a, b) => a + b;
let total = add(3, 4);
console.log(total);
console.log(add(10, 2));
Dê um nome e depois chame
const add = (a, b) => a + b guarda a seta em add. Você chama como qualquer função: add(3, 4) devolve 7. O mesmo ajudante, duas chamadas — sem reescrever o corpo.
Coloque uma seta na página
Monte uma saudação com uma seta, chame-a e escreva o resultado num parágrafo — o mesmo padrão de página, forma mais curta.
<!DOCTYPE html>
<html>
<head>
<title>arrow — page</title>
</head>
<body>
<p id="msg">…</p>
<script>
const welcome = guest => "Hello, " + guest;
let box = document.getElementById("msg");
box.textContent = welcome("Omar");
</script>
</body>
</html>
O parágrafo mostra Hello, Omar. A seta devolveu a string; a linha seguinte a colocou na página. Mude só o argumento, atualize e leia a nova linha. A próxima lição trata de escopo — onde esses nomes são visíveis.
Passos de prática
- Reescreva
function triple(n) { return n * 3; }como setaconstcom corpo expressão. - Escreva
const hi = name => "hi " + namee registrehi("Neda"). - Escreva
const ping = () => "pong"e chame uma vez. - Escreva uma seta com bloco que devolva
"zero"sen === 0, senão"nonzero". - Após
const add = (a, b) => a + b, confirme queadd(6, 1)dá7. - Na demo HTML, mude só a string do argumento, atualize e leia o parágrafo.
Escorregões comuns
- Abrir
{ }após=>e esquecerreturn— a chamada rendeundefined - Tirar
()quando há zero parâmetros - Confundir
=>com operadores de comparação — a seta é sintaxe de função, não «maior que» - Esperar aqui uma lição completa de
this— diferenças de ligação ficam para depois; aqui é a forma compacta - Achar que setas substituem o conhecimento de
return— expressões ainda devolvem; blocos ainda precisam dereturn
Resumo
- Funções seta usam
=>e costumam ficar emconst - Uma expressão nua após
=>devolve sozinha - Um corpo
{ }precisa dereturnexplícito - Um parâmetro pode omitir
( ); zero parâmetros precisam de()vazios - Chame a seta pelo nome como qualquer função
- A página pode usar uma string devolvida por uma seta
- Próximo: escopo — onde os nomes vivem
🧠 Teste Seu Conhecimento
Teste Seu Conhecimento
Desafie-se com este questionário interativo e veja o quão bem você entende o tópico
📝 Instruções
- Leia cada pergunta cuidadosamente
- Selecione a melhor resposta para cada pergunta
- Você pode refazer o quiz quantas vezes quiser
- Seu progresso será mostrado no topo