Operadores spread e rest
Os tr?s pontos ... t?m duas fun??es. Spread expande um iter?vel em posi??es separadas; rest re?ne o que sobra. A posi??o na express?o determina o sentido.
Valores com spread
const extras = ["mint", "lemon"];
const menu = ["tea", ...extras];
console.log(menu.join(" / "));
A linha exibida ? exatamente tea / mint / lemon. Os itens de extras, e n?o o array como um item s?, entram no novo array.
Copiar arrays
const extras = ["mint", "lemon"];
const copy = [...extras];
copy[0] = "ginger";
console.log(extras[0]);
console.log(copy[0]);
copy ? um novo array externo; alter?-lo n?o muda extras. ? uma c?pia superficial: objetos e arrays aninhados continuam compartilhados.
Spread de object
const order = { guest: "lida", drink: "tea" };
const withSize = { ...order, size: "regular" };
console.log(order.size);
console.log(withSize.size);
order n?o possui size, mas withSize possui. Spread de object tamb?m ? superficial; valores aninhados n?o se tornam independentes.
Rest re?ne o restante
const menu = ["tea", "mint", "lemon"];
const [first, ...remaining] = menu;
const order = { guest: "lida", drink: "tea" };
const { guest, ...details } = order;
console.log(first, remaining, details);
first ? tea, remaining ? ["mint", "lemon"] e details cont?m drink, n?o guest. Isto apenas contrasta com a aula anterior.
Par?metros rest
<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>Spread and Rest</title></head>
<body>
<p id="result"></p>
<script>
const extras = ["mint", "lemon"];
const menu = ["tea", ...extras];
function list(first, ...others) {
return [first, ...others].join(" / ");
}
document.getElementById("result").textContent = list(...menu);
</script>
</body>
</html>
Em list(...menu), spread ocorre na chamada. Em function list(first, ...others), rest re?ne argumentos extras em um array real. O resultado vis?vel ? tea / mint / lemon.
A tabela deixa a diferença clara: os pontos são os mesmos, mas a posição decide se JavaScript expande valores ou reúne o restante.
📊 Mesmos pontos, duas dire??es
| Posi??o | Significado | Exemplo |
|---|---|---|
| Array, object ou chamada | Spread expande | [..., extras], { ...order }, list(...menu) |
| Liga??o ou par?metro | Rest re?ne | const [first, ...remaining] = menu, function list(first, ...others) |
Pr?tica breve
Altere copy[0] e compare com extras[0]. Adicione um objeto aninhado para observar a c?pia superficial.
Erros comuns
N?o coloque rest no meio, n?o espere c?pia profunda e n?o confunda spread com rest.
Resumo
Spread aparece em array, object ou chamada; rest aparece em liga??o ou par?metro. Os pontos s?o iguais, a fun??o n?o.
🧠 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