Alternativas inmutables a push, pop y sort

Trabajar con arrays sin mutarlos mejora la legibilidad, evita efectos secundarios y facilita el control del estado. Aquí verás cómo replicar métodos como push, pop, shift, sort y reverse de forma inmutable con técnicas sencillas en JavaScript, y cuándo conviene clonar o usar Immutable JS.

¿Cómo trabajar con inmutabilidad en arrays de JavaScript?

Mantener el array original intacto es una buena práctica cuando necesitas preservar el estado. Métodos como map, reduce y filter ya devuelven nuevos arrays; en cambio, push, pop, shift, sort y reverse mutan el original. La estrategia recomendada es: usar spread operator para clonar y slice para segmentar.

• Spread operator: clona elementos y construye nuevos arrays.
• Slice: crea particiones sin mutar.
• Clonación previa: permite aplicar métodos mutables sobre la copia.
• Efectos secundarios: mutar puede impedir un rollback al orden o estado previo.

¿Qué alternativas inmutables reemplazan push, pop, shift, sort y reverse?

A continuación, técnicas prácticas para lograr el mismo efecto sin tocar el original.

¿Cómo agregar y quitar al final sin mutar?

• Agregar al final (equivalente a push).

const nueva = [...lista, item];

• Quitar el último (equivalente a pop).

const nueva = lista.slice(0, -1);

Claves: se crea una nueva lista en ambos casos; el array original no cambia.

¿Cómo agregar y quitar al inicio sin mutar?

• Agregar al inicio (equivalente a unshift).

const nueva = [item, ...lista];

• Quitar el primero (equivalente a shift).

const nueva = lista.slice(1);

La idea es explícita: pones el nuevo elemento al inicio o tomas la cola del array sin el primer elemento.

¿Cómo modificar una posición y ordenar sin mutar?

• Reemplazar un elemento en un índice específico sin mutar.

const i = indiceObjetivo;
const nueva = [
  ...lista.slice(0, i),
  nuevoValor,
  ...lista.slice(i + 1)
];

• Clonar y luego usar métodos mutables con seguridad.

const copia = [...lista];
copia.sort();     // o copia.reverse(), copia.pop(), copia.push(), etc.

• Ordenar o invertir sin tocar el original directamente.

const ordenada = [...lista].sort();
const invertida = [...lista].reverse();

Importante: aplicar sort o reverse sobre el original impide regresar fácilmente al estado previo si el usuario cambia el criterio de ordenación.

¿Cuándo usar clonación o Immutable JS?

Hay dos enfoques válidos cuando necesitas operaciones clásicas sin perder inmutabilidad:

• Clonar y operar: crea una copia con spread y aplica métodos como sort o reverse. No modifica el original y es simple de implementar.
• Usar Immutable JS: provee estructuras que garantizan inmutabilidad por defecto con métodos familiares como push, pop o shift. Cada operación devuelve una nueva lista.

Ejemplo conceptual con Immutable JS:

// Asume una lista inmutable; cada operación devuelve una nueva instancia.
const l1 = Immutable.List([1, 2, 3]);
const l2 = l1.push(4); // l1 no cambia
const l3 = l2.pop();   // l2 no cambia

Consejo práctico: mutar no es “malo” per se; solo ten presente el costo en efectos secundarios. Si necesitas preservar el estado original, prioriza spread, slice o la clonación previa antes de aplicar métodos mutables. Para casos de ordenamiento frecuente o transformaciones como reverse (p. ej., verificar lecturas al revés), crea siempre una copia.

¿Tienes otra técnica inmutable que uses a diario o una duda sobre tu caso de uso? Cuéntala en los comentarios y la analizamos juntos.