Fusionar arrays sin mutar datos con spread

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:006:31

Fusionar arrays sin mutar datos con spread

Curso de Manipulación Avanzada de Datos con JavaScript

Clase 20 de 24

Clase 20 / 24

Recursos

Fusionar dos arrays en JavaScript parece simple, pero hacerlo mal puede corromper tus datos originales. Aquí verás por qué push y concat no siempre son la mejor opción, y cómo el spread operator te permite unir vectores de forma limpia, inmutable y profesional.

¿Por qué push no sirve para fusionar dos arrays?

Cuando quieres agregar un elemento a un array, push funciona perfecto. El problema aparece cuando intentas unir dos arrays completos con ese mismo método.

Imagina que tienes un array de números y otro de letras ['A', 'B', 'C']. Si haces numbers.push(letters), no obtienes los elementos alineados uno tras otro. Obtienes un array anidado dentro del array original. Es decir, en la última posición aparece un array completo, no sus valores sueltos.

Y hay algo más: push muta el array original. Eso significa que tu numbers ya no es el mismo de antes. Lo modificaste sin querer.

¿Qué significa que un método mute un array? Que modifica el array original en lugar de devolver uno nuevo. Cualquier referencia previa a ese array ya trae los cambios, y eso puede generar efectos secundarios en otras partes del código.

¿Cómo funciona concat y por qué también muta?

concat sí resuelve el problema del anidamiento. Si haces numbers.concat(letters), los elementos quedan alineados al final sin crear un array dentro de otro. Se ve limpio.

Pero tiene una trampa: en el flujo mostrado en la clase, al encadenar operaciones sobre el mismo array, terminas corrompiendo numbers. Después de varias transformaciones acabas con un array que tiene hasta tres niveles de anidamiento, y ya no puedes confiar en su estado original.

Si tu objetivo es solo procesar datos sin afectar la fuente, concat no es la mejor opción dentro de ese contexto de mutaciones acumuladas.

¿Qué pasa si uso flat para arreglar el anidamiento?

Podrías aplicar .flat() para aplanar el resultado y dejar todos los elementos en un solo nivel. Funciona como parche, pero la gracia está en no llegar a ese punto. Si evitas mutar desde el inicio, no necesitas aplanar después.

¿Cómo fusionar arrays con el spread operator sin mutar?

Aquí viene lo interesante. El spread operator (...), que ya usabas en objetos, también funciona con arrays. Y es la forma más limpia de fusionar vectores sin tocar los originales.

La idea es crear un array completamente nuevo:

javascript const newNumbers = [...numbers, ...letters];

Al aplicar ... sobre cada array, JavaScript toma sus valores, no el array como referencia. Los elementos quedan aplanados y alineados de forma directa en el nuevo array. Cero anidamiento, cero mutación.

Compara los dos escenarios:

Sin spread: const nestedArray = [numbers, letters] crea un array con dos arrays adentro.
Con spread: const flatArray = [...numbers, ...letters] crea un array plano con todos los elementos.

¿Cuándo debo usar spread operator en vez de concat? Cuando quieres un array nuevo sin tocar los originales. El spread garantiza inmutabilidad; concat, aunque devuelve un nuevo array, se combina mal con flujos donde ya hubo push u otras mutaciones previas.

¿Qué ventaja real da la inmutabilidad en arrays?

Cuando no mutas, proteges el estado de tus datos. Otras partes del código que dependen de numbers siguen viendo el array que esperaban. No hay sorpresas, no hay bugs por referencias compartidas, no hay que rastrear en qué línea alguien modificó la fuente.

En procesamiento de datos, en React, en Redux, en cualquier flujo donde el estado importa, esta diferencia es la que separa código frágil de código confiable.

Cómo identificar si un método muta o no

Un buen ejercicio mental: antes de usar un método sobre un array, pregúntate si devuelve un nuevo array o si modifica el existente. Métodos como push, pop, splice y concat (en el contexto mostrado) tocan el original. En cambio, patrones con spread o métodos como map, filter y slice devuelven copias nuevas.

Y hay un detalle clásico: si haces const copia = original, no estás copiando el array. Estás copiando la referencia. Cualquier push sobre copia también afectará a original, porque ambos apuntan al mismo lugar en memoria.

Por eso, cuando quieras una copia real, usa [...original]. Ahí sí tienes dos arrays independientes.

Si quieres poner a prueba lo que aprendiste, revisa el reto de la clase: identifica en cada caso qué retorna el console.log según se use asignación directa, push, concat o spread. Deja tu respuesta en los comentarios y comparte cuál fue el caso que más te costó descifrar.

Resumen

¿Por qué push no sirve para fusionar dos arrays?

Cuando quieres agregar un elemento a un array, push funciona perfecto. El problema aparece cuando intentas unir dos arrays completos con ese mismo método.

Y hay algo más: push muta el array original. Eso significa que tu numbers ya no es el mismo de antes. Lo modificaste sin querer.

¿Qué significa que un método mute un array? Que modifica el array original en lugar de devolver uno nuevo. Cualquier referencia previa a ese array ya trae los cambios, y eso puede generar efectos secundarios en otras partes del código.

¿Cómo funciona concat y por qué también muta?

concat sí resuelve el problema del anidamiento. Si haces numbers.concat(letters), los elementos quedan alineados al final sin crear un array dentro de otro. Se ve limpio.

Si tu objetivo es solo procesar datos sin afectar la fuente, concat no es la mejor opción dentro de ese contexto de mutaciones acumuladas.

¿Qué pasa si uso flat para arreglar el anidamiento?

¿Cómo fusionar arrays con el spread operator sin mutar?

Aquí viene lo interesante. El spread operator (...), que ya usabas en objetos, también funciona con arrays. Y es la forma más limpia de fusionar vectores sin tocar los originales.

La idea es crear un array completamente nuevo:

javascript const newNumbers = [...numbers, ...letters];

Compara los dos escenarios:

Sin spread: const nestedArray = [numbers, letters] crea un array con dos arrays adentro.
Con spread: const flatArray = [...numbers, ...letters] crea un array plano con todos los elementos.

¿Cuándo debo usar spread operator en vez de concat? Cuando quieres un array nuevo sin tocar los originales. El spread garantiza inmutabilidad; concat, aunque devuelve un nuevo array, se combina mal con flujos donde ya hubo push u otras mutaciones previas.

¿Qué ventaja real da la inmutabilidad en arrays?

En procesamiento de datos, en React, en Redux, en cualquier flujo donde el estado importa, esta diferencia es la que separa código frágil de código confiable.

Cómo identificar si un método muta o no

Por eso, cuando quieras una copia real, usa [...original]. Ahí sí tienes dos arrays independientes.

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

Fusionar arrays sin mutar datos con spread

Progreso del curso

Grabacion

Recursos

Recursos