Tabla de contenido
- 🚀 Cambiando el chip: Nombres/Naming
-
- Convención para nombrar variables.
- Convenciones para nombrar constantes (const).
- Como no nombrar (cuídate de estas practicas).
- Nombres descriptivos basados en el propósito del tipo.
- Matrices (arrays)
- Booleanos (booleans)
- Funciones (functions)
- Clases (class)
🔒 Mini guía de estilos para JS
🔒 Mejorando la Legibilidad con ES6+
Hacer cambios en un código “con mal olor” es realmente desafiante y 💔cardíaco. Lo es aún más cuando se trata de código de terceros, pero el verdadero golpe llega cuando descubres que ese código que tú escribiste hace solo una 📅semana, que en su momento parecía claro, ahora es un caos😱.
Esto sucede porque a menudo nos concentramos en que el código funcione ⚡rápidamente y resuelva el problema de inmediato. No obstante, también influyen factores como:
⏰ Tiempos de entrega ajustados: La prisa a menudo lleva a priorizar la velocidad en lugar de la calidad. ¿Quién no ha sucumbido a la presión del “🫵tienes que entregarlo ya”?
📚 Falta de experiencia en código limpio: No todos los desarrolladores, incluso con experiencia, conocen o aplican buenas prácticas. A veces, el conocimiento sobre código limpio es un lujo que pocos se permiten.
🏋️♂️ Sobrecarga de trabajo: La acumulación de tareas impulsa soluciones rápidas y poco limpias. ¿Quién tiene tiempo para lo perfecto?
💸 “Luego lo refactorizamos”: La deuda técnica se acumula como un mal hábito y rara vez se enfrenta después.
🔍 Subestimar el código limpio: Creer que “con que funcione basta” ignora que el código desorganizado es mucho más difícil de mantener y corregir a futuro.
En lugar de avanzar y hacer mejoras🚀, te ves obligado a detenerte y luchar para comprender lo que está frente a ti, intentando descifrar lo que alguien más dejó atrás. Es una experiencia frustrante que drena tu ⌛ tiempo y ⚡ energía, robándote la satisfacción de la creación.
Javascript sin olores
Cuando hablo de "JavaScript sin olores", no estoy diciendo que tu código deba oler a ☕café recién hecho, pero sí que al menos no debería asustar a cualquiera que lo mire y lea👀. En este artículo, vamos a trabajar con JS Vanilla el único lenguaje de lado del cliente y el más incomprendido. Pero con un giro de trama: aprovecharemos todas las bondades, y características modernas de ES6+ junto a convenciones, guías de estilos, patrones, en resumidas cuentas, código limpio ✨.
Y recuerda, lo que he compartido aquí son solo recomendaciones💡; no pretendo imponerte nada. Toma lo que mejor se adapte a ti o a tu equipo 🤝 y hazlo tuyo✨.
Sin más vueltas, a lo que venimos.
🚀 Cambiando el chip: Nombres/Naming
Como en todo gran viaje, el primer paso no solo es el más importante, sino el que nos dará unas muy buenas bases y las más solidas para alejarnos de esos olores raros que tanto nos marean.
Bienvenido, al primer registro en la 🚀 Bitácora del capitán Dev: Nombres o Naming. Y Recuerda, nombrar variables, funciones, clases o hasta archivos no es un detalle menor en tu brújula.
🪐 Nombres descriptivos
Esto significa que los nombres de las variables deben reflejar claramente el tipo de información que almacenan. Cada variable bien nombrada es como un faro que te guía a ti o a quién lee cada fragmento de código.
Evita nombres genéricos o acrónimos difíciles de entender, un buen nombre de variable proporciona suficiente contexto para entender su propósito y contenido.
// Evita esto ❌, naufragarás.
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 = 0.50;
let shipName = 'Barco fantasma';
En este caso, las variables reflejan claramente su contenido y propósito:
- cartItemCount: Número de productos en el carrito de compras.
- cartTotalPrice: Precio total de todos los productos en el carrito.
- appliedDiscount: Monto del descuento aplicado al carrito.
🪐 Convención para nombrar variables
En el mundo de los lenguajes de programación existen varias convenciones ampliamente utilizadas al nombrar variables, entre las más comunes están las sigs.:
- UpperCamelCase
- PascalCalmelCase
- snake_case
- flatcase
- dot.notation
En el caso de JavaScript, la convención más utilizada por los developers y la única que nos interesa destacar por ahora es:
- lowerCamelCase
En esta convención lowerCamelCase cada palabra comienza con minúscula, excepto las subsecuentes, que inician con mayúscula. Y ojo, porque no solo se usa en variables, sino, también en funciones.
Cartitemcount = 10; // ❌
cartItemCount = 10; // ✅ Bien
🪐 Convenciones para nombrar constantes (const)
Las constantes son otra forma de almacenar valores que, a diferencia de las variables, no pueden ser reasignados durante la ejecución del programa. Si intentaras modificar una constante, mirarías rápidamente la consola teñida de un hermoso color rojo intimidante.
Tipos de valores que pueden almacenar las constantes:
- Valores primitivos: Booleanos, números, cadenas de texto, null y undefined.
- Estructuras complejas: Objetos ({}), arreglos ([]) y funciones.
- Referencias a elementos del DOM: Elementos individuales (como botones, inputs, etc.) o listas de nodos seleccionados de una página web.
Cómo te pudiste dar cuenta las constantes no solo se limitan a almacenar valores primitivos o estructuras complejas; también pueden contener referencias a elementos del DOM.
Nota: Es importante destacar que aunque el identificador de la constante no puede ser reasignado, los datos dentro de una estructura mutable, como objetos o arreglos, sí pueden modificarse. Este comportamiento puede parecer contradictorio, pero es una característica clave de JavaScript.
Ahora que conocemos los diferentes tipos de valores que las constantes pueden almacenar, hablemos de las convenciones para nombrarlas. Las constantes suelen nombrarse utilizando los sigs. estilos que dependen del contexto y la naturaleza del dato almacenado:
- UPPER_SNAKE_CASE: Se utiliza principalmente para valores inmutables o “globales”, como configuraciones o valores constantes universales.
const API_BASE_URL = 'https://api.myecommerce.com/v1'; // ✅ Bien
const PROMO_DISCOUNT_RATE = 0.10; // ✅ Bien
- lowerCamelCase: Se emplea para referencias locales o específicas, como las que apuntan a estructuras complejas.
const userProfile = { name: "Alice", age: 30 };
- Prefijo “$” o sufijo “El” + la convención lowerCalmelCase: Se emplea exclusivamente para almacenar referencias del DOM.
Ahora es importante mencionar que
cuando almacenamos o hacemos referencia a un elemento del DOM, lo que realmente solemos modificar son sus propiedades, como textContent, classList o estilos CSS, pero rara vez la referencia en sí. Por esta razón, utilizar const en lugar de let es una convención común al trabajar con elementos del DOM. Sin embargo, esto no es una regla estricta: si en algún momento necesitas usar let, hazlo siempre que se ajuste mejor a tus necesidades.
Convenciones para nombrar constantes del DOM
Existen dos convenciones principales que ayudan a identificar rápidamente que una constante almacena un elemento del DOM:
-
Sufijo “El”:*
Añadir el sufijo
Elal final del nombre de la constante facilita reconocer que la variable representa un nodo del DOM. Esta práctica es especialmente útil para mejorar la legibilidad del código.
const addToCartButtonEl = document.getElementById('add-cart');
const productListEl = document.getElementById('product-list');
const toggleMenuButtonEl = document.getElementById('toggle-menu');
- Prefijo $: Similar a la convención utilizada en jQuery, este prefijo indica que la constante hace referencia a un elemento del DOM.
const $article = document.createElement('ARTICLE')
Ambas convenciones son válidas y cumplen el mismo propósito: identificar claramente que la constante almacena un nodo del DOM. Lo más importante es elegir una y aplicarla consistentemente en tu proyecto
🪐 Como no nombrar (cuídate de estas practicas).
La siguientes practicas causan errores en la ejecución del código, así que tu variables:
- No pueden incluir espacios en blanco.
let cart item count; // ❌ Mal
- No pueden ser palabras reservadas del lenguaje.
// Como function, class, var, const, if, while, etc.
let function = 5; // ❌ Mal
let class = null; // ❌ Mal
- No pueden comenzar con números, aunque sí incluirlos después de la primera letra.
let 2cartItemCount = 6; // ❌ Mal
let cartItemCount2 = 6; // ❌ Mal, no genera error, pero evitar. números.
- No pueden contener signos de puntuación, con la excepción de los signos $ y _.
let !cartItemCount; // ❌ Mal
let ?cartItemCount // ❌ Mal
- No pueden contener operadores aritméticos ni otros símbolos alfanuméricos.
let cartI+temCount; // ❌ Mal
let año = 2024; // ❌ Mal, no genera error pero evitar.
- Evitar usar guiones bajos y normales.
let cart-item-count; // ❌ Mal
Nota: La única excepción a la regla, es cuando se usa para nombrar constantes.
🪐 Nombres descriptivos basados en el propósito del tipo
- Matrices (arrays)
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
- Booleanos (booleans)
Imagina una caja llena de switches y ninguno dice si está encendido o apagado🔌. Darle prefijos como is, has, o can a tus variables booleanas es como etiquetar esos switches: isActive, hasPermission, canFly. ¡Sabes lo que hace cada uno al instante! ⚡️. Te ayudan a identificar rápidamente que se trata 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 |
- Funcione (functions)
Los nombres de funciones en JavaScript también distinguen entre mayúsculas y minúsculas. Por lo tanto, al igual que con las variables, utiliza la convención CamelCase para 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.
- Clases (class)
Usar PascalCase para clases y funciones constructoras.
class Product {} // ✅ Bien
function ShoppingCart() {} // ✅ Bien
Usar camelCase para funciones nombradas.
function validateOrder() {} // ✅ Bien
🚧 Contenido en construcción, continuara... 🚧🚧
Top comments (0)