Para que são usados os operadores spread e rest em JavaScript?

O operador spread (...) é usado para "expandir" objetos iteráveis (como arrays ou strings) em locais onde se esperam zero ou mais argumentos (ao chamar funções) ou elementos (ao criar arrays). Também é utilizado para combinar propriedades de objetos num novo objeto.

// Uso de spread na chamada de uma função
const numbers = [1, 2, 3];
console.log(...numbers); // 1 2 3

// Uso de spread para combinar arrays
const arr1 = [1, 2];
const arr2 = [3, 4];
const combinedArr = [...arr1, ...arr2]; // [1, 2, 3, 4]

// Uso de spread para combinar objetos
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const combinedObj = { ...obj1, ...obj2 }; // { a: 1, b: 2, c: 3, d: 4 }

O operador rest (...) é usado na sintaxe de parâmetros de funções para recolher todos os argumentos restantes num array. Isto permite que a função receba um número indefinido de argumentos. Também é utilizado na destruturação de arrays ou objetos para recolher os restantes elementos ou propriedades.

// Uso de rest em parâmetros de funções
function sum(...args) {
  // args agora é um array [1, 2, 3]
  return args.reduce((total, current) => total + current, 0);
}
console.log(sum(1, 2, 3)); // 6

// Uso de rest na destruturação de arrays
const [first, second, ...restOfArray] = [1, 2, 3, 4, 5];
// first = 1, second = 2, restOfArray = [3, 4, 5]

// Uso de rest na destruturação de objetos
const { a, b, ...restOfObject } = { a: 1, b: 2, c: 3, d: 4 };
// a = 1, b = 2, restOfObject = { c: 3, d: 4 }

Diferença principal:

• Spread "expande" elementos ou propriedades.
• Rest "reúne" elementos ou propriedades num array/objeto.