Clean Code en JavaScript: 5 consejos para desarrollo web

Actualizado el viernes, 22 septiembre, 2023

El código limpio o Clean Code (en JavaScript u otro lenguaje), es un concepto que se refiere a escribir código de programación de manera clara, legible, bien estructurada y fácilmente mantenible.

El Clean Code en JavaScript facilita la colaboración entre desarrolladores, reduce los errores y mejora la capacidad de mantenimiento del código a largo plazo. O lo que es lo mismo, permite a los desarrolladores comprender el código más rápido y realizar cambios con mayor facilidad. Además, mejora la escalabilidad de los proyectos, lo que permite que el software se adapte mejor a las necesidades futuras de tu web.

En definitiva, el código limpio es esencial para el desarrollo de calidad y es una práctica que todo profesional de la programación debería incorporar en su trabajo diario para asegurar que su código sea de calidad.

Uso de Javascript

En la actualidad, JavaScript es uno de los lenguajes de programación más populares en el mundo web.

JavaScript se utiliza en el desarrollo de aplicaciones móviles, especialmente en la creación de aplicaciones híbridas. También se usa en la creación de aplicaciones de escritorio, videojuegos, software de automatización y robótica, entre otros proyectos. Debido a su versatilidad y flexibilidad, JavaScript se ha convertido en un lenguaje de programación imprescindible para los desarrolladores en todo el mundo.

5 consejos para crear Clean Code en JavaScript

Si eres un desarrollador de JavaScript, o estás empezando en este lenguaje, es importante que escribas código limpio. En esta serie de consejos, te damos algunas prácticas recomendadas para mejorar tu código JavaScript.

Sigue leyendo para aprender cómo mejorar tu código en JavaScript y llevar tus habilidades de programación al siguiente nivel.

Utiliza nombres de variables claros y descriptivos

Utiliza nombres de variables que describan de manera clara su función y propósito en el código. Evita nombres genéricos o acrónimos difíciles de entender. Puedes emplear la fórmula CamelCase para mejorar la legibilidad.

El CamelCase consiste en escribir palabras juntas, sin espacios y con mayúsculas en la primera letra de cada palabra, excepto la primera. Por ejemplo: nombreDeVariable.

Además, te recomendamos emplear constantes en lugar de valores mágicos. Con esto podrás modificar el valor en un solo sitio, y además te evitarás tener que conocer el valor de memoria.

const valorMaximo = 10;
let presentacion = "Hola Mundo";

Comentarios con moderación

Los comentarios pueden ser útiles para explicar el propósito o la función de una sección de tu desarrollo, pero no los uses como excusa para escribir código difícil de entender o para justificar la falta de claridad.

Esto es un ejemplo de lo que no se debe hacer:

// Valor de la variable presentación
let presentación = "Hola mundo"; // Comentario al final de una línea de código

/*
Si necesitas más de tres líneas de código para explicar algo,
quizás es que tu código no es lo
sucientemente claro. 
Dale una vuelta
*/

Además, los comentarios incrementan el tamaño del archivo JS, lo que puede penalizar tu SEO.

Lo bueno, si breve…

Escribe funciones cortas y concisas. Las funciones deben ser cortas y hacer una sola cosa. Evita funciones largas y complejas que realicen varias tareas a la vez. Además, haciendo funciones cortas con tareas concretas, será más probable que se vuelvan a utilizar en otros lugares del desarrollo.

//Ejemplo de función corta
function mayoriaEdad(age) {
  return age < 18 ;
}
// Función larga que realiza varias tareas
function procesarDatos(datos) {
  let resultado = 0;

  for (let i = 0; i < datos.length; i++) {
    resultado += datos[i];
  }

  resultado = resultado / datos.length;

  if (resultado > 50) {
    return "Promedio alto";
  } else {
    return "Promedio bajo";
  }
}

// Función corta que realiza una sola tarea
function calcularPromedio(datos) {
  let resultado = 0;

  for (let i = 0; i < datos.length; i++) {
    resultado += datos[i];
  }

  resultado = resultado / datos.length;

  return resultado;
}

//Tipo Promedio
function tipoPromedio(promedio) {
  return promedio < 18 ? "Promedio alto" : "Promedio bajo";
}

En el primer ejemplo, la función procesarDatos ejecuta varias tareas a la vez, lo que la hace larga y difícil de entender. En el segundo ejemplo, las funciones calcularPromedio y tipoPromedio solo realizan una tarea.

Las segundas funciones son más fácil de entender y es más fácil depurar y mantenerlas en el futuro. La idea es dividir una función compleja en varias más simples, que hagan una sola tarea cada una.

Indentación clara

Utiliza una indentación clara y coherente en todo el código, para que sea fácil de leer y entender. Hoy en día, todos los IDES o editores de código tienen la propiedad de indentar el código. No obstante, si eres de los que escribe código en el bloc de notas este consejo puede serte útil.

function calcularPromedio(datos) {
  let resultado = 0;

  for (let i = 0; i < datos.length; i++) {
    resultado += datos[i];
  }

  resultado = resultado / datos.length;

  return resultado;
}

function imprimirResultado(resultado) {
  console.log("El resultado es: " + resultado);
}

let miArray = [2, 4, 6, 8, 10];
let promedio = calcularPromedio(miArray);

imprimirResultado(promedio);

En este ejemplo, el código está indentado de manera clara y coherente, lo que hace que sea más fácil de leer y entender. Las funciones están indentadas con dos espacios y las líneas dentro de cada función también están indentadas dos espacios. Los nombres de las funciones y las variables están escritos en minúscula y con CamelCase, lo que facilita su lectura.

Desestructura tus objetos

La desestructuración de objetos simplifica la asignación de valores. En lugar de tener que asignar los valores de las propiedades del objeto uno por uno, la desestructuración permite asignarlos de forma más sencilla.

Reduce la cantidad de código que se necesita para acceder a las propiedades de un objeto, lo que puede ahorrar tiempo y reducir el riesgo de errores. Además, puede mejorar el rendimiento del código, ya que permite acceder a las propiedades del objeto de manera más eficiente.

const usuario = {
  firstName: "Edi",
  lastName: "Vieito",
  age: 38
};

const { firstName, lastName, age } = usuario;

//sin desestructuración sería:
const firstName = usuario.firstName;
const lastName = usuario.lastName;
const age = usuario.age;

Herramientas online de análisis de código

También tienes herramientas de análisis de código online, que pueden ayudarte a detectar problemas comunes, como la falta de coherencia en la indentación o la complejidad excesiva de las funciones.

• Codacy: es una plataforma de análisis de código que te permite analizar tu código JavaScript y encontrar problemas de calidad, seguridad y complejidad. Ofrece recomendaciones y una interfaz de usuario fácil de usar para hacer un seguimiento de los problemas.

• JSHint: es otra herramienta de código abierto que analiza el código JavaScript en busca de errores de sintaxis y estilo. Es fácil de configurar y puedes utilizarla desde la línea de comandos o integrarla con tu editor de código. JSHint también te permite personalizar las reglas de análisis de código según tus necesidades.

Siguiendo estos consejos, podrás escribir código JavaScript más claro, fácil de entender y mantener, lo que te permitirá trabajar de manera más eficiente. Esperamos haber aportado nuestro granito de arena para que tu código sea mejor para tu yo futuro. ¡Larga vida al Clean Code en JavaScript!