Inmutabilidad en arrays con spread y slice

Curso de Manipulación Avanzada de Datos con JavaScript

Contenido del curso

No sé dónde empezar

Grabacion

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0011:49

Inmutabilidad en arrays con spread y slice

Curso de Manipulación Avanzada de Datos con JavaScript

Clase 21 de 24

Clase 21 / 24

Recursos

Modificar un array sin querer es uno de los errores más comunes en JavaScript. Aprender a evitar la mutación de arrays con técnicas inmutables como spread operator, slice y librerías especializadas te ayuda a controlar el estado de tus datos, evitar efectos secundarios y escribir código más predecible. Esta guía es para desarrolladores que ya conocen métodos como map, filter o reduce y quieren dar el siguiente paso.

Por qué algunos métodos de array no tienen alternativa inmutable directa

Métodos como map, filter o reduce ya devuelven un nuevo array, así que la inmutabilidad viene gratis. El problema aparece con push, pop, shift, unshift, sort y reverse: estos modifican el array original y no tienen un equivalente nativo que devuelva una copia. Te toca construir la solución con lo que ya conoces.

¿Qué significa mutar un array en JavaScript? Es modificar directamente el array original en memoria, cambiando su contenido sin crear una copia. Métodos como push o sort mutan; map o filter no.

Cómo reemplazar push sin mutar el array original

El caso más común es agregar un elemento al final. Con spread operator clonas el array y añades el nuevo valor explícitamente al final:

javascript const newArray = [...array, nuevoElemento];

Aquí no cambias la referencia original. Estás creando una lista nueva con los elementos previos más el que quieres sumar. Es el patrón más limpio para lograr un push inmutable [2:20].

Cómo reemplazar pop, shift y unshift de forma inmutable

Para quitar el último elemento, slice es tu aliado. Ojo, no confundir con splice, que sí muta:

javascript const sinUltimo = array.slice(0, -1);

Para agregar al inicio, aplicas la misma lógica que con push pero invertida:

javascript const alInicio = [nuevoElemento, ...array];

Para quitar el primero, también usas slice:

javascript const sinPrimero = array.slice(1);

Cada operación devuelve un array nuevo. El original sigue intacto y puedes volver a él cuando quieras [5:40].

Cuándo conviene clonar el array antes de operar

A veces la sintaxis con spread se vuelve enredada, sobre todo con sort y reverse. La alternativa es clonar primero y luego aplicar el método original sobre la copia.

Cómo ordenar un array sin modificar el original

Este es uno de los errores más frecuentes en programación. El usuario pide ordenar una lista, aplicas sort, y luego no puedes volver al orden anterior porque ya perdiste la referencia inicial. La solución es clonar antes:

javascript const ordenado = [...array].sort();

El spread crea una nueva instancia. Sobre esa instancia aplicas sort, pop, push o lo que necesites, y el array original queda intacto. Lo mismo aplica para reverse, útil cuando validas anagramas o inviertes cadenas sin perder el estado inicial [9:15].

¿Cuál es la diferencia entre slice y splice? slice devuelve una copia parcial sin tocar el original. splice modifica el array directamente añadiendo o quitando elementos. Para trabajar de forma inmutable, siempre elige slice.

Modificar una posición específica sin mutar

Para cambiar un elemento en un índice concreto, combinas slice con spread:

javascript const modificado = [...array.slice(0, i), nuevoValor, ...array.slice(i + 1)];

Tomas la parte anterior, insertas el valor nuevo y concatenas la parte posterior. Nada del array original cambia.

Qué es Immutable.js y cuándo usarla

La preocupación por no mutar arrays es tan común que existen librerías dedicadas al tema. Immutable.js es la más conocida y se usa internamente en varios frameworks de JavaScript para garantizar que cada operación devuelva un nuevo estado.

Con Immutable.js creas una lista especial y aplicas métodos con nombres familiares como push, pop o unshift, pero con una diferencia clave: nunca modifican el original. Cada operación devuelve una lista nueva:

javascript const lista = List([1, 2, 3]); const nuevaLista = lista.push(4);

Aquí no tienes que pensar en spread ni en clonaciones manuales. La librería garantiza inmutabilidad por diseño [12:30].

¿Cuándo debo usar Immutable.js en lugar de spread operator? Úsala cuando manejas estructuras de datos complejas o cuando la inmutabilidad es crítica en toda la aplicación, como en gestión de estado con Redux. Para casos puntuales, spread y slice son suficientes.

Mutar no siempre está mal

Que quede claro: mutar un array no es un error en sí mismo. Si sabes que push, pop o sort cambian el estado original y ese es tu propósito, adelante. El problema aparece cuando muta sin que te des cuenta y aparecen efectos secundarios en otras partes del código.

La inmutabilidad es una herramienta, no un dogma. Elige el enfoque según tu caso: si necesitas mantener el estado original para hacer rollback, comparar versiones o pasar datos a componentes de React, ve por inmutable. Si estás en un algoritmo interno donde el array no se comparte, mutar puede ser más eficiente.

¿Cuál técnica prefieres para mantener tus arrays inmutables? Cuéntame en los comentarios cómo manejas la inmutabilidad en tus proyectos.

Resumen

Por qué algunos métodos de array no tienen alternativa inmutable directa

¿Qué significa mutar un array en JavaScript? Es modificar directamente el array original en memoria, cambiando su contenido sin crear una copia. Métodos como push o sort mutan; map o filter no.

Cómo reemplazar push sin mutar el array original

El caso más común es agregar un elemento al final. Con spread operator clonas el array y añades el nuevo valor explícitamente al final:

javascript const newArray = [...array, nuevoElemento];

Aquí no cambias la referencia original. Estás creando una lista nueva con los elementos previos más el que quieres sumar. Es el patrón más limpio para lograr un push inmutable [2:20].

Cómo reemplazar pop, shift y unshift de forma inmutable

Para quitar el último elemento, slice es tu aliado. Ojo, no confundir con splice, que sí muta:

javascript const sinUltimo = array.slice(0, -1);

Para agregar al inicio, aplicas la misma lógica que con push pero invertida:

javascript const alInicio = [nuevoElemento, ...array];

Para quitar el primero, también usas slice:

javascript const sinPrimero = array.slice(1);

Cada operación devuelve un array nuevo. El original sigue intacto y puedes volver a él cuando quieras [5:40].

Cuándo conviene clonar el array antes de operar

A veces la sintaxis con spread se vuelve enredada, sobre todo con sort y reverse. La alternativa es clonar primero y luego aplicar el método original sobre la copia.

Cómo ordenar un array sin modificar el original

javascript const ordenado = [...array].sort();

¿Cuál es la diferencia entre slice y splice? slice devuelve una copia parcial sin tocar el original. splice modifica el array directamente añadiendo o quitando elementos. Para trabajar de forma inmutable, siempre elige slice.

Modificar una posición específica sin mutar

Para cambiar un elemento en un índice concreto, combinas slice con spread:

javascript const modificado = [...array.slice(0, i), nuevoValor, ...array.slice(i + 1)];

Tomas la parte anterior, insertas el valor nuevo y concatenas la parte posterior. Nada del array original cambia.

Qué es Immutable.js y cuándo usarla

javascript const lista = List([1, 2, 3]); const nuevaLista = lista.push(4);

Aquí no tienes que pensar en spread ni en clonaciones manuales. La librería garantiza inmutabilidad por diseño [12:30].

¿Cuándo debo usar Immutable.js en lugar de spread operator? Úsala cuando manejas estructuras de datos complejas o cuando la inmutabilidad es crítica en toda la aplicación, como en gestión de estado con Redux. Para casos puntuales, spread y slice son suficientes.

Mutar no siempre está mal

¿Cuál técnica prefieres para mantener tus arrays inmutables? Cuéntame en los comentarios cómo manejas la inmutabilidad en tus proyectos.

Grabacion

Transformar, filtrar y agrupar arrays en JavaScript

Clona y ejecuta FreeHabits localmente

Map avanzado: item, index y array completo

Exportar CSV desde el navegador con map

Mutabilidad vs inmutabilidad en arrays de JavaScript

Cómo filter elimina elementos sin mutar arrays

Filtros dinámicos con FormData en JavaScript

Observer Pattern para filtros reactivos en JS

Filtros reactivos con Observer Pattern en JS

Persistencia con local storage y repository pattern

Cómo calcular promedios con reduce en JavaScript

Cómo crear un histograma con reduce

Object.groupBy vs reduce en JavaScript

Cómo crear un mini dashboard con reduce en JavaScript

flat y flatMap para arrays anidados en JS

flatMap y reduce para agrupar hábitos por día

Gráfica de barras con Chart.js en Vanilla JS

some, every e includes para validar arrays

Cómo convertir arrays y strings con join y split

Fusionar arrays sin mutar datos con spread

Inmutabilidad en arrays con spread y slice

Map vs Array: cuándo usar cada uno

Map + array de IDs para acelerar búsquedas

Cierre del curso de arrays avanzados en JS

Inmutabilidad en arrays con spread y slice

Progreso del curso

Grabacion

Recursos

Recursos