Operadores spread y rest
Los tres puntos ... tienen dos trabajos. Spread expande un iterable en posiciones separadas; rest re?ne los valores que quedan. La posici?n en la expresi?n determina el significado.
Valores con spread
const extras = ["mint", "lemon"];
const menu = ["tea", ...extras];
console.log(menu.join(" / "));
La l?nea impresa es exactamente tea / mint / lemon. extras no entra como un solo elemento; sus elementos pasan al nuevo array.
Copiar arrays
const extras = ["mint", "lemon"];
const copy = [...extras];
copy[0] = "ginger";
console.log(extras[0]);
console.log(copy[0]);
copy es un array exterior nuevo; cambiarlo no cambia extras. Es una copia superficial: los objetos o arrays anidados siguen compartidos.
Spread de object
const order = { guest: "lida", drink: "tea" };
const withSize = { ...order, size: "regular" };
console.log(order.size);
console.log(withSize.size);
order no tiene size, pero withSize s?. El spread de object tambi?n es superficial; los valores anidados no se independizan.
Rest re?ne lo 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 es tea, remaining es ["mint", "lemon"] y details tiene drink, pero no guest. Esto solo contrasta con la lecci?n anterior de destructuring.
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>
En list(...menu) se expande en la llamada. En function list(first, ...others), rest re?ne argumentos extra en un array real. El resultado visible es tea / mint / lemon.
La tabla aclara la diferencia: los puntos son los mismos, pero su posición decide si JavaScript expande valores o reúne lo restante.
📊 Los mismos puntos, dos direcciones
| Posici?n | Significado | Ejemplo |
|---|---|---|
| Array, object o llamada | Spread expande | [..., extras], { ...order }, list(...menu) |
| Asignaci?n o par?metro | Rest re?ne | const [first, ...remaining] = menu, function list(first, ...others) |
Pr?ctica breve
Cambia copy[0] y comp?ralo con extras[0]. A?ade un objeto anidado para observar la copia superficial.
Errores habituales
No pongas un par?metro rest en medio, no esperes una copia profunda y no confundas spread con rest.
Resumen
Spread aparece en un array, object o llamada; rest aparece en una asignaci?n o par?metro. Los puntos son iguales, su trabajo no.
🧠 Pon a Prueba tu Conocimiento
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior