Una de las operaciones más comunes cuando trabajamos con múltiples arrays, se trata de combinarlos para formar un solo array que contenga todos los elementos combinados. En este post, encontrarás tres alternativas para llevar a cabo esta misión 🚀 y sus respectivas ventajas y desventajas.
Inmutable
Trabajar con arrays en JavaScript no es una tarea sencilla. Si no tenemos cuidado, podemos modificar el valor original de nuestros arrays (mutarlos). Si nuestra intención es rehusar o no modificar nuestros arrays originales, debemos entonces recurrir a las siguientes alternativas.
Concat
El método concat() recibe como parámetro los arrays que deseamos combinar y no muta ninguno de los arrays existentes.
const sports = ['🏀', '⚽️', '⚾️'] const instruments = ['🎻', '🎸', '🎺'] const hobbies = [].concat(sports, instruments) // [ '🏀', '⚽️', '⚾️', '🎻', '🎸', '🎺' ]
Una de las grandes ventajas de esta alternativa es que funciona en todos los navegadores modernos incluso Internet Explorer.
Spread Operator
Esta opción es más concisa y al igual que el método concat() no muta ninguno de los arrays existentes.
const sports = ['🏀', '⚽️', '⚾️'] const instruments = ['🎻', '🎸', '🎺'] const hobbies = [...sports, ...instruments] // [ '🏀', '⚽️', '⚾️', '🎻', '🎸', '🎺' ]
Algo que puede considerarse una desventaja (no para muchos), no es compatible con Internet Explorer.
Mutable
Existe la posibilidad de que queramos mutar nuestro array original o no nos importa que esto suceda. En ese caso podemos recurrir al método push()
Push
A veces no quieres o no necesitas crear un nuevo array y prefieres combinar todo dentro de uno de los arrays existentes.
const sports = ['🏀', '⚽️', '⚾️'] const instruments = ['🎻', '🎸', '🎺'] sports.push(...instruments) // Esto modifica nuestro array sports console.log(sports) // [ '🏀', '⚽️', '⚾️', '🎻', '🎸', '🎺' ]
Una alternativa con push() es declarar un nuevo array que reciba los elementos combinados sin mutar los arrays originales.
const sports = ['🏀', '⚽️', '⚾️'] const instruments = ['🎻', '🎸', '🎺'] const hobbies = [] hobbies.push(...sports, ...instruments) console.log(hobbies) // [ '🏀', '⚽️', '⚾️', '🎻', '🎸', '🎺' ]
Bonus: Combinar arrays removiendo duplicados
Uno de los problemas que podemos afrontar al momento de combinar nuestros arrays es el hecho de que pueden existir elementos duplicados.
Gracias a Set podemos filtrar todos los elementos duplicados en nuestro nuevo array.
const sports = ['🏀', '⚽️', '⚾️'] const activities = ['🏑', '🥋', '🏀', '⚽️'] /* Concat */ const hobbies = [...new Set([].concat(sports, activities))] // [ '🏀', '⚽️', '⚾️', '🏑', '🥋' ] /* Spread Operator */ const hobbies = [...new Set([...sports, ...activities])] // [ '🏀', '⚽️', '⚾️', '🏑', '🥋' ]
Para aprender más sobre como eliminar elementos duplicados en un array, te recomiendo que le eches un vistazo a este artículo en el que hablo sobre este tema con más detalle.