Clean Code en JavaScript: principios y ejemplos para principiantes

Entrenador de Python en Línea para Principiantes

Aprende Python fácilmente sin sobrecargarte de teoría. Resuelve tareas prácticas con verificación automática, recibe pistas y escribe código directamente en el navegador, sin instalar nada.

Start Course

Clean Code en JavaScript: principios y ejemplos para principiantes



El código limpio (Clean Code) no es solo un concepto de moda, sino una habilidad fundamental de cualquier desarrollador profesional. En el mundo de JavaScript (especialmente en el entorno Node.js), el código se escribe rápido, pero mantenerlo sin principios claros se convierte en una pesadilla. Este artículo es para principiantes que quieren escribir no solo código funcional, sino código hermoso, legible y escalable.



El código limpio es código que es fácil de leer, fácil de modificar y fácil de probar. No provoca el deseo de reescribirlo desde cero. Analicemos los principios básicos con ejemplos prácticos.



1. Nombramiento de variables y funciones: di la verdad



La regla más simple y a la vez más difícil: el nombre debe reflejar la esencia. No ahorres caracteres, ahorra tiempo de comprensión.



Malo (poco claro):

const d = new Date();const arr = ['apple', 'banana', 'grape'];const fn = (x) => x * 2;


Bueno (legible):

const currentDate = new Date();const fruitList = ['apple', 'banana', 'grape'];const doubleValue = (value) => value * 2;


Reglas de nombramiento:

  • Variables — sustantivos (user, productList, errorMessage).
  • Funciones — verbos (getUser, calculateTotal, validateEmail).
  • Valores booleanos — comienza con is, has, should (isActive, hasPermission, shouldUpdate).
  • Evita números mágicos — extráelos a constantes.


// Maloconst t = 3600000; // ¿Qué número es este?

// Buenoconst MILLISECONDS_IN_AN_HOUR = 3600000;const timeout = MILLISECONDS_IN_AN_HOUR;


2. Funciones: un paso — una acción



El principio de responsabilidad única (Single Responsibility Principle) también se aplica a las funciones. Una función debe hacer una cosa y hacerla bien.



Malo (hace todo a la vez):

function processUserData(user) {    const fullName = `${user.firstName} ${user.lastName}`;    const email = user.email.toLowerCase();    const isValid = email.includes('@');        if (isValid) {        const result = { fullName, email };        saveToDatabase(result);        sendWelcomeEmail(email);        return result;    } else {        throw new Error('Invalid email');    }}


Bueno (dividido en funciones pequeñas):

function buildFullName(firstName, lastName) {    return `${firstName} ${lastName}`;}

function normalizeEmail(email) { return email.toLowerCase().trim();}

function isValidEmail(email) { return email.includes('@');}

function processUserData(user) { const fullName = buildFullName(user.firstName, user.lastName); const email = normalizeEmail(user.email); if (!isValidEmail(email)) { throw new Error('Invalid email'); } const result = { fullName, email }; saveToDatabase(result); sendWelcomeEmail(email); return result;}


Este código es fácil de probar, fácil de modificar y fácil de entender.



3. Gestión de la complejidad: evita el anidamiento profundo



El anidamiento profundo de if y for es enemigo de la legibilidad. Usa retorno temprano (early return) y Guard Clauses.



Malo (infierno profundo):

function processOrder(order) {    if (order) {        if (order.isPaid) {            if (order.items.length > 0) {                // ... 50 líneas de código            }        }    }}


Bueno (estructura plana):

function processOrder(order) {    if (!order) {        return;    }                

Blogs

Book Recommendations