Las clases y la herencia en JavaScript nos permiten repetir comportamientos en más de un objeto según cómo los clasifiquemos en nuestro código. En este post, te enseñaremos cómo utilizar estos conceptos para distribuir puntos de una competencia con JavaScript.
¿Qué haremos en este post?
En este post, practicaremos los conceptos aprendidos sobre las clases y la herencia en JavaScript con la creación de una liga deportiva. Entonces, en esta liga, tendremos distintos deportes. Como puede que sepas, cada deporte tiene una manera diferente de distribuir los puntos ganados en cada partido. Por ejemplo, en fútbol los equipos obtienen 3 puntos si ganan el partido, 0 si pierden y 1 si empatan. Sin embargo, esta distribución no es la misma en otros deportes como el rugby, donde la forma en la que ganas es igual de importante.
Entonces, en este post, aprenderemos cómo distribuir puntos de una competencia con JavaScript usando el concepto de clases. Es decir, en función del deporte del que estemos hablando, particularizaremos la distribución de puntos.
¿Cómo distribuir puntos de una competencia con JavaScript?
Para distribuir puntos de una competencia con JavaScript, empezaremos por crear una variable que nos dé distintos equipos. Para ello, le daremos como valor un elemento array:
const teams = [‘Hoffenheim’, ‘Lyon’, ‘Chelsea’, ‘Bar’, ‘Madrid’, ‘Atlético, ‘Rayo Vallecano’, ‘Wolfsburg’]
Ahora, podemos crear una clase padre que se llame League. Esta nos dará las propiedades de equipos, partidos y nombres:
class League {
constructor (name, teams, rounds =1) {
this.name = name;
this.teams = teams;
this.rounds = rounds;
}
showTeams () {
console.log (this.teams)
}
Ahora, podemos crear un nuevo objeto que se base en esta clase con la siguiente línea de código:
let anyLeague = newLeague (‘any League’, teams);
console.log (anyLeague.name);
anyLeague.showTeams ();
Estas líneas de código harán que se pinte por pantalla el string any League seguido de los equipos que hemos definido en el array de nuestra constante teams. Esto sucede porque pasamos por el molde el nombre ‘any League’ y le damos como valor de teams nuestra constante teams. A continuación, te ponemos otro ejemplo, en el que pasamos como valor un array:
let anotherLeague = new League (‘another League’, [‘a’, ‘b’, ‘c’]);
Para ejecutar este nuevo equipo, escribimos las siguientes líneas de código:
console.log (anotherLeague.name);
anotherLeague.showTeams ( );
El resultado se pintará en la pantalla, donde aparecerán nuestro string y el nuevo array de equipos que hemos creado. Entonces, lo importante con el uso de clases en JavaScript no es que los dos objetos tengan los mismos valores, sino que estos tengan las mismas propiedades. En este caso, name y teams.
A continuación, crearemos una clase que nos construya de manera específica la liga de fútbol. Aunque esta heredará ciertos aspectos de la clase League, recuerda que estas propiedades se pueden modificar y que podemos añadir más encima:
class footballLeague extends League {
constructor (name, teams, rounds = 1) {
super (name, teams, rounds)
}
}
Al igual que con las otras nuevas ligas, podemos crear una nueva liga de fútbol con las mismas propiedades, pues estas se heredan de la clase League. Entonces, podríamos crear el siguiente elemento:
let aFootballLeague = new FootballLeague (‘foot, [‘ZZ’, ‘XX’, ‘YY’])
console.log (aFootballLeague.name, aFootballLeague.rounds);
aFootballLeague.showTeams ( );
Al ejecutar este elemento, encontraremos el string foot, el número de rondas que juega (1) y los distintos elementos que componen el parámetro teams, introducidos por el array de elementos que hemos creado. Esto funciona porque le hemos dado la palabra clave super a la clase footballLeague, lo que le permite invocar a las propiedades de su clase padre.
Entonces, para distribuir puntos de una competencia con JavaScript, podríamos usar la misma metodología de estas clases y herencias. Sin embargo, en vez de tener los parámetros name y teams, podríamos crear los parámetros win, loose, tie y darle distintos valores según su deporte. De este modo, utilizar las clases en JavaScript nos permite crear elementos más generales que luego aplicaremos y modificaremos a nuestros objetos para que sean específicos. Así, resolvemos varios problemas en un solo movimiento en vez de crear soluciones específicas para cada uno.
¿Cuál es el siguiente paso?
Al leer este post no solo has aprendido cómo distribuir puntos de una competencia con JavaScript usando las clases, sino que también has dado un paso hacia dominar este lenguaje de programación. En KeepCoding creemos que la mejor manera de hacer esto es combinar la teoría con la práctica y, por ello, si quieres continuar avanzando para especializarte en el desarrollo web, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp. En esta formación aprenderás todo lo que necesitas para desarrollar con JavaScript, HTML y mucho más. ¡No te pierdas esta oportunidad e inscríbete ya!
