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.
