🧹 Código Limpio - La Guía Definitiva para Desarrolladores en 2024

¿Alguna vez has mirado tu código y pensado que, aunque funcional, podría parecer más profesional? Lo que diferencia a un desarrollador senior no es solo la lógica, sino también la claridad y la estructura en cada línea.

Escribe código legible para humanos, no sólo para máquinas.

¿Sabías que los desarrolladores pasan alrededor del 50% de su tiempo leyendo código escrito por otros? La legibilidad ya no es opcional, es una necesidad. La claridad del código es una de las claves para reducir la deuda técnica, ya que muchas veces es algo que dejamos pasar con el tiempo. Es importante tener en cuenta una serie de parámetros para que nuestro código se vea más profesional.

Evita las iteraciones anidadas

Como líder técnico, algo que veo con frecuencia es el uso de iteraciones anidadas, las cuales hacen muy tediosa la lectura del código. Aunque esto puede deberse a una estructura de datos mal planteada, muchas veces es más sencillo disminuir la complejidad del algoritmo desde cómo procesamos la información.

Aquí dejo un ejemplo que nos ayuda a entender esto:

 const data = [ 
        { category: 'A', values: [1, 2, 3] }, 
        { category: 'B', values: [4, 5] }, 
      ]; 
      
      data.forEach(item => {
        item.values.forEach(value => {
          console.log(`${item.category}: ${value}`);
        });
      });

A continuación, un ejemplo de cómo manejarlo correctamente:

const data = [ 
  { category: 'A', values: [1, 2, 3] }, 
  { category: 'B', values: [4, 5] }, 
];

function logValues(category, values) {
  values.forEach(value => {
    console.log(`${category}: ${value}`);
  });
}

data.forEach(item => logValues(item.category, item.values)); 

Válida siempre tus arreglos antes de operar con ellos

Otra práctica que veo comúnmente es el uso de métodos propios de los arreglos sin validar previamente que la variable sea efectivamente un arreglo. En JavaScript, los datos no son tipados, lo que permite que su tipo cambie, o que variables solo estén inicializadas sin tener un valor asignado.

Aquí dejo un ejemplo que nos ayuda a entender esto:

const items = undefined;
const filteredItems = items.filter(item => item > 2);

Y a continuación, un ejemplo del manejo correcto:

const items = undefined;

if (Array.isArray(items)) {
  const filteredItems = items.filter(item => item > 2);
}

Evita las funciones ternarias anidadas

Un tema que para mí también es de gran importancia es el uso de funciones ternarias anidadas. Aunque las funciones ternarias son útiles para escribir código más limpio, pueden convertirse en un dolor de cabeza cuando se anidan.

Aquí un ejemplo que nos ayuda a entender esto:

const getStatus = (status) => {
  return status === 'success' ? 'Operación exitosa' :
         status === 'error' ? 'Hubo un error' :
         status === 'loading' ? 'Cargando...' :
         'Estado desconocido';
};

Y este es un ejemplo de cómo manejarlo correctamente:

const getStatus = (status) => {
const getStatus = (status) => {
  const statusMessages = {
    success: 'Operación exitosa',
    error: 'Hubo un error',
    loading: 'Cargando...',
  };

  return statusMessages?.[status] || 'Estado desconocido';
};

No permitas que la deuda técnica se acumule

Podría enumerar muchos otros problemas que surgen, en su mayoría, por el afán y que permiten que la deuda técnica se acumule. Mi invitación a los equipos de desarrollo es a que presten atención a este tipo de prácticas y no dejen pasar por alto este tipo de código. Esto habla mucho de la calidad del trabajo que realizan y, aunque pueda parecer algo básico, démosle la importancia que merece.