Spread y rest (...)

El operador de tres puntos: ...

El mismo símbolo ... hace dos cosas opuestas según el contexto: spread (expandir) y rest (agrupar).

Spread: expandir

Despliega los elementos de un array u objeto en otro lugar.

const a = [1, 2];
const b = [3, 4];
const juntos = [...a, ...b]; // [1, 2, 3, 4]

const copia = [...a];        // copia superficial de a

También funciona con objetos para copiar y combinar:

const base = { x: 1, y: 2 };
const extendido = { ...base, z: 3 }; // { x: 1, y: 2, z: 3 }

Si hay claves repetidas, gana la última: { ...base, x: 9 } deja x: 9.

Rest: agrupar

En parámetros o en desestructuración, ... agrupa el resto de elementos en un array.

function sumarTodos(...numeros) {
  return numeros.reduce((a, b) => a + b, 0);
}
sumarTodos(1, 2, 3, 4); // 10

const [primero, ...resto] = [10, 20, 30, 40];
console.log(primero); // 10
console.log(resto);   // [20, 30, 40]

Ejemplos

Combinar arrays y objetos con spread

const frutas = ["pera", "uva"];
const masFrutas = ["manzana", ...frutas, "kiwi"];
console.log(masFrutas); // ["manzana", "pera", "uva", "kiwi"]

const usuario = { nombre: "Ana", rol: "user" };
const admin = { ...usuario, rol: "admin" };
console.log(admin); // { nombre: "Ana", rol: "admin" }