A la hora de crear un proyecto de programación, hay muchas ocasiones en las que necesitaremos hacer que nuestros valores vayan alternando su posición en pantalla. Por ello, en este post, te enseñaremos cómo crear alternancia en JavaScript para, de este modo, modificar la posición de tus elementos.
¿Qué es alternancia?
Cuando hablamos de crear alternancia en JavaScript nos referimos a crear patrones dentro de una matriz en la que los elementos alternen su posición dentro de las variables. Este es el caso de un tablero de ajedrez, en el que los colores blanco y negro alternan su posición en las filas y columnas. Por ello, te invitamos a leer nuestro post sobre cómo crear un tablero de ajedrez en JavaScript para entender este concepto.
Crear alternancia en JavaScript también puede ser útil en algoritmos más complejos. Podemos usar esta herramienta, por ejemplo, en una competencia deportiva de todos contra todos. En las ligas de fútbol, tenemos una matriz en la que se unen las variables de jornada y partido para crear una planificación en la que todos los equipos compiten contra todos por lo menos dos veces.
Así como en el baloncesto, los partidos de fútbol tienen la particularidad de que un equipo juega como visitante y otro como local. Ser del equipo local presupone una ventaja al conocer la cancha. Por ello, es importante que esta variable se alterne entre los equipos, para que en los dos enfrentamientos no sea el mismo equipo el que tenga la ventaja. A continuación, te enseñaremos cómo crear alternancia en JavaScript a partir de este proyecto.
¿Cómo crear alternancia en JavaScript?
En nuestro post sobre programar un sistema de todos contra todos en JavaScript, te hemos enseñado los primeros pasos para crear este algoritmo. En él, hemos creado una función para los equipos que jugarán como visitantes. Los jugadores de away del primer partido de cada jornada serán los mismos siempre. A partir del segundo partido, los equipos cambiarán con base a un recorrido de su array. Para los equipos visitantes, este recorrido se basa en un decrecimiento a partir del penúltimo valor. Para los equipos locales, el recorrido sucederá en función del crecimiento del índice de su array.
Entonces, el resultado de esta función es el siguiente, a partir de un array ‘Teams’ con un número de elementos par:
arrayTeams [‘A’, ‘B’, ‘C’, ‘D’]
[ { home:’A’, away: ‘D’}, {home: ‘B’, away, ‘C’ } ],
[ { home:’C’, away: ‘D’}, {home: ‘A’, away, ‘B’ } ],
[ { home:’B’, away: ‘D’}, {home: ‘C’, away, ‘A’ } ],
Cada línea de código entre corchetes [ ] representa una jornada. Cada una de las jornadas contiene a su vez dos partidos. Como ves, aunque los partidos no se repiten, en el primer partido de cada jornada, ‘D’ siempre está de visitante, lo cual genera una desventaja.
Por ello, usaremos el mismo método de alternancia que hemos usado para resolver el tablero de ajedrez. Este método nos permite crear alternancia en JavaScript usando la lógica impar/par. O sea, crearemos un escenario cuando la jornada es par y otro cuando es impar.
Entonces, en el siguiente método establecemos que, cuando el índice de la jornada es impar, le damos la vuelta al primer partido de la jornada:
fixLastTeamSchedule ( ) {
this.matchDaySchedule.forEach ((matchDay, matchDayIndex => {
if (matchDayIndex % 2 ===1)
const firstMatch = matchDay [0]
const temp = firstMatch.home;
firstMatch.home = firstMatch.away;
firstMatch.away = temp;
}
En la función anterior, hemos usado el operador aritmético de módulo para definir una situación en la que el índice es impar. Luego, hemos usado las variables temporales o método swap para hacer que, bajo esta situación, se intercambien los valores de las variables home y away. De este modo, usar el if junto a un módulo impar o par nos permite crear alternancia en JavaScript.
¿Qué sigue?
Ahora que sabes cómo crear alternancia en JavaScript, te invitamos a seguir aprendiendo sobre este lenguaje de programación en nuestro Desarrollo Web Full Stack Bootcamp. Allí, en tan solo unos pocos meses, aprenderás todo lo necesario para convertirte en un experto del desarrollo web. ¡No te lo pierdas!
