Sergio Serrano
Sergio Serrano's Blog

Sergio Serrano's Blog

Combinar Arrays en JavaScript 🧑‍💻

Combinar Arrays en JavaScript 🧑‍💻

Tres alternativas para combinar arrays con JavaScript y sus respectivas ventajas y desventajas.

Sergio Serrano's photo
Sergio Serrano
·Sep 2, 2021·

3 min read

Subscribe to my newsletter and never miss my upcoming articles

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.

Did you find this article valuable?

Support Sergio Serrano by becoming a sponsor. Any amount is appreciated!

Learn more about Hashnode Sponsors
 
Share this