¿En actualizacin de estado, cuando usar spread en objetos?

Spread evita mutación directa, pero es copia superficial.

Spread y rest: copiar, fusionar y agrupar datos sin mutaciones peligrosas

Domina los operadores spread (`...`) y rest para trabajar con arrays/objetos de forma inmutable, construir funciones flexibles y evitar bugs por referencia compartida.

¿Cuánto sabes de JavaScript?

📘 Teoría

Idea clave: inmutabilidad práctica, no teoría vacía

Spread/rest te ayudan a crear nuevas estructuras en vez de modificar las existentes.

En interfaces reactivas, mutar estado original suele producir comportamientos difíciles de rastrear. Crear copias controladas mejora previsibilidad.

La regla de oro: si un dato se comparte entre varias partes del sistema, evita mutarlo directamente.

Spread en arrays

Copiar/fusionar listas sin tocar fuente.

const nuevo = [...original]
const total = [...a, ...b]

Spread en objetos

Crear objetos nuevos con overrides claros.

const copy = { ...obj }
const actualizado = { ...obj, activo: true }

Rest en funciones

Agrupar argumentos variables.

function sumar(...nums) {}
Flexible para utilidades

Rest en destructuring

Separar una parte y conservar el resto.

const { id, ...resto } = user
const [primero, ...resto] = lista

Spread en arrays: combinar y actualizar listas

Patrón central para formularios, carritos, filtros y estado de UI.

Con spread puedes añadir, quitar o reordenar elementos creando una nueva referencia. Esto evita efectos colaterales sobre la lista original.

En estado de frontend, este enfoque facilita detectar cambios y renderizar correctamente.

`[...lista, item]` añade al final.
`[item, ...lista]` añade al inicio.
Combinar: `[...listaA, ...listaB]`.

Añadir elemento sin mutar

const tareas = ['estudiar', 'practicar'];
const nuevaTarea = 'repasar';

const actualizado = [...tareas, nuevaTarea];

console.log('original:', tareas);
console.log('nuevo:', actualizado);

Spread en objetos: actualizaciones parciales limpias

Ideal para actualizar una propiedad conservando el resto.

`{ ...obj, campo: nuevoValor }` crea un objeto nuevo con todas las propiedades previas y sobreescribe las indicadas al final.

Ojo con objetos anidados: spread hace copia superficial. Si necesitas copia profunda, hay que aplicar estrategia adicional.

Actualizar perfil

const perfil = {
  id: 7,
  nombre: 'Lucía',
  preferencias: { tema: 'oscuro' }
};

const perfilActualizado = {
  ...perfil,
  nombre: 'Lucía Gómez'
};

console.log(perfil);
console.log(perfilActualizado);

Rest en funciones: APIs flexibles de argumentos

Cuando no sabes cuántos valores llegarán, `...args` es tu aliado.

Rest agrupa argumentos en un array real, lo que te permite iterar, validar y calcular sin depender del objeto `arguments` antiguo.

Coloca rest al final de la firma: solo puede haber un rest parameter y debe ser el último.

Sumador flexible

function sumar(...numeros) {
  let total = 0;

  for (let i = 0; i < numeros.length; i++) {
    total += numeros[i];
  }

  return total;
}

console.log(sumar(4, 8, 10));

Errores de referencia compartida y cómo detectarlos

Si dos variables cambian a la vez, probablemente comparten referencia.

Asignar `const b = a` no copia arrays/objetos, solo copia la referencia. Por eso modificar `b` afecta `a`.

Para depurar, compara por identidad (`===`) y registra antes/después de cada operación.

Comparar referencia

const a = [1, 2, 3];
const b = a;
const c = [...a];

console.log(a === b); // true
console.log(a === c); // false

1 Idea clave: inmutabilidad práctica, no teoría vacía 2 Spread en arrays: combinar y actualizar listas 3 Spread en objetos: actualizaciones parciales limpias 4 Rest en funciones: APIs flexibles de argumentos 5 Errores de referencia compartida y cómo detectarlos

🧪 Aprende probando

Ejemplo Ejemplo guiado: carrito sin mutación Añade productos y aplica descuento creando siempre nuevas estructuras.

⌄

Ejemplo Ejemplo guiado: función de etiquetas dinámicas Usa rest para aceptar un número variable de etiquetas y serializarlas.

⌄

Ejemplo Demo interactiva: combinar y filtrar tags Escribe tags separadas por coma, añade nuevas y visualiza copia inmutable en tiempo real.

⌄

🏁 Retos

Reto Reto 1: actualiza usuario sin mutar original Crea `usuarioActualizado` con spread cambiando solo `activo` y `rol`.

⌄

Reto Reto 2: función de suma con rest y validación Implementa `sumarValidos(...valores)` sumando solo números válidos mayores que 0.

⌄

🧰 Recursos

Enlaces útiles

javascript.info: Rest parameters and spread MDN: Spread syntax MDN: Rest parameters MDN: Object initializer (spread en objetos) MDN: Array.prototype.concat web.dev: JavaScript data structures

Test

Comprueba tus conocimientos con un test sobre JavaScript.

Test de JavaScript

Recursos del curso 62

📘 Glosario 🎧 Audios 📄 PDFs 🖼️ Infografías 🎬 Vídeos 🔗 Enlaces 🧠 Flashcards 🧩 Snippets

‹

Lección 16

Destructuring en arrays y objetos: leer datos complejos con código limpio

Lección 18

Métodos de array en producción: map, filter y reduce con criterio

›