Previniendo olores raros 🫢 en Javascript

• Convención de nombres 🔓✅ parte liberada

  • Nombres descriptivos.
  • Variables y Constantes.
    • Constantes DOM.
    • Variables Array.
    • Variables Booleanos.
  • Funciones y Clases.

• Mini guía de estilos para JS 🔒 En construcción... 🚧🚧

  • Usar const y let (siempre).
  • Comillas simples en vez de dobles.
  • Espacios en blanco (siempre identa tu código).
  • Usar siempre el modo estricto.
  • Usar funciones como expresión.

• Mejorando la Legibilidad con ES6+ 🔒 En construcción... 🚧🚧

  • Desestructuración (destructuring).
  • Operador ternario/condicional (Conditional (ternary) operator).
  • Encadenamiento opcional (Optional chaining).
  • Operador de Fusión Nula (Nullish Coalescing).

Programar con código desordenado es desafiante y cardiaco, y más cuando tienes que leer código de terceros para hacer un cambio, incluso pasa con código que tu escribiste hace una semana.

¿Razones? Porque muchas veces solo nos centramos en escribir código que funcione y resuelva el problema y punto. Pero talvez se deba a otros factores como:

• Los tiempos de entrega son muy limitados, cortos.
• Talvez el dev no esta familiarizado con técnicas para escribir código limpio.
• más factores...

en lugar de avanzar y hacer mejoras, te ves obligado a detenerte y luchar para comprender lo que está frente a ti, tratando de descifrar lo que alguien más dejó atrás. Es una experiencia frustrante que consume tiempo y energía, robándote el disfrute de crear.

Afortunadamente, el desarrollo en JavaScript ha evolucionado. Con las mejoras de ES6 y versiones posteriores, contamos con herramientas que facilitan escribir código más claro y eficiente. Pero no basta con usar estas nuevas funciones; es fundamental seguir buenas prácticas y aplicar principios de diseño para asegurar que nuestro código sea mantenible y escalable.

En este artículo, exploraremos cómo las características modernas de JavaScript, junto con buenas prácticas pueden transformar un código desordenado en uno claro y eficiente.

Javascript sin olores

Cuando hablo de JavaScript (JS) sin olores, me refiero a una serie de consejos que te ayudarán a escribir código más claro y fácil de entender. Esto hace que sea más sencillo mantener y escalar tu código en el futuro, sin que tú o alguien de tu equipo se tenga que enfrentar a problemas complicados más adelante.

Y recuerda todo lo escrito, aquí solo son recomendaciones que no pretendo imponerte, toma lo que mejor te funcione a ti o a tu equipo.

Sin más vueltas, a lo que venimos 🤠.

Convención de nombres

Nombres descriptivos

Esto significa que los nombres de las variables deben reflejar claramente el tipo de información que almacenan. Un buen nombre de variable proporciona suficiente contexto para entender su propósito y contenido.

// Mal ❌
let cic = 5;
let p = 1051;
let d = 50;

Como puedes ver, el propósito de cada variable es un misterio digno de Sherlock Holmes. ¿Por qué? Porque para descifrar qué hacen, necesitarías un montón de contexto extra, como comentarios que no existen, horas revisando dónde demonios se usan, o tener al programador a mano, como si fuera tu propio servicio de soporte técnico.

// Bien ✅
let cartItemCount = 5;
let cartTotalPrice = 1051;
let appliedDiscount = 50;

En este caso, las variables reflejan claramente su contenido y propósito:

1. cartItemCount: Número de productos en el carrito de compras.
2. cartTotalPrice: Precio total de todos los productos en el carrito.
3. appliedDiscount: Monto del descuento aplicado al carrito.

Variables y Constantes

• Usar camelCase.

let Cartitemcount = 10; // ❌
let cartItemCount = 10; // ✅ Bien 

• Evitar el uso de números.

let 2cartItemCount = 6;  // ❌ Mal, genera error de token.
let cartItemCount2 = 6;  // ❌ Mal, no genera error, pero evitar.

• Evitar usar palabras reservadas del lenguaje.

Como function, class, var, const, if, while, etc.

let function; // ❌ Mal
let class;    // ❌ Mal

• Evitar uso de acentos y la letra Ñ.

let año = 2024;      // ❌ Mal
let ano = 2024;      // ✅ Bien, aunque puede ser confuso.
let year = 2024;     // ✅ Mejor, más claro y en inglés.

• Evitar uso de caracteres especiales.

