En el mundo de la programación siempre habrá algún proyecto en el que los elementos necesiten resumirse y mostrarse en la pantalla. Para ello, utilizamos funciones de resumen que nos permiten recorrer nuestros elementos y ejecutar sus acciones a partir del llamado a otras funciones. Ya que esta es una situación muy común, en este post te enseñaremos cómo programar resultados en JavaScript para pintar en pantalla tu proyecto.
¿Cómo programar resultados en JavaScript?
En este post, utilizaremos la idea de una liga de fútbol para ejemplificar cómo programar resultados en JavaScript. Supongamos que hemos logrado crear un proyecto en el que varios equipos compiten entre sí. Estas competencias se organizan en términos de jornadas que a su vez se dividen en partidos.
Para programar resultados en JavaScript, primero deberemos crear una función que recorra y pinte los elementos claves de nuestro proyecto y que ejecute sus acciones más importantes. En nuestro caso, la acción principal de este proyecto es jugar los partidos, algo que definimos con el método play. Te invitamos a leer nuestro post sobre cómo programar un partido de fútbol en JavaScript para conocer más sobre este método en particular.
A continuación, te mostramos el inicio de lo que sería nuestra función start. Hemos definido este nombre porque es la función que nos permite empezar el desarrollo de todo el proyecto. Es recomendable usar nombres específicos y descriptivos en tus funciones, clases y objetos, pues esto te ayudará a recordar su rol con mayor claridad. Apoyándonos en el uso de comentarios, te explicamos qué hace cada una de las líneas de código que utilizamos en esta función:
start ( ) {
// recorrer la planificación (elementos)
// para cada jornada
for (const matchDay of this.matchDaySchedule) {
// para cada partido de la jornada
for (const match od matchDay) {
// jugar el partido
const result = this.play (match);
console.log (result)
}
}
}
Después de aplicar las reglas básicas a tu función, deberás definir las situaciones específicas en las que ciertos aspectos cambian. Esto hará que programar resultados en JavaScript siga los parámetros que deseas. En nuestro caso, queremos que, cuando uno de los jugadores sea null, el bucle de nuestra función continúe e ignore este partido. Añadiremos esta especificación en nuestra función utilizando las palabras clave if y continue:
start ( ) {
// recorrer la planificación (elementos)
// para cada jornada
for (const matchDay of this.matchDaySchedule) {
// para cada partido de la jornada
for (const match od matchDay) {
// jugar el partido
if (match.home === null || match.away === null) {
// saltamos el partido porque el equipo descansa
continue;
}
const result = this.play (match);
console.log (result)
}
}
}
Eel siguiente paso de esta función es programar resultados en JavaScript. Antes, solo hemos recorrido los elementos y ejecutado sus acciones. Ahora, queremos actualizar los datos de los elementos con base a lo que se ha ejecutado.
Antes de insertar las líneas de código que nos permitirán actualizar las métricas de nuestros equipos, debemos cuestionar quién es la clase responsable de ejecutar dicha acción. Para ello, utilizamos la estrategia que hemos descrito en nuestro post sobre cómo decidir qué clase insertar en JavaScript. En nuestro caso, estas métricas tendrán propiedades específicas para la clase que define la liga de fútbol, por lo que insertaremos esta acción en la clase footballLeague.
La función final para programar resultados en JavaScript se vería así:
start ( ) {
// recorrer la planificación (elementos)
// para cada jornada
for (const matchDay of this.matchDaySchedule) {
// para cada partido de la jornada
for (const match od matchDay) {
// jugar el partido
if (match.home === null || match.away === null) {
// saltamos el partido porque el equipo descansa
continue;
}
const result = this.play (match);
console.log (result)
// actualizar las métricas de los equipos
this.updateTeams (result)
}
}
}
Al insertar this.updateTeams (result) hemos llamado a la función que nos permitirá recolectar y pintar los datos finales, que será ejecutada desde footballLeague. De este modo, programar resultados en JavaScript es realmente crear una función que llame a muchas otras funciones, cada una responsable de ejecutar acciones específicas y únicas.
¿Cuál es el siguiente paso?
Al leer este post no solo has aprendido a programar resultados en JavaScript, sino que también has dado un paso en tu camino para dominar este lenguaje de programación. Ahora, el siguiente paso es seguir mezclando los conocimientos teóricos con la práctica. Para ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, una formación íntegra e intensiva perfecta para aprender la teoría del desarrollo web a la par que la pones en práctica con ejercicios desafiantes. ¿A qué esperas para unirte? ¡Te esperamos!
