Escribir código que solo necesita usarse una vez se puede hacer como quieras. Pero, en la mayoría de los casos, es esencial seguir las mejores prácticas y mantener un código limpio.

Recuerde, es probable que otro desarrollador, o incluso usted mismo, lea su código en una fecha posterior. Cuando llegue ese momento, su código debería explicarse por sí mismo. Cada variable, función y comentario debe ser preciso, limpio y fácil de entender. Este enfoque no solo facilita el mantenimiento sino que también promueve la colaboración y la eficiencia dentro de su equipo de desarrollo.

Así, cuando alguien (o usted) regrese para agregar o modificar su código, será fácil entender qué hace cada línea de código. De lo contrario, dedicará la mayor parte de su tiempo a intentar comprender el código. El mismo problema surgirá para un nuevo desarrollador que trabaje en su código base. No entenderán el código si no está limpio. Por lo tanto, es muy importante escribir código limpio.

¿Qué es el código limpio?

El código limpio se refiere básicamente al código que es

1. Fácil de comprender
2. Fácil de depurar
3. Facil de mantener
4. Los comentarios están bien escritos, son breves y comprensibles
5. Sin código duplicado (redundante) y sigue la regla KISS (¡Mantenlo simple, estúpido!)

Con eso, para escribir código limpio, el desarrollador debe mantener la coherencia en el código y el desarrollador debe seguir las mejores prácticas para el lenguaje en particular.

¿Por qué es importante el código limpio?

Cuando los equipos siguen principios de código limpio, el código base se vuelve más fácil de leer y navegar. Esto ayuda a los desarrolladores a comprender rápidamente el código y comenzar a contribuir. Estas son algunas de las razones por las que el código limpio es importante.

1. Legibilidad y mantenimiento: Es fácil leer y comprender el código cuando está bien escrito, tiene buenos comentarios y sigue las mejores prácticas. Una vez que aparece un problema o error, sabes exactamente dónde encontrarlo.

2. Depuración: El código limpio está diseñado con claridad y simplicidad, lo que facilita la localización y comprensión de secciones específicas del código base. Una estructura clara, nombres de variables significativos y funciones bien definidas facilitan la identificación y resolución de problemas.

3. Calidad y confiabilidad mejoradas: El código limpio sigue las mejores prácticas de lenguajes particulares y prioriza el código bien estructurado. Agrega calidad y mejora la confiabilidad. Por lo tanto, elimina los errores que pueden surgir debido a códigos defectuosos y no estructurados.

Ahora que entendemos por qué el código limpio es crucial, profundicemos en algunas de las mejores prácticas y principios que le ayudarán a escribir código limpio.

Principios del código limpio

Para crear un código excelente, uno debe adherirse a los principios y prácticas del código limpio, como el uso de métodos pequeños y bien definidos.

Veamos esto en detalle.

1. Evite los números codificados

En lugar de usar el valor directamente, podemos usar una constante y asignarle ese valor. De modo que en el futuro, si necesitamos actualizar ese valor, tendremos que actualizarlo en una sola ubicación.

Ejemplo

function getDate() {
  const date = new Date();
  return "Today's date: "   date;
}

function getFormattedDate() {
  const date = new Date().toLocaleString();
  return "Today's date: "   date;
}

En este código, en algún momento hay un cambio que en lugar de "Fecha de hoy: " se convierte en "Fecha:". Esto se puede mejorar asignando esa cadena a una variable.

Código mejorado:

const todaysDateLabel = "Today's date: ";

function getDate() {
  const date = new Date();
  return todaysDateLabel   date;
}

function getFormattedDate() {
  const date = new Date().toLocaleString();
  return todaysDateLabel   date;
}

En el código anterior, resulta fácil cambiar la cadena de fecha cuando sea necesario. Mejora la mantenibilidad.

2. Utilice nombres significativos y descriptivos
En lugar de utilizar nombres de variables comunes en todas partes, podemos utilizar nombres un poco más descriptivos, lo cual se explica por sí mismo. El nombre de la variable en sí debe definir su uso.

Reglas de nombres

1. Elija nombres descriptivos e inequívocos.
2. Hacer una distinción significativa.
3. Usa nombres pronunciables.
4. Usar nombres que se puedan buscar.
5. Reemplazar números mágicos con constantes con nombre.
6. Evitar codificaciones. No agregues prefijos ni escribas información.

Ejemplo

// Calculate the area of a rectangle
function calc(w, h) {
    return w * h;
}

const w = 5;
const h = 10;
const a = calc(w, h);
console.log(`Area: ${a}`);

Aquí el código es correcto pero hay cierta vaguedad en el código. Veamos el código donde se utilizan nombres descriptivos.

Código mejorado

// Calculate the area of a rectangle
function calculateRectangleArea(width, height) {
    return width * height;
}

const rectangleWidth = 5;
const rectangleHeight = 10;
const area = calculateRectangleArea(rectangleWidth, rectangleHeight);
console.log(`Area of the rectangle: ${area}`);

Aquí todos los nombres de las variables se explican por sí mismos. Por lo tanto, es fácil entender el código y mejora la calidad del código.

3. Utilice comentarios únicamente cuando sea necesario
No es necesario escribir comentarios en todas partes. Simplemente escriba donde sea necesario y escriba de forma breve y fácil de entender. Demasiados comentarios generarán confusión y un código base desordenado.

Reglas de comentarios

1. Intenta siempre explicarte en código.
2. No seas redundante.
3. No agregues ruido obvio.
4. No utilices comentarios de llaves de cierre.
5. No comentar el código. Simplemente elimínelo.
6. Usar como explicación de intención.
7. Usar como aclaración del código.
8. Usar como advertencia de las consecuencias.

Ejemplo

// Function to get the square of a number
function square(n) {
    // Multiply the number by itself
    var result = n * n; // Calculate square
    // Return the result
    return result; // Done
}

var num = 4; // Number to square
var squared = square(num); // Call function

// Output the result
console.log(squared); // Print squared number

Aquí podemos ver que los comentarios se utilizan para definir pasos que se entienden fácilmente leyendo el código. Estos comentarios son innecesarios y hacen que el código esté desordenado. Veamos el uso correcto de los comentarios.

Código mejorado

/**
 * Returns the square of a number.
 * @param {number} n - The number to be squared.
 * @return {number} The square of the input number.
 */
function square(n) {
    return n * n;
}

var num = 4;
var squared = square(num); // Get the square of num

console.log(squared); // Output the result

En el ejemplo anterior, los comentarios se utilizan solo cuando es necesario. Esta es una buena práctica para limpiar su código.

4. Escribir funciones que hagan solo una cosa
Cuando escriba funciones, no les agregue demasiadas responsabilidades. Siga el Principio de Responsabilidad Única (SRP). Esto hace que la función sea más fácil de entender y simplifica la escritura de pruebas unitarias.

Reglas de funciones

1. Mantenlo pequeño.
2. Haz una cosa.
3. Usa nombres descriptivos.
4. Prefiero menos argumentos.
5. Dividir el método en varios métodos independientes que se pueden llamar desde el cliente.

Ejemplo

async function fetchDataAndProcess(url) {
    // Fetches data from an API and processes it in the same function
    try {
        const response = await fetch(url);
        const data = await response.json();

        // Process data (e.g., filter items with value greater than 10)
        const processedData = data.filter(item => item.value > 10);

        console.log(processedData);
    } catch (error) {
        console.error('Error:', error);
    }
}

// Usage
const apiUrl = 'https://api.example.com/data';
fetchDataAndProcess(apiUrl);

En el ejemplo anterior, podemos ver una función que obtiene datos utilizando una API y los procesa. Esto se puede hacer mediante otra función. Actualmente, la función de procesamiento de datos es muy pequeña, pero en un proyecto a nivel de producción, el procesamiento de datos puede ser muy complejo. En ese momento, no es una buena práctica mantenerlo en la misma función. Esto hará que tu código sea complejo y difícil de entender de una sola vez.
Veamos la versión limpia de esto.

Código mejorado

async function fetchData(url) {
    // Fetches data from an API
    try {
        const response = await fetch(url);
        return await response.json();
    } catch (error) {
        console.error('Error:', error);
        throw error;
    }
}

function processData(data) {
    // Processes the fetched data (e.g., filter items with value greater than 10)
    return data.filter(item => item.value > 10);
}

// Usage
const apiUrl = 'https://api.example.com/data';

fetchData(apiUrl)
    .then(data => {
        const processedData = processData(data);
        console.log(processedData);
    })
    .catch(error => {
        console.error('Error:', error);
    });

En este ejemplo, las responsabilidades están separadas: la función fetchData maneja la llamada API y la función ProcessData maneja el procesamiento de datos. Esto hace que el código sea más fácil de entender, mantener y probar.

5. Evite la duplicación de código (siga el principio DRY: no se repita)

Para mejorar la capacidad de mantenimiento y la limpieza del código, esfuércese por crear funciones reutilizables o reutilizar el código existente siempre que sea posible. Por ejemplo, si está obteniendo datos de una API para mostrarlos en una página, escribiría una función que recupere los datos y los pase a un procesador para mostrarlos en la interfaz de usuario. Si es necesario mostrar los mismos datos en otra página, en lugar de escribir la misma función nuevamente, debe mover la función a un archivo de utilidad. Esto le permite importar y usar la función en ambas instancias, promoviendo la reutilización y la coherencia en todo su código base.

Otras reglas generales para escribir código limpio

• Seguir las convenciones estándar (para JavaScript Camel Case).
• Mantenlo simple y estúpido. Lo más simple siempre es mejor. Reducir la complejidad tanto como sea posible.
• Regla de los boy scouts. Deja el camping más limpio de lo que lo encontraste.
• Encuentre siempre la causa raíz. Busque siempre la causa raíz de un problema.
• Escribir código que sea fácil de entender

Implemente estas Prácticas y Principios a partir de hoy para escribir Código Limpio.