Lección 36: Spread Operator

🧠 Concepto

El spread operator (...) permite expandir elementos de arrays, objetos u otros iterables donde se esperan múltiples argumentos o elementos.

Spread en arrays

// Clonar arrays
const original = [1, 2, 3];
const copia = [...original];
console.log(copia); // [1, 2, 3]
console.log(copia === original); // false (distinta referencia)

// Fusionar arrays
const arr1 = [1, 2];
const arr2 = [3, 4];
const fusionado = [...arr1, ...arr2];
console.log(fusionado); // [1, 2, 3, 4]

// Añadir elementos
const numeros = [1, 2, 3];
const masNumeros = [0, ...numeros, 4, 5];
console.log(masNumeros); // [0, 1, 2, 3, 4, 5]

Spread en objetos

// Clonar objetos
const punto = { x: 1, y: 2 };
const copiaPunto = { ...punto };
console.log(copiaPunto); // { x: 1, y: 2 }

// Fusionar objetos (el último prevalece en caso de conflicto)
const defaults = { tema: 'claro', idioma: 'es', fontSize: 14 };
const usuario = { tema: 'oscuro', idioma: 'en' };
const configuracion = { ...defaults, ...usuario };
console.log(configuracion);
// { tema: 'oscuro', idioma: 'en', fontSize: 14 }

// Añadir propiedades
const base = { nombre: 'Ana' };
const completo = { ...base, edad: 28, ciudad: 'Madrid' };
console.log(completo);
// { nombre: 'Ana', edad: 28, ciudad: 'Madrid' }

Spread en argumentos de función

const numeros = [4, 2, 9, 1, 7];
console.log(Math.max(...numeros)); // 9
console.log(Math.min(...numeros)); // 1

// Equivalente a Math.max.apply(null, numeros)

💻 Ejemplo

// Spread con strings
const letras = [...'Hola'];
console.log(letras); // ['H', 'o', 'l', 'a']

// Convertir NodeList a array
const parrafos = document.querySelectorAll('p');
const arrayParrafos = [...parrafos];

// Spread combinado con destructuring
const [primero, segundo, ...resto] = [1, 2, 3, 4, 5];
console.log(primero); // 1
console.log(segundo); // 2
console.log(resto);   // [3, 4, 5]

// Spread en objetos anidados (copia superficial)
const obj1 = { a: 1, b: { c: 2 } };
const obj2 = { ...obj1 };
obj2.b.c = 99;
console.log(obj1.b.c); // 99 — copia superficial, el objeto anidado se comparte

⚠️ Nota

Rest vs Spread: Ambos usan ... pero son opuestos:

• Rest: Agrupa elementos en un array (en parámetros de función o destructuring)
• Spread: Expande elementos desde un iterable

// Rest (agrupa)
function sumar(...numeros) { // agrupa argumentos en un array
  return numeros.reduce((a, b) => a + b);
}

// Spread (expande)
const nums = [1, 2, 3];
sumar(...nums); // expande el array en argumentos individuales

El spread en objetos solo hace copia superficial (shallow). Para deep clone necesitas structuredClone() o librerías.

🎯 Tip

Usa spread siempre que necesites copiar arrays/objetos de forma inmutable. Es más limpio y legible que concat(), slice(), o Object.assign(). Para evitar mutaciones accidentales en React/Vue, el spread es tu mejor aliado.

📝 Ejercicio

Escribe una función combinarConfiguraciones que reciba dos objetos de configuración y devuelva uno fusionado. Las propiedades del segundo objeto deben sobrescribir las del primero.

function combinarConfiguraciones(config1, config2) {
  // Usa spread operator
}

const base = { host: 'localhost', puerto: 3000, debug: false };
const override = { puerto: 5000, debug: true };

console.log(combinarConfiguraciones(base, override));
// { host: 'localhost', puerto: 5000, debug: true }