Una clase es una manera diferente de declarar una sección de código. Aunque un nuevo desarrollador web tiende a utilizar funciones, para proyectos más grandes es importante que aprendamos a declarar clases. En este post, te enseñaremos qué son las propiedades de clase y cómo funcionan en el contexto de JavaScript.
¿Qué son las propiedades de clase?
Las propiedades de clase son aquellas que pertenecen a un segmento de código declarado como clase en vez de cómo función. Sin embargo, cuando hablamos de propiedades de clase no nos referimos a todas las variables que se encuentran dentro de un archivo en donde se declara una clase. En realidad, son aquellas que tienen un scope o alcance global. Es decir, pueden utilizarse en todos los segmentos de código.
A continuación, te mostramos una clase que hemos creado para instanciar el controlador de un detalle en un listado de contenidos. Veamos si podemos identificar qué variables son las propiedades de clase y cuáles no en las siguientes líneas de código:
export class ContentDetailController {
constructor (contentDetailElement) {
this.contentDetailElement = contentDetailElement;
this.handleDeleteButton( );
}
async showContent (contentId) {
if (!contentId) {
pubSub.publish (
pubSub.TOPICS.SHOW_ERROR_NOTIFICATION,
“Id del contenido no válido”
};
return;
}
try {
const content = await ContentService.getContent (contentId);
const contentTemplate = buildContentDetailView (content);
this.contentDetailElement.innerHTML = contentTemplate;
} catch (error) {
pubSub.publish (pubSub.TOPICS.SHOW_ERROR_NOTIFICATION, error);
}
}
handleDeteleButton ( )
Para reconocer qué líneas de código representan propiedades de clase dentro de un archivo, te aconsejamos “cerrar” las secciones de funciones. Para ello, tan solo debes pinchar en la línea de código donde empieza una función. Una vez cerradas las funciones, puedes ver que, en las líneas de código anteriores, hay una sola propiedad de clase y tres métodos. Esta propiedad se reconoce porque utiliza el operador igual a (=) dentro del constructor.
Como puedes notar, tanto con las propiedades como con los métodos, podemos utilizar la palabra clave this para acceder a ellos. En el contexto de JavaScript, esta palabra nos permite apuntar a la propia clase. Por lo anterior, podemos reconocer una propiedad de clase al revisar cuál tiene la palabra this como forma de declaración, en vez de utilizar una de las formas de declarar variables en JavaScript.
La lógica de las propiedades de clase nos indica que estas deben estar declaradas dentro del constructor de la clase. Sin embargo, hay momentos en el desarrollo de una clase que deberemos declarar una de sus propiedades en otra sección de código. Esto se da en casos en los que estemos declarando una propiedad relacionada con un proceso asíncrono, como lo sería una que tenga un await detrás. ¿Por qué? ¡Porque los constructores nunca pueden ser asíncronos!
Por esto, a menos de que tus propiedades sean asíncronas, deberás declararlas dentro del constructor de la clase. La siguiente línea de código es un ejemplo de este tipo de propiedades:
this.property = 5;
Ahora, para que conozcas más sobre esta excepción, a continuación te enseñamos cómo funcionan las propiedades de clase usando las líneas de código anteriores.
¿Cómo funcionan las propiedades de clase?
Ahora, supongamos que dentro de este controlador queremos crear una función que nos diga si el usuario conectado es el dueño del contenido detalle que estamos creando. Para ello, creamos la función isContentOwner.
A esta función debemos pasarle la información del contenido detalle, guardada en la variable content en la sección try declarada anteriormente. Sin embargo, esta función no puede acceder a dicha variable, pues es una constante declarada bajo otra función. Es decir, tiene un alcance a nivel del bloque, no a nivel global. Por ello, no es accesible más allá de las llaves que la encapsulan.
Por lo anterior, deberemos convertir la constante content en una propiedad de clase. ¿Cómo hacemos esto? Pues basta con agregar la palabra clave this antes de la propiedad. De este modo, reemplazaremos la declaración de variable (sea con var, let y const) y la convertiremos en una propiedad de clase:
this.content = await ContentService.getContent (contentId);
Al ejecutar el cambio anterior y guardar la variable como propiedad de clase, su alcance o scope sube un nivel. Esto hará que la variable, en vez de ser solo accesible desde una función o un bloque, pase a estar accesible dentro del ámbito de toda la clase. Es decir, todas las funciones declaradas podrán acceder a esta propiedad para ejecutar sus acciones.
Otra opción sería declarar la propiedad con un valor null dentro del constructor de la clase:
this.content = null;
¿Quieres seguir aprendiendo?
Tras leer este post, sabes exactamente qué son y cómo funcionan las propiedades de clase en JavaScript. Sin embargo, ¡todavía queda mucho por aprender sobre este lenguaje de programación! Por ello, te invitamos a ser parte de nuestro Desarrollo Web Full Stack Bootcamp, un espacio de formación intensiva donde aprenderás a dominar herramientas y lenguajes como JavaScript, HTML, CSS y JSX, fundamentales para este mundo. ¡Inscríbete ahora!
