¿Para qué se utilizan los operadores spread y rest en JavaScript?

El operador spread (...) se utiliza para "expandir" objetos iterables (como matrices o cadenas) en lugares donde se esperan cero o más argumentos (al llamar funciones) o elementos (al crear matrices). También se aplica para combinar propiedades de objetos en un nuevo objeto.

// Uso de spread en la llamada a una función
const numbers = [1, 2, 3];
console.log(...numbers); // 1 2 3

// Uso de spread para combinar matrices
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 }

El operador rest (...) se usa en la sintaxis de parámetros de funciones para recopilar todos los argumentos restantes en un array. Esto permite que la función reciba una cantidad indefinida de argumentos. También se aplica en la destructuración de arrays u objetos para recopilar los elementos o propiedades restantes.

// Uso de rest en parámetros de funciones
function sum(...args) {
  // args ahora es un array [1, 2, 3]
  return args.reduce((total, current) => total + current, 0);
}
console.log(sum(1, 2, 3)); // 6

// Uso de rest en destructuración de arrays
const [first, second, ...restOfArray] = [1, 2, 3, 4, 5];
// first = 1, second = 2, restOfArray = [3, 4, 5]

// Uso de rest en destructuración de objetos
const { a, b, ...restOfObject } = { a: 1, b: 2, c: 3, d: 4 };
// a = 1, b = 2, restOfObject = { c: 3, d: 4 }

Diferencia principal:

• Spread "expande" elementos o propiedades.
• Rest "recoge" elementos o propiedades en un array/objeto.