Mutabilidad vs inmutabilidad en arrays de JavaScript

La mutabilidad puede romper estados y generar errores sutiles. Aquí verás por qué modificar el array original causa efectos secundarios, cómo distinguir métodos mutables e inmutables en JavaScript y la forma práctica de aislar estados con map y spread operator sin corromper datos.

¿Por qué la mutabilidad puede causar problemas en arrays?

Cuando mutas, cambias el array original y arrastras consecuencias no deseadas: estados inconsistentes, reportes incorrectos y fallas difíciles de depurar. Aunque suene exagerado, conviene pensar como “centinelas” que evitan mutaciones: en la mayoría de escenarios (alrededor del 60–70 %) se prefiere inmutabilidad para mantener el estado original intacto.

• Una mutación altera el array fuente y su referencia. Puede dañar dashboards y pipelines de datos.
• La inmutabilidad crea un nuevo estado sin tocar el original. Reduce efectos secundarios.
• Las referencias importan: si cambias un objeto por referencia, afectas todas las estructuras que lo comparten.

¿Qué son efectos secundarios y referencias?

• Efectos secundarios: cambios no esperados en estructuras compartidas que impactan otras partes del programa.
• Referencia: el puntero al mismo objeto en memoria. Si lo modificas, todos los arrays que lo contengan verán el cambio.

¿Cómo identificar métodos mutables e inmutables en JavaScript?

Distinguirlos evita sorpresas. Algunos métodos alteran el array original; otros devuelven uno nuevo. Y atención: aunque un método cree un nuevo array, puedes igual mutar por referencia si cambias el objeto interno directamente.

• push: mutable. Agrega elementos y cambia el array original.
• sort: mutable. Reordena el array en su lugar.
• map: inmutable. Crea un array nuevo; no toca el original. Pero si dentro del map modificas propiedades del objeto original, lo cambias por referencia.
• Reto propuesto: clasifica filter y find según su mutabilidad. Úsalos con criterio para mantener estados claros.

¿Cómo evitar mutaciones por referencia con spread operator?

La mejor práctica al transformar colecciones es crear nuevos objetos. Con el spread operator clonas propiedades y añades las nuevas sin tocar la referencia original. Así logras un nuevo estado seguro.

¿Cuál es el antipatrón común con map?

Modificar el objeto directamente dentro de map muta la referencia y afecta ambos arrays.

// Datos de ejemplo
const habits = [
  { name: 'leer', duration: 30, frequency: 'daily', completed: false, counts: 12 },
  { name: 'correr', duration: 45, frequency: 'weekly', completed: true, counts: 89 }
];

// Antipatrón: mutación por referencia dentro de map
const habitsWithCounts = habits.map(habit => {
  habit.totalDuration = habit.counts * habit.duration; // ¡Mutación!
  return habit;
});

console.log('original:', habits);
console.log('derivado:', habitsWithCounts);

// Cualquier cambio directo en la referencia se propaga a ambos
habits[1].extraInfo = 'agregado';
console.log('original (cambiado):', habits);
console.log('derivado (también afectado):', habitsWithCounts);

¿Cómo clonar con spread operator y crear nuevo estado?

Copia todo el objeto y agrega la nueva propiedad. No toques la referencia original.

const habitsSafe = habits.map(habit => ({
  ...habit,
  totalDuration: habit.counts * habit.duration
}));

console.log('original (intacto):', habits);
console.log('derivado (nuevo estado):', habitsSafe);

¿Qué pasa si luego cambias el original?

El derivado permanece estable porque no comparte referencia con el cambio nuevo.

// Cambio directo en el original después del mapeo inmutable
habits[0].extraInfo = 'solo en original';

console.log('original (con cambio):', habits);
console.log('derivado (sin afectar):', habitsSafe);

• Clave: en transformaciones con map, crea un nuevo objeto con spread operator y añade ajustes. Evitas “romper” el estado original.
• Aplica este criterio al trabajar con reportes y estados derivados: mantén el array base inalterado y genera nuevos estados para cada transformación.

¿Con qué estrategias clasificas tus métodos de arrays como mutables o inmutables? ¿Qué patrones sigues para evitar efectos secundarios en tus transformaciones? Comparte tu enfoque y ejemplos en los comentarios.