Aprender a programar no es solo dominar los lenguajes de programación para la web como JavaScript, HTML y CSS, también es aprender las buenas prácticas que nos llevan a tener un código más simple, eficiente y ordenado. Por ello, en este post, te enseñaremos cómo simplificar el constructor de JavaScript para ordenar tus clases y objetos.
¿Qué es el constructor de JavaScript?
En nuestro post sobre las clases de JavaScript, hemos aprendido que estas funcionan como los moldes de plastilina con los que jugábamos de pequeños. Si pensamos en los objetos como la plastilina, podemos pensar que las clases nos ayudan a moldear la forma que tomarán estos objetos a partir de propiedades y métodos. En este post, también hemos aprendido que, siempre que queramos insertar una clase con la palabra clave class, debemos hacer uso del objeto constructor.
El objeto constructor de JavaScript nos permite inicializar los objetos que creemos a partir de nuestra clase y se define usando la palabra clave constructor. Al lado de esta palabra clave, definiremos los argumentos o parámetros que queremos controlar con nuestra clase, siempre entre paréntesis. Estos pueden ser llamados como queramos y dependerán de las propiedades específicas de nuestro proyecto.
El problema con el objeto constructor y los parámetros en general es que podemos caer en el hábito de crear decenas de parámetros en un solo constructor. Por ello, te hemos enseñado la estrategia de pasar un objeto como parámetro en JavaScript. Esta estrategia nos permite insertar un objeto que contenga como propiedades los distintos parámetros que queramos en nuestro constructor, reduciendo el número de parámetros que tenemos entre paréntesis. Sin embargo, esta estrategia todavía no termina de simplificar el constructor de JavaScript, pues todavía tenemos que asignarle valores a cada parámetro usando la palabra clave this.
Aunque insertar todas estas asignaciones dentro del constructor no tiene nada de malo, desde KeepCoding creemos que hay una mejor manera de ordenar nuestro código. Por ello, a continuación, te enseñamos qué hacemos para simplificar el constructor de JavaScript.
¿Cómo simplificar el constructor de JavaScript?
Para ejemplificar nuestro proceso, pensemos que tenemos una clase League con los siguientes parámetros. Esta es la clase que resultó de nuestro post sobre cómo pasar un objeto como parámetro en JavaScript.
class League (name, teams, config ={ }) {
this.name = name;
this.teams = teams;
this.rounds = config.rounds;
}
En esta clase, existe un objeto config que dentro puede tener el número de propiedades y funciones que queramos. A estas propiedades las llamamos usando el comando objeto.propiedad y es este el valor que asignamos a las variables de nuestra clase. Para simplificar el constructor de JavaScript y el número de asignaciones que creemos dentro de él, crearemos un método setup que luego llamaremos desde nuestro objeto constructor.
Entonces, ¿cómo se ve exactamente este método setup? A continuación te lo mostramos:
setup (config = { }) {
this.config = config;
}
Lo que contiene el método setup es un objeto de configuración llamado config, el mismo al que antes aludíamos en nuestra clase. Por ahora, estamos haciendo lo mismo que hemos hecho antes. Pero espera, que este método tiene sus ventajas. Dentro de este método podemos insertar las propiedades que queramos que estén por defecto en nuestro proyecto. Esto puede ser, por ejemplo, el número de rondas:
setup (config = { }) {
const defaultConfig = {rounds:1};
this.config = config;
}
Esta configuración nos permite definir el número de rondas por defecto. Sin embargo, puede que este valor cambie en los distintos objetos que creemos usando esta clase. Entonces, para hacer que el valor que le asignemos a nuestros objetos se mantenga sobre el valor por defecto, usaremos el método object.assign.
El resultado final de esta configuración será el siguiente:
setup (config={ }) {
const defaultConfig = {rounds: 1};
this.config = object.assign (defaultConfig, config);
}
Dentro del método setup, podemos insertar las asignaciones que queramos y definir la prioridad de estos valores sobre los objetos que crearemos más adelante. Para llamar a este método desde nuestra clase, insertamos la siguiente línea de código:
this.setup (config);
Y así, con una sola línea, evitamos crear decenas de asignaciones en nuestro constructor.
¿Qué sigue?
Ahora que sabes cómo utilizar los métodos setup y object.assign para simplificar el constructor de JavaScript, te invitamos a que pruebes estas estrategias en tus propias líneas de código. Para ayudarte con el desarrollo de este código y guiarte en tu camino a dominar JavaScript y muchos otros lenguajes de programación, KeepCoding tiene el bootcamp intensivo perfecto para ti: el Desarrollo Web Full Stack Bootcamp, con el que te convertirás en un experto en desarrollo web en pocos meses. ¿A qué esperas para unirte? ¡Te esperamos pronto!
