¿Alguna vez has tenido elementos que se repiten una y otra vez en un proyecto? ¡Seguro que sí! Para esto, saber cómo copiar un array en JavaScript es de gran utilidad.
Tener elementos repetidos es una situación muy común a la hora de desarrollar un proyecto de programación, ya sea porque necesitamos transformar este elemento original o porque queremos llamarlo de nuevo en otra sección. Por ello, en este post, te enseñaremos a copiar un array en JavaScript para facilitar la repetición de sus elementos en el código.
¿Cómo copiar un array en JavaScript?
Existen varias formas de copiar un array en JavaScript. Aunque en todas las formas el resultado es el mismo, la copia del array original, la lógica de esta copia es diferente. La diferencia principal entre los métodos usados para copiar un array en JavaScript es la referencia a la que apuntan.
Cuando hablamos de la referencia de una copia estamos hablando del slot de almacenamiento al que nos lleva un elemento o variable. Para entender este concepto, te invitamos a leer nuestro post sobre los arrays de JavaScript y la memoria RAM. Allí discutimos la diferencia en términos de almacenamiento entre cuando copiamos un array igualándolo al array original o cuando usamos el elemento spread operator.
A continuación, te demostramos la diferencia en el resultado cuando usamos los dos métodos para copiar un array en JavaScript.
Supongamos que estamos creando una copia de una ronda de una liga con el fin de invertir los partidos de esta liga. Es decir, la ronda original tiene valores determinados en cada partido para los jugadores que serán visitantes y los que serán locales. Ahora, lo que queremos hacer es copiar esta ronda original e intercambiar sus valores.
Igualar un array
Para hacer la copia utilizando la técnica de igualar un array, a la vez que utilizamos el método swap para intercambiar sus valores, escribiríamos un bucle de la siguiente manera:
const newRound = […this.matchDaySchedule];
if (i % 2 === 0) {
for (const matchDay of newRound)
for (const match of matchDay) {
const tempHomeTeam = match.home;
mach.home = match.away;
match.away = tempHomeTeam
}
El problema con este método de copia es que, al igualar tempHomeTeam a una variable del objeto match, estamos accediendo directamente a los valores de match. Esto quiere decir que, como lo tomamos como referencia exacta, al modificar los valores de tempHomeTeam también modificaremos los valores originales de match. Este es el problema de utilizar la técnica de igualar un array, pues los valores de ambos arrays cambian y crean una copia exacta en vez de un espejo.
Para solucionar este problema, hay que utilizar el otro método para copiar un array en JavaScript: el spread operator.
Spread operator
Como has podido leer en nuestro post sobre arrays y memoria RAM mencionado anteriormente, el spread operator nos permite copiar un array del mismo modo que igualarlo. Sin embargo, este método apunta a otro slot de memoria. Es decir, literalmente copia los valores del array en un nuevo espacio, en vez de tener el original como referencia.
De este modo, el spread operator nos permite romper la referencia al array original. Esto significa que ahora podremos modificar su copia sin modificarlo a él. A continuación, te mostramos las mismas líneas de código anteriores con este cambio de método:
const newRound = […this.matchDaySchedule];
if (i % 2 === 0) {
for (const matchDay of newRound)
for (const match of matchDay) {
const copyMatch = {…match}
const tempHomeTeam = copyMatch.home;
copyMatch.home = copyMatch.away;
copyMatch.away = tempHomeTeam
}
Lo que acabamos de hacer es crear una constante con la copia del objeto match y luego definir el método swap a partir de esta copia. De este modo, quebramos el cambio del objeto original.
Ahora que sabes cómo copiar un array en JavaScript, ¿a qué esperas para poner en práctica estos conocimientos? No lo dudes más y empieza a combinar la teoría con la práctica con nuestro Desarrollo Web Full Stack Bootcamp. Con esta formación intensiva, te convertirás en un experto del desarrollo web en tan solo unos pocos meses, dominando lenguajes de programación como JavaScript, CSS y HTML. ¡Matricúlate ya!
