El mundo de la programación tiene como objetivo crear una representación del mundo real. Por ello, la complejidad de un lenguaje de programación está al mismo nivel que la complejidad de un lenguaje común. Y así como en cualquier idioma, como puede ser el español, tenemos varias formas de decir lo mismo, los lenguajes de programación tienen varias formas de llegar al mismo resultado. En este post, te mostraremos cómo el método concat, forEach y spread operator en JavaScript nos pueden ayudar a lograr el mismo resultado.
¿Qué función crearemos en este post?
Una de las funciones más comunes que veremos en un proyecto de JavaScript es recorrer un array. Con esto nos referimos a recorrer y pintar en pantalla cada uno de los elementos de un array. Para ello, se usa comúnmente el bucle for, que nos permite repetir una función indefinidamente. El bucle for, emparejado con el operador de incremento, recorre un array utilizando las distintas posiciones de su índice.
Con este bucle, otra de las funciones que se suele ejecutar es llenar un array. Ejecutar esta acción quiere decir que iremos añadiendo elementos al array a medida que el bucle continúa su función. Por ello, podríamos partir de un array vacío y posteriormente llenarlo utilizando el método push de JavaScript.
A continuación, te ponemos un ejemplo de una función con una constante igualada a un array vacío. Este array se llenará de las propiedades que tiene insertadas. Más adelante, te mostraremos cómo llenar otro array llamado matchDaySchedule con el contenido de este array round de manera progresiva.
createRound ( ) {
const round = [ ];
this.initSchedule (round);
this.setLocalTeams (round);
this.setAwayTeams (round);
this.fiLastTeamsSchedule (round);
return round;
}
¿Cómo utilizamos el método concat, forEach y spread operator en JavaScript para llenar un array?
Para llenar un array en JavaScript, lo primero que debemos hacer es definir un bucle for que determine el recorrido del array. Para esto, utilizamos el incremento. Luego, definiremos dentro de este bucle qué sucede en cada iteración.
A continuación, te mostramos el inicio de este bucle, en el que definimos que, cuando la posición del índice es impar, insertamos una función para intercambiar los valores de sus partidos:
scheduleMatchDays () {
for (let i = 0; i < this.config.rounds; i++) {
const round = this.createRound ( );
// si la jornada es impar, giramos los partidos
if (i % 2 === 1) {
this.swapTeamsWithMatches (round);
}
Ahora, para llenar el array matchDaySchedule que hemos descrito antes, deberemos definir que en cada iteración, además de alterar los partidos según si son pares o impares, añadiremos un nuevo elemento al final del array. En este caso, este nuevo elemento será round, el contenido de cada jornada.
Es aquí donde el método concat, forEach y spread operator en JavaScript hacen lo suyo. Es decir, tenemos tres maneras distintas de llenar un array en JavaScript.
Método concat
Supongamos que lo que queremos es llenar el array matchDaySchedule progresivamente con rondas. Entonces, podemos utilizar el método concat de JavaScript para unir el contenido del array matchDaySchedule con el contenido de una nueva ronda, guardado en la constante round. Para ello, simplemente debemos escribir la siguiente línea de código:
this.matchDaySchedule = this.matchDaySchedule.concat (round)
Recuerda que el método concat de JavaScript nos da un nuevo array. Sin embargo, en este caso, hemos igualado el array original al cambio de array, por lo que estaremos alterando su valor directamente.
Spread operator
Al leer la definición del spread operator de JavaScript, parece ser un operador con un fin muy similar al método concat. En realidad, tienen resultados muy parecidos, pues ambos logran copiar el contenido de uno o más arrays y unirlos. Por ello, la forma en la que usaríamos el spread operator para llenar el array matchDaySchedule con la constante round es muy similar.
A continuación, te presentamos su línea de código:
this.matchDaySchedule.push (…round)
Te invitamos a leer este foro de StackOverFlow para conocer más sobre la diferencia entre estas dos funciones.
forEach
Ahora, podemos hacer lo mismo de guardar el nuevo array llenado en la planificación con el método forEach de JavaScript. Para ello también tendremos que utilizar el método push como parte de la función que aplica este método.
round.forEach (newMatchDay2 => this.matchDaySchedule.push (newMatchDay2))
La razón para insertar el push dentro de la función de forEach es que este método no nos devuelve un nuevo array, por lo que debemos asignarlo dentro.
¿Te animas a seguir aprendiendo?
Ahora que has leído cómo podemos llenar un array vacío con el método concat, forEach y spread operator en JavaScript, sabes que todavía hay mucho que puedes aprender de este lenguaje de programación.
Por ello, si te animas a seguir aprendiendo, te invitamos a ser parte de nuestro Desarrollo Web Full Stack Bootcamp. Allí, en tan solo unos pocos meses, no solo aprenderás a dominar JavaScript, sino también sobre otros lenguajes de programación para la web, como son CSS y HTML. ¡Anímate a inscribirte para convertirte en un experto del desarrollo web!
