JavaScript Academy · Lección

Cómo evitar la mutación

Trabaje con copias en lugar de mutar los datos.

Cómo evitar la mutación 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.

Por qué evitar las modificaciones

Modificar datos compartidos provoca errores difíciles de rastrear: un cambio en un lugar sorprende al código de otra parte. El estilo funcional favorece crear valores nuevos en lugar de modificar los existentes (inmutabilidad).

const original = [1, 2, 3];
const copy = [...original, 4];
console.log(original); // [1, 2, 3]
console.log(copy);     // [1, 2, 3, 4]

Usar spread para copiar arrays

El operador spread ... crea una copia superficial de un array, lo que permite añadir elementos sin modificar el origen.

const nums = [1, 2, 3];
const more = [...nums, 4, 5];
console.log(more); // [1, 2, 3, 4, 5]
console.log(nums); // [1, 2, 3]

Usar spread para copiar objetos

Spread también funciona con objetos y produce un objeto nuevo con las mismas propiedades, además de cualquier sobrescritura.

const user = { name: "Ada", age: 36 };
const older = { ...user, age: 37 };
console.log(older); // { name: "Ada", age: 37 }
console.log(user);  // unchanged

Métodos de array que no modifican

Prefiera los métodos que devuelven arrays nuevos: map, filter, concat y slice. Evite los que modifican, como push, splice y sort in situ.

const a = [3, 1, 2];
const sorted = [...a].sort((x, y) => x - y);
console.log(sorted); // [1, 2, 3]
console.log(a);      // [3, 1, 2]

Añadir de forma inmutable

En lugar de push, cree un array nuevo con spread o concat.

const list = [1, 2];
const added = [...list, 3]; // not list.push(3)
console.log(added); // [1, 2, 3]

Eliminar de forma inmutable

Use filter para producir un array nuevo sin un elemento, en lugar de splice.

const list = [1, 2, 3, 4];
const without3 = list.filter((n) => n !== 3);
console.log(without3); // [1, 2, 4]

Actualizar un elemento de forma inmutable

Para cambiar un elemento, aplique map al array y devuelva un valor nuevo para el elemento coincidente.

const todos = [{ id: 1, done: false }, { id: 2, done: false }];
const updated = todos.map((t) =>
  t.id === 1 ? { ...t, done: true } : t
);
console.log(updated[0].done); // true

Superficial frente a profunda

Spread copia un nivel de profundidad. Los objetos anidados siguen siendo referencias compartidas. Para actualizar datos anidados de forma inmutable, use spread en cada nivel que cambie.

const state = { user: { name: "Ada", age: 36 } };
const next = {
  ...state,
  user: { ...state.user, age: 37 }
};
console.log(state.user.age); // 36
console.log(next.user.age);  // 37

Congelar para mayor seguridad

Object.freeze evita la modificación accidental de un objeto durante la ejecución, haciendo explícita la inmutabilidad (en un solo nivel).

const config = Object.freeze({ env: "prod" });
config.env = "dev";       // ignored in non-strict mode
console.log(config.env);  // "prod"

Const no significa inmutabilidad

Una confusión habitual: const solo impide reasignar la variable, no modificar el valor que contiene. Un array declarado con const aún puede recibir elementos mediante push.

const arr = [1, 2];
arr.push(3);          // allowed - value mutated
console.log(arr);     // [1, 2, 3]
// arr = [] would throw

Resumen de ventajas

Las actualizaciones inmutables hacen trivial el seguimiento de cambios (comparando referencias), permiten deshacer y rehacer, evitan efectos inesperados a distancia y combinan de forma natural con las funciones puras.

const prev = { count: 0 };
const next = { ...prev, count: 1 };
console.log(prev === next); // false - easy to detect change

Comprobación rápida

Evitar las modificaciones.

Resumen

La inmutabilidad consiste en crear valores nuevos en lugar de modificarlos. Use spread para copiar arrays y objetos, prefiera métodos que no modifican (map, filter y concat) y use spread en cada nivel para las actualizaciones anidadas. Recuerde que const bloquea la reasignación, no la modificación; Object.freeze añade protección durante la ejecución. Las actualizaciones inmutables facilitan la detección de cambios y la escritura de código puro.

Preguntas frecuentes

¿La lección «Cómo evitar la mutación» es gratis?

Sí — el texto completo de «Cómo evitar la mutación» 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 «Cómo evitar la mutación»?

Trabaje con copias en lugar de mutar los datos. 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 «Cómo evitar la mutación»?

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

← Volver a JavaScript Academy