Unir arrays sin romper el estado es clave para escribir código limpio y predecible. Aquí verás cómo evitar mutaciones, por qué un array anidado causa problemas, y cómo el split operator y flat permiten resultados claros y mantenibles.
¿Cómo fusionar arrays sin mutar el estado?
Fusionar correctamente evita efectos secundarios y referencias inesperadas. La idea central: no alterar el array original cuando solo necesitas un resultado combinado para un procesamiento puntual.
¿Qué hace push al unir arrays?
push agrega elementos y muta el array original.
Si pasas un array, agrega el array completo como un solo elemento.
El resultado es un array anidado que luego habría que aplanar.
const numbers =[1,2,3];const letters =['A','B','C'];// Agrega TODO el array como un solo elemento (anidado) y muta numbers.numbers.push(letters);console.log(numbers);// [1, 2, 3, ['A', 'B', 'C']]
¿Por qué concat puede ser un problema?
concat agrega elementos al final sin anidarlos.
Según lo explicado, muta el array original durante la fusión.
Si ya hubo mutaciones previas, puedes “corromper” el estado y crear niveles de arrays.
let numbers =[1,2,3];const letters =['A','B','C'];// Une los elementos al final. En el flujo descrito, se considera una operación mutable.numbers = numbers.concat(letters);console.log(numbers);// [1, 2, 3, 'A', 'B', 'C']
¿Cómo usar el split operator para aplanar y fusionar?
El split operator toma los valores del array, no el array como tal.
Permite crear un nuevo array sin mutar el original.
Evita el nested array y produce una lista plana.
const numbers =[1,2,3];const letters =['A','B','C'];// Fusión inmutable en un NUEVO array con valores aplanados.const merged =[...numbers,...letters];// usando split operator en arraysconsole.log(merged);// [1, 2, 3, 'A', 'B', 'C']// El original permanece separado del resultado de procesamiento de datos.console.log(numbers);// [1, 2, 3]
¿Qué errores crean arrays anidados y cómo prevenirlos?
Los arrays anidados aparecen cuando agregas un array como elemento. Esto complica índices, recorridos y lógica. La prevención es preferible a “arreglar” después, ya que la mutación acumulada corrompe el estado y produce efectos secundarios.
¿Cómo se ve un nested array y cómo aplanarlo?
Agregar arrays con push causa anidamiento inmediato.
Si ya tienes niveles de arrays, usa flat para aplanar.
La mejor práctica: evitar llegar a este punto con split operator.
// Caso con anidación.const numbers =[1,2,3];const letters =['A','B','C'];numbers.push(letters);console.log(numbers);// [1, 2, 3, ['A', 'B', 'C']]// Aplanar cuando ya existe anidación.const flattened = numbers.flat();console.log(flattened);// [1, 2, 3, 'A', 'B', 'C']// Prevención desde el inicio (fusión sin anidar y sin mutar el original).const cleanMerge =[...[1,2,3],...['A','B','C']];console.log(cleanMerge);// [1, 2, 3, 'A', 'B', 'C']
¿Cómo practicar mutabilidad e inmutabilidad con un reto?
La mejor forma de asimilar mutabilidad e inmutabilidad es probar y predecir resultados. Observa cómo el uso de referencias, copias y operaciones cambia el estado.
¿Qué casos deberías probar para validar tu comprensión?
Asignación por referencia con igual: const copia = original.
Mutación posterior en la copia con push y su efecto en original.
Fusión con concat y revisión del estado final.
Fusión inmutable con split operator y verificación de que el original no cambia.
Aplanado con flat cuando ya hay un nested array.
Anímate a compartir qué retorna cada caso y si identificas mutaciones o efectos secundarios no deseados. Tu análisis puede ayudar a otros a evitar errores comunes al unir arrays.