let !cartItemCount;  // ❌ Mal, generan error.

• Evitar usar espacios.

let cart item count; // ❌ Mal, genera error.

• Evitar usar guiones bajos y normales.

Nota: La única excepción a la regla, de usar guiones bajos, es al nombrar constantes.

let cart-item-count; // ❌ Mal, genera error.
let cart_item_count; // ❌ Mal, no genera error, pero evitar.

• Usar mayúsculas con guiones bajos para constantes.

const API_BASE_URL = 'https://api.myecommerce.com/v1';  // ✅ Bien 
const PROMO_DISCOUNT_RATE = 0.10;                       // ✅ Bien

Constantes DOM

Lo sé, te estarás preguntando: ¿por qué "constantes DOM" y no "variables y constantes DOM"? La razón es que, cuando almacenamos o hacemos referencia a un elemento del DOM, lo que realmente solemos modificar son sus propiedades o su textContent, pero rara vez la referencia en sí. Por eso preferimos usar const en lugar de let. Pero, ojo, esto es solo una convención, no una regla estricta. Si en algún momento necesitas usar let, no pasa nada, usa lo que mejor se ajuste a tus necesidades.

Otra recomendación es añadir el prefijo "El" al final del nombre de la variable para indicar que almacena un elemento del DOM. Esta convención facilita reconocer de un vistazo que la variable representa un nodo DOM.

const addToCartButtonEl = document.getElementById('add-cart'); 
const productListEl = document.getElementById('product-list'); 
const toggleMenuButtonEl = document.getElementById('toggle-menu');

En otros rincones de todo internet talvez te topes con la sig. alternativa, usar el prefijo "$" al inicio del nombre de la variable, similar a cómo se hace en jQuery. Este prefijo también indica que la variable hace referencia a un objeto del DOM.

Ambas convenciones son válidas, pero elige una que se ajuste mejor a tu estilo de codificación o al estándar de tu equipo para mantener la consistencia en tu código.

Variables Array

Cuando guardes listas de cosas, usa nombres en plural.

let cartItems = [  // ✅ Bien 
    { id: 1, name: 'Laptop', quantity: 1, price: 999.99 },
    { id: 2, name: 'Mouse', quantity: 2, price: 25.99 }
];

let categories = ['Electronics', 'Home Appliances', 'Books'];  // ✅ Bien 

Variables Booleanos

Simon, al nombrar variables booleanas también existe una convención y es la de utilizar los prefijos is, has o can. Estos prefijos son útiles porque ayudan a identificar que la variable almacena un valor booleano.

Por ejemplo, si necesitas una variable para verificar si se puede aplicar un descuento a un producto, un buen nombre sería canApplyDiscount.

let pendingOrders = true; // ❌ Mal
let hasPendingOrders = true; // ✅ Bien

let userAdmin = true; // ❌ Mal
let isUserAdmin = true; // ✅ Bien

let applyDiscount = true; // ❌ Mal
let canApplyDiscount = true; // ✅ Bien

Evita las negaciones

En lugar de nombrar una variable como isNotUserAdmin, utilice isUserAdmin. Siempre debes abordar la convención de nombres desde el lado positivo.

Veámoslo más claro en el sig. ejemplo. Entre estos nombres, ¿cuál te resulta más cómodo: isVisible o isInvisible?

!isVisible    // ✅ Bien, simple, evitamos la carga cognitiva.
!isInvisible  // ❌ Mal, innecesariamente complejo.

A continuación más ejemplos.

Bien ✅	Mal ❌
isOpen	isClosed
isVisible	isInvisible, isHidden, isShowing, show, hide
isResolved	isRejected
isRight, isGood	isWrong, isLeft, isBad
hasValue	isEmpty
isDefined	isUndefined
isOwner	isOwning, own, wasOwner, willBeOwner

Funciones y Clases

Los nombres de funciones de JavaScript también distinguen entre mayúsculas y minúsculas. Por lo tanto, al igual que con las variables, el método CamelCase es la forma recomendada de declarar nombres de funciones.

Además de eso, debes usar sustantivos y verbos descriptivos como prefijos. Por ejemplo, si declaramos una función para recuperar un nombre, el nombre de la función debe ser getName.

Usar PascalCase para clases y funciones constructoras.

class Product {}           // ✅ Bien 
function ShoppingCart() {} // ✅ Bien

Usar camelCase para funciones nombradas.

function validateOrder() {} // ✅ Bien 

🚧 En construcción... 🚧🚧