Acostumbrarnos a trabajar con constantes y enumerados en Javascript tiene muchas ventajas, especialmente si nos enfrentamos a una aplicación en la que intervienen numerosas constantes y “números mágicos”. Este artículo tiene como objetivo convencerte de que los emplees en tu código ( 🤓) y darte una serie de pautas para declararlos y usarlos de la mejor forma posible.

¡Vamos allá!

Ventajas de los tipos enumerados

Lo primero es conocer las ventajas de trabajar con constantes y tipos enumerados para así animarnos a usarlos regularmente. Puede que al principio te parezca innecesario o incluso una “pérdida de tiempo” pero te aseguro que las ventajas a largo plazo merecen la pena el esfuerzo.

La primera de ellas tiene que ver con la legibilidad de nuestro código, es decir, lo fácil que resulta leer y entender lo que hace. Por ejemplo, no es lo mismo encontrarnos con esto que nos obliga a preguntarnos el significado de ese número mágico:

setTimeout(() => {}, 86400);

que con esto:

setTimeout(() => {}, SECONDS_IN_ONE_DAY);

Por otra parte, el uso de constantes y enumerados también ayuda a que mantener el código sea más fácil, pues al poder emplearlos para referirnos a un valor dentro de nuestro código no será necesario recurrir al famoso “search & replace” para modificar un valor.

Y por supuesto, nos facilitarán la tarea de escribir código:

• Al tener el valor almacenado en una constante no cometeremos errores tipográficos.
• Podremos emplear el autocompletado de nuestro editor y buscar por el nombre de la constante en vez de tener que recordar el valor.
• Nuestro código será mucho más consistente ya que cada valor estará declarado en un único lugar.

Definiendo constantes y enumerados

Javascript no posee el tipo “enumerado” pero sin embargo definirlo es tan sencillo como crear un objeto. Sin embargo, para diferenciarlo del resto de objetos empleados en nuestra aplicación seguiremos una serie de convenciones que nos permitirán identificar visualmente que nos encontramos ante un enumerado:

• Las propiedades de los enumerados irán en mayúsculas
• El objeto que almacena las propiedades tendrá la primera letra en mayúscula y el resto en minúscula
• Las palabras las separaremos mediante guiones bajos.

En base a esto veamos algunos ejemplos:

// Constanteconst BACKEND_URL = 'https://api.domain.com';
const BLOG_LIST = '/blog/list';// Enumeradoconst Color = {
  MAIN_COLOR: '#c00',
  SECONDARY_COLOR: '#cc0'
}const PostState = {
  PUBLISHED: 1,
  DRAFT: 2
}

Creo que es especialmente revelador el ejemplo mostrado con la declaración del enumerado PostState ya que cada una de sus propiedades reflejan por sí mismas la intención de su valor más que el valor en sí mismo. Si por ejemplo nos encontramos esto en nuestro código:

if (post.state === 1) {
...
}

¿Qué significa 1 ? ¿Cómo podemos distinguir ese 1 cuando aparezca en otro contexto? Sin embargo, asignado ese valor a un enumerado podemos inmediatamente ver su intención. Recuerda que nombrar apropiadamente los elementos de nuestro código es uno de los pilares fundamentales para cumplir con la filosofía de escribir código limpio.

if (post.state === PostState.PUBLISHED) {
...
}

Buenas prácticas

La idea que subyace detrás de la declaración de un enumerado es que sus propiedades no puedan ser modificadas en ningún momento, para lo cual Javascript nos proporciona un excelente método del cual ya hablé en una de mis recetas “javascripteras”: Object.freeze :

El método freeze aplicado sobre un objeto provoca que:

• No podamos añadir nuevas propiedades.
• No podamos eliminar sus propiedades.
• No podemos modificar los descriptores de las propiedades.

De este modo, es una buena práctica que pasemos al objeto que almacena el enumerado por el método freeze para asegurarnos de que nadie lo modificará en otra parte de la aplicación:

const PostState = Object.freeze({
  PUBLISHED: 1,
  DRAFT: 2
});

❗️ El método Object.freeze sólo actúa sobre las propiedades del objeto pero no sobre los objetos anidados que en él aparezcan:

const Colors = Object.freeze({
  MAIN: '#c00',
  SECONDARY: '#000', 
  TEXT: { 
    BLACK: '#000', 
    LIGHT: '#AAA' 
  }
});Colors.MAIN = '#B00'; // Cannot redefine property: MAIN
Colors.TEXT.BLACK = '#100'; // 😅 ok...

Conclusiones

Sé que el de hoy es un artículo más corto que los que habitualmente publico. Sin embargo creo que muchas veces introducir este tipo de pequeños en nuestras aplicaciones aporta grandes beneficios con respecto al tiempo que tardamos en implementarlos y es algo que tanto desarrolladores expertos como aquellos que estén comenzando pueden hacer desde el primer día.

Así que ya sabéis, ¡se acabaron los números mágicos repartidos por nuestro código!

¿Quieres recibir más artículos como este?

Si te ha gustado este artículo te animo a que te suscribas a la newsletter que envío cada domingo con publicaciones similares a esta y más contenido recomendado: 👇👇👇