Hay muchos proyectos que pueden llegar a necesitar una tabla final que organice sus resultados. Un ejemplo de tablas de este tipo son las tablas de clasificación que definen los ganadores de una competencia a partir de sus distintas propiedades. En este post, te enseñaremos cómo usar diversos elementos de programación para crear una tabla de clasificación en JavaScript.
¿Qué haremos en este post?
En este post, crearemos una tabla de clasificación en JavaScript a partir de un proyecto hipotético. En nuestro ejemplo hemos programado una liga de fútbol en la que distintos equipos compiten entre sí. Al final de esta competencia, cada equipo obtiene puntos según el resultado del partido: tres puntos por ganar, uno por empatar y cero por perder. Con estos puntos, crearemos una tabla de clasificación que muestre los resultados de cada equipo y los ordene de manera descendente.
También debemos tener en cuenta las situaciones en las que dos o más equipos están empatados y tienen el mismo número de puntos, porque deberemos definir otro criterio para ordenarlos en la tabla de clasificación. Este criterio normalmente es la diferencia de goles, o sea el número de goles que el equipo metió frente al número de goles que le metieron.
¿Cómo crear una tabla de clasificación en JavaScript?
Para crear una tabla de clasificación en JavaScript, lo primero que debemos hacer es crear una función que ejecute las acciones necesarias. Desde KeepCoding, te recomendamos siempre crear funciones para guardar tus acciones más importantes. Esto te permitirá volver a llamar a la función por su nombre cada vez que necesites ejecutar dicha acción. De esta manera, podrás reutilizar líneas de código de una manera eficiente.
En nuestro caso, la función que utilizaremos para crear una tabla de clasificación en JavaScript se llamará getStandings. La acción que deberá ejecutar esta función es calcular, a partir de los puntos obtenidos por cada equipo, las posiciones finales en la competencia. En este sentido, el equipo con más puntos será el ganador de la liga y los demás equipos se ordenarán en función de los puntos ganados de manera descendiente.
Para ejecutar esta acción y crear tabla de clasificación, deberemos utilizar el método sort de JavaScript, que nos permite ordenar los elementos de un array en función de un criterio. Este criterio lo definimos con el uso de un callback, que es una función de comparación entre dos valores. Para entender la lógica detrás de esta función, te recomendamos leer nuestro post sobre el método sort de JavaScript, similar al de crear tabla con javascript.
Entonces, utilizaremos el método sort para definir que, si los puntos del equipo A son más que los puntos del equipo B, el equipo A debe ir en la posición inicial. Recuerda que esta posición se define en función de un valor de retorno:
- Si el valor es -1, la posición dentro del array se moverá hacia la izquierda y el equipo se pintará primero.
- Si el valor es 0, la posición no cambia.
- Si el valor es 1, la posición del equipo dentro del array se moverá hacia la derecha.
A continuación, puedes ver esta parte de la función, para crear tabla de clasificación:
getStandings ( ) {
this.team.sort (function (teamA, teamB) {
if (teamA.points > teamB.points) {
return -1
} else if { (teamA.points < teamB.points) {
return 1
}
}
Hasta aquí hemos definido qué sucede si un equipo tiene más puntos que el otro. Sin embargo, siempre hay más de dos circunstancias. ¿Qué pasa si los equipos tienen el mismo número de puntos? En ese caso, deberemos escribir otro condicional, para que puedas crear tabla con javascript. Para ello, utilizamos la palabra clave condicional else, que define una circunstancia cuando todas las anteriores son falsas. Puedes leer nuestro artículo al respecto para conocer más sobre if, else if y else.
Entonces, lo que queremos hacer con el resto de la función es definir qué sucede cuando los equipos empatan. Como hemos mencionado antes, normalmente se revisa la diferencia de goles para definir el orden de este empate. Para ello, utilizaremos las propiedades goalsFor y goalsAgainst de cada equipo para crear una constante de diferencia de goles. Luego, compararemos estas constantes y crearemos otra función de comparación.
else {
const goalDifTA = teamA.goalsFor – teamA.goalsAgainst;
const goalDifTB = teamB.goalsFor – teamB.goalsAgainst;
if (goalsDifA > goalsDifB) {
return – 1
} else if (goalsDifA < goalsDifB) {
return 1
} else {
// más criterios de evaluación en caso de empate, ¡los que quieras!
return 0
}
Como puedes ver, esta cadena de funciones de comparación puede continuar eternamente, añadiendo cada vez más criterios para definir el orden del array. Después de definir estos criterios, podrás utilizar el comando console.table para pintarlos en la pantalla en formato de tabla.
De esta manera has comprendido cómo crear tabla de clasificación.
¿Cuál es el siguiente paso?
Al leer este post, no solo has aprendido a crear una tabla de clasificación en JavaScript, sino que también has dado un paso en tu proceso de formación para llegar a dominar este lenguaje de programación. El siguiente paso es complementar tus aprendizajes teóricos con una buena práctica. Para ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, donde aprenderás no solo escuchando, sino también programando. ¡No te pierdas la oportunidad de ser un desarrollador web profesional e inscríbete!
