Patrones de actualización inmutable
Actualice los datos creando copias nuevas.
Patrones de actualización inmutable es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 4 lecciones en total.
Actualizar sin mutar
Las actualizaciones inmutables crean una copia nueva con el cambio aplicado y dejan intacto el original. Este es el fundamento de una gestión de estado predecible en JavaScript moderno.
El operador spread ... es la herramienta principal.
Copiar un objeto con spread
Extienda un objeto dentro de uno nuevo y después sobrescriba una propiedad. El original conserva su valor anterior.
const user = { name: 'Ada', age: 36 };
const older = { ...user, age: 37 };
console.log(user.age);
console.log(older.age);Son objetos diferentes
La copia es un objeto completamente nuevo, no la misma referencia. La comparación de identidad lo confirma.
const original = { x: 1 };
const copy = { ...original };
console.log(original === copy);
console.log(original.x === copy.x);Añadir una propiedad de forma inmutable
Para añadir un campo, extienda el objeto anterior e incluya la nueva clave. El original no obtiene ninguna propiedad.
const point = { x: 1, y: 2 };
const point3d = { ...point, z: 3 };
console.log(point);
console.log(point3d);Eliminar una propiedad de forma inmutable
Utilice la desestructuración para extraer la clave que no desea y recoger el resto. El objeto restante no la incluye.
const user = { id: 1, name: 'Ada', secret: 'x' };
const { secret, ...safe } = user;
console.log(safe);
console.log(user.secret);Copiar matrices con spread
Extienda una matriz para copiarla. Los métodos como map y filter también devuelven matrices nuevas y nunca mutan la matriz de origen.
const nums = [1, 2, 3];
const copy = [...nums];
const doubled = nums.map(n => n * 2);
console.log(nums);
console.log(doubled);Añadir elementos a una matriz de forma inmutable
En lugar de push, que produce una mutación, cree una matriz nueva con spread. La longitud del original permanece igual.
const list = ['a', 'b'];
const added = [...list, 'c'];
const prepended = ['z', ...list];
console.log(list);
console.log(added);
console.log(prepended);Eliminar elementos de una matriz de forma inmutable
Utilice filter para producir una matriz nueva sin el elemento que no desea y dejar intacta la original.
const nums = [1, 2, 3, 4];
const withoutThree = nums.filter(n => n !== 3);
console.log(nums);
console.log(withoutThree);Actualizar objetos anidados
Las actualizaciones anidadas requieren extender cada nivel que cambie. Solo se vuelve a crear la rama modificada; el resto se comparte mediante referencias.
const state = { user: { name: 'Ada', age: 36 }, theme: 'dark' };
const updated = {
...state,
user: { ...state.user, age: 37 }
};
console.log(state.user.age);
console.log(updated.user.age);
console.log(state.theme === updated.theme);Actualizar un elemento de una matriz
Utilice map para devolver una copia modificada del elemento coincidente y el original para los demás. No se muta ningún elemento.
const todos = [
{ id: 1, done: false },
{ id: 2, done: false }
];
const updated = todos.map(t =>
t.id === 2 ? { ...t, done: true } : t
);
console.log(todos[1].done);
console.log(updated[1].done);Por qué importan las actualizaciones inmutables
No mutar nunca el estado compartido hace que la detección de cambios sea económica (se comparan referencias), permite deshacer y rehacer, y evita errores por efectos a distancia. El patrón es: copie y después cambie la copia. Para clones profundos, la siguiente lección explica structuredClone.
function setName(state, name) {
return { ...state, name };
}
const s1 = { name: 'old', count: 0 };
const s2 = setName(s1, 'new');
console.log(s1.name, s2.name);Comprobación rápida
¿Qué produce { ...user, age: 37 } cuando user ya tiene una propiedad age?
Resumen: patrones de actualización inmutable
Ha aprendido a actualizar sin mutar:
- Utilice spread con
{ ...obj, key: value }para copiar y sobrescribir. - Utilice la desestructuración del resto para eliminar una propiedad de forma inmutable.
- Use
map,filtery spread de matrices en lugar depush/splice. - Extienda cada nivel en las actualizaciones anidadas y comparta el resto mediante referencias.
Preguntas frecuentes
¿La lección «Patrones de actualización inmutable» es gratis?
Sí — el texto completo de «Patrones de actualización inmutable» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Patrones de actualización inmutable»?
Actualice los datos creando copias nuevas. Practicas JavaScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar JavaScript Academy?
No se requiere experiencia previa. JavaScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «Patrones de actualización inmutable»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de JavaScript Academy?
Sí. Cada lección de JavaScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Object.freeze y seal
- Congelación superficial frente a profunda
- Patrones de actualización inmutable
- structuredClone para copias profundas