Los parámetros son la base de elementos como clases y funciones en JavaScript, pues son aquellos que nos permiten definir qué variables queremos controlar a lo largo de nuestro código. En este post, te enseñaremos cómo pasar un objeto como parámetro en JavaScript y las ventajas de esta metodología.
¿Qué es un parámetro en JavaScript?
Antes de todo, veamos que es un parametro en programacion.
Como has podido leer en nuestros posts sobre clases y funciones en JavaScript, un parametro javascript es la base de aquellos elementos que nos ayudan a reproducir propiedades. Tanto en las clases como en las funciones, los parámetros de JavaScript nos permiten definir qué variables queremos reproducir en los objetos que creemos usando estos elementos. Recuerda que los parámetros en ambos elementos son las variables que escribimos entre paréntesis, sea después del keyword “function” en el caso de las funciones o después del keyword “constructor” en el caso de las clases.
Te ponemos un ejemplo con la clase footballLeague que nos va a permitir controlar el nombre, el equipo y la puntuación de los partidos. Ten presente que esta clase hereda las propiedades de la clase League, que puedes encontrar en nuestro post sobre cómo distribuir puntos de una competencia en JavaScript:
//parametro opcional javascript
class footballLeague extends League {
constructor (name, teams, pointsPerWin = 3, pointsPerDraw pointsperLose = 0, rounds =1) {
super (name, teams, rounds)
this.pointsPerWin = pointsPerWin;
this.pointsPerDraw = pointsPerDraw;
this.pointsPerLose = pointsPerLose;
}
}
En las líneas de código anteriores, los parámetros son name, teams, pointsPerWin, pointsPerDraw, PointsperLose y rounds. Algunos de estos parámetros se han vuelto a escribir con la palabra clave super debajo del constructor. Esta palabra clave se encarga de llamar a los valores del objeto padre, haciendo que footballLeague herede dichos valores de League. El resto de parametros js de esta clase, como los puntos por empate, pérdida y ganada, son únicos en ella.
Aunque los parámetros establecidos en la clase anterior funcionan, la manera en la que los hemos definido puede llegar a ser un problema.
Por ahora, solo tenemos seis parámetros, pero ¿te imaginas que queremos tener veintisiete o treinta y dos parámetros? Tener tantas variables en un constructor o en un método cualquiera puede ser incómodo de leer y difícil de entender. Por ello, lo que se suele hacer para solucionar este problema es pasar un objeto como parámetro en JavaScript.
¿Cómo pasar un objeto como parámetro en JavaScript?
Pasar un objeto como parámetro en JavaScript nos ayuda a ordenar nuestro código y simplificar la escritura de parámetros en nuestras clases y funciones. Para enseñarte cómo funciona, utilizaremos los parámetros de la clase padre League que te presentamos antes. Esta clase en este momento se ve así:
//parametros de funciones javascript
class League (name, teams, rounds =1) {
this.name = name;
this.teams = teams;
this.rounds = rounds;
}
Entonces, para simplificar nuestros parámetros podemos, por ejemplo, reemplazar el parámetro rounds por un objeto de configuración. Para insertar este objeto, basta con insertar config = {} en nuestro paréntesis actual. Y para que este objeto reemplace el parámetro rounds, deberá tener una propiedad rounds. Esto nos permitirá acceder a su valor, por lo que te recomendamos leer nuestro post sobre cómo acceder a las propiedades de un objeto en JavaScript.
A continuación, te mostramos los cambios que acabamos de realizar en nuestra clase League:
//funcion con parametros javascript
class League (name, teams, config={}) {
this.name = name;
this.teams = teams;
this.rounds = config.rounds;
}
Ahora que sabes cómo pasar un objeto como parámetro en JavaScript, podemos hacer lo mismo con los parámetros de puntuación de nuestra clase footballLeague. Con este cambio, haremos que cuatro de los seis parámetros estén encapsulados en el objeto de configuración, simplificando nuestra clase. Puedes ver el resultado a continuación:
class FootballLeague extends League {
constructor (name, teams, config = {}) {
super (name, teams, config = {})
this.pointsPerWin = config.pointsPerWin;
this.pointsPerDraw = config.pointsPerDraw;
this.pointsPerLose = config.pointsPerLose;
}
Con este cambio, podemos crear un objeto de configuración especial para los puntos de la liga de fútbol:
const footballLeagueConfig = {
pointsPerWin: 3,
pointsPerDraw: 1,
pointsPerLose: 0,
}
Para ejecutar esta clase, basta con que pasemos este objeto de configuración como el parámetro config de nuestro nuevo objeto de la clase footballLeague. A continuación, puedes ver las líneas de código que nos permiten ejecutarlo:
let footballLeague = new footballLeague (‘foot’, teams, footballLeagueConfig)
console.log (footballLeague)
Pasar un objeto como parámetro en JavaScript nos permite darle flexibilidad a los valores de cada propiedad o variable. Si quisiéramos que un empate valiera más, bastaría con cambiar su valor dentro del objeto para que el cambio se refleje en nuestro código.
¿Qué sigue?
Ahora que sabes cómo pasar un objeto como parámetro en JavaScript, ¡es hora de que crees tus propias clases y funciones! Si quieres, además, aprender a dominar este lenguaje de programación y muchos otros, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp. Al cabo de unos pocos meses, serás un experto en desarrollo web. ¡Apúntate ya!
