Spread e rest (...)

O operador de três pontos: ...

O mesmo símbolo ... faz duas coisas opostas dependendo do contexto: spread (expandir) e rest (agrupar).

Spread: expandir

Espalha os elementos de um array ou objeto em outro lugar.

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

const copia = [...a];        // cópia superficial de a

Também funciona com objetos para copiar e combinar:

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

Se houver chaves repetidas, a última vence: { ...base, x: 9 } deixa x: 9.

Rest: agrupar

Em parâmetros ou na desestruturação, ... agrupa o resto dos elementos em um array.

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

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

Exemplos

Combinar arrays e objetos com spread

const frutas = ["pera", "uva"];
const maisFrutas = ["maçã", ...frutas, "kiwi"];
console.log(maisFrutas); // ["maçã", "pera", "uva", "kiwi"]

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