Variables - No duplicar valores de variables

Este es el segundo artículo de una serie de publicaciones sobre cómo mejorar el uso de variables en general.

Nota: El código de ejemplo en este artículo está en JavaScript, pero los conceptos y sugerencias se pueden aplicar a cualquier lenguaje. El ejemplo no tiene sentido funcionalmente, solo sirve para demostrar los conceptos aquí tratados.

Índice

Estos son los temas que se discuten en cada artículo:

1. Usando constantes
2. Evita duplicar valores de variables (magic strings)
3. Usando variables para simplificar el código

Evita duplicar valores de variables (magic strings)

Echemos un vistazo al siguiente código:

function onLoad(pageType) {
  if (pageType === 'MAIN') {    console.log('Main page loaded')
  } else {
    console.log('Other pageType')
  }
}

function onFocus(pageType) {
  if (pageType === 'MAIN') {    console.log('Focused on main page')
  } else {
    console.log('Focus on other pageType. The MAINSTREAM is amazing')
  }
}

// Llamando esas funciones (desde el mismo archivo u otro archivo).
function callOnLoad() {
  onLoad('MAIN')}

function callOnFocus() {
  onFocus('MAIN')}

Como se puede apreciar, 'MAIN' es usado en multiples lugares: para decidir qué hacer cuando las funciones son invocadas, y para llamar dichas funciones. Este código hace lo que tiene que hacer, pero tener esa variable duplicada en múltiples lugares es un error grande. En el futuro esto se puede convertir en algo muy difícil de mantener tanto para ti como para tus compañeros de trabajo.

Por ejemplo, imagina que tu aplicación es mucho más grande, y tú estás usando 'MAIN' en multiples archivos y componentes, y ahora necesitas aplicar uno de los siguientes cambios:

• Reemplazar 'MAIN' por 'MAIN_PAGE'.
• Identificar todos los lugares donde 'MAIN' está siendo referenciado para calcular el estimado de un cambio que tu equipo necesita hacer.

Tendrías que buscar todas las cadenas 'MAIN' en el código fuente, verificar que son aquellas que necesitas y no otras completamente diferentes (por ejemplo MAINSTREAM). Obviamente podrás usar "Find all" o "Replace all" en tu entorno de desarrollo (IDE), pero siempre existirá el riesgo de que hagas el cambio que no es, y necesitarás verificar uno a uno cada lugar del código que modificaste.

Veamos cómo se podría mejorar ese código:

const MAIN_PAGE_TYPE = 'MAIN'
function onLoad(pageType) {
  if (pageType === MAIN_PAGE_TYPE) {    console.log('Main page loaded')
  } else {
    console.log('Other pageType')
  }
}

function onFocus(pageType) {
  if (pageType === MAIN_PAGE_TYPE) {    console.log('Focused on main page')
  } else {
    console.log('Focus on other pageType. The MAINSTREAM is amazing')
  }
}

// Llamando esas funciones (desde el mismo archivo u otro archivo).
function callOnLoad() {
  onLoad(MAIN_PAGE_TYPE)}

function callOnFocus() {
  onFocus(MAIN_PAGE_TYPE)}

Así obtienes multiples beneficios:

• Solo necesitas modificar una línea de código para reemplazar 'MAIN' por 'MAIN_PAGE'.
• Esto ayuda a tu IDE a indexar todas las referencias a tu constante en el código fuente.
• Puedes identificar de manera segura todos los lugares donde ese valor/constante está siendo referenciado mediante funcionalidades de tu IDE como lo son "Find all references" o "Find usages".
• Si lo necesitas, puedes cambiar el nombre de dicha constante de forma segura mediante funcionalidades de tu IDE como lo son "Refactor - Rename" o "Refactor - Change Signature" o "Change All Occurrences" pues el IDE buscará todas las referencias y las actualizará automáticamente.
• Teniendo configurado intelliSense (y eslint para JavaScript) en tu IDE, este te ayudará a auto-completar los nombres de constantes, identificar si tienes referencias a constantes inexistentes, etc.

Estándares del código (preferencia personal)

• Únicamente si estás usando un lenguaje tipado (por ejemplo Java o TypeScript) puedes agrupar constantes en estructura de objectos o enums:

enum PAGE_TYPE {  MAIN = 'MAIN',  LOGIN = 'LOGIN',}
function onLoad(pageType: PAGE_TYPE) {
  if (pageType === PAGE_TYPE.MAIN) {    console.log('Main page loaded')
  } else {
    console.log('Other pageType')
  }
}

• Si estás usando un lenguaje no-tipado (como JavaScript sin TypeScript) recomiendo crear constantes independientes de lo contrario podrías estar cometiendo errores de sintaxis y el IDE no será capaz de ayudarte:

const PAGE_TYPE = {
  MAIN: 'MAIN',
  LOGIN: 'LOGIN',
}

function onLoad(pageType: PAGE_TYPE) {
  // El IDE no es capaz de saber si MAIN2 existe o no  if (pageType === PAGE_TYPE.MAIN2) {    console.log('Main page loaded')
  } else {
    console.log('Other pageType')
  }
}

Mejora tu experiencia de desarrollo (y la de tus compañeros) escribiendo código que habilite características útiles del IDE como IntelliSense.

Además, ¡recuerda que no serás la única persona que tocará ese código para siempre!