Mejores Prácticas
## Objetivos de Aprendizaje
- Escribir código JavaScript limpio y mantenible
- Seguir convenciones establecidas
- Dominar técnicas de depuración
## Estilo de Código
### Convenciones de Nomenclatura
```javascript
// Variables y funciones: camelCase
const nombreUsuario = "Juan";
function calcularTotal() {}
// Constantes: UPPER_SNAKE_CASE
const MAX_REINTENTOS = 3;
const API_URL = "https://api.ejemplo.com";
// Clases: PascalCase
class CuentaUsuario { }
class ProcesadorDatos { }
```
### Comentarios
```javascript
// Bueno: explica el POR QUÉ, no el QUÉ
const MAX_REINTENTOS = 3;
const x = 5; // Mal: repite el código
```
### Formateo
```javascript
// Usar prettier o ESLint para formateo consistente
const nombre = "Juan";
const obj = { a: 1, b: 2 };
function procesar(datos) {
if (!datos) return null;
}
```
## Variables
```javascript
// Preferir const, luego let, evitar var
const CONSTANTE = "valor";
let variable = "puede cambiar";
const a = 1;
let b = 2;
// Nombres significativos
const edadUsuario = 25;
const x = 25;
```
## Funciones
```javascript
// Funciones puras cuando sea posible
function sumar(a, b) {
return a + b;
}
function saludar(nombre = "Invitado") {
return `¡Hola, ${nombre}!`;
}
async function cargarDatosUsuario(id) {
const usuario = await fetchUsuario(id);
const posts = await fetchPosts(usuario.id);
return { usuario, posts };
}
```
## Objetos y Arrays
```javascript
// Usar destructuring de objetos
const { nombre, edad, email } = usuario;
const usuarioActualizado = { ...usuario, email: "nuevo@ejemplo.com" };
const duplicados = nums.map(n => n * 2);
const pares = nums.filter(n => n % 2 === 0);
const suma = nums.reduce((a, b) => a + b, 0);
```
## Strings
```javascript
const saludo = `¡Hola, ${nombre}!`;
const partes = ["a", "b", "c"];
const resultado = partes.join(", ");
```
## Igualdad
```javascript
if (valor === null) { }
if (valor !== undefined) { }
```
## Programación Asíncrona
```javascript
async function cargarDatos() {
try {
const datos = await fetchDatos();
return datos;
} catch (error) {
console.error("Falló la carga:", error);
throw error;
}
}
const [usuarios, posts] = await Promise.all([
fetchUsuarios(),
fetchPosts()
]);
```
## Seguridad
```javascript
const sanitizado = DOMPurify.sanitize(entradaUsuario);
"use strict";
const resultado = Function("x", "return x + 1")(5);
```
## Rendimiento
```javascript
const contenedor = document.querySelector(".contenedor");
const fragmento = document.createDocumentFragment();
items.forEach(item => fragmento.appendChild(crearItem(item)));
contenedor.appendChild(fragmento);
function debounce(fn, delay) {
let timeout;
return (...args) => {
clearTimeout(timeout);
timeout = setTimeout(() => fn(...args), delay);
};
}
```
## Pruebas
```javascript
function calcularTotal(items) {
return items.reduce((suma, item) => suma + item.precio, 0);
}
```
## Resumen
- Usar nombres de variables y funciones significativos
- Preferir `const` sobre `let`, evitar `var`
- Usar igualdad estricta (`===`)
- Manejar errores gracefully
- Escribir funciones puras cuando sea posible
- Usar sintaxis moderna (async/await, arrow functions, destructuring)
- Seguir guías de estilo establecidas (ESLint, Prettier)
- Escribir pruebas para funcionalidad crítica
Comments
Comments powered by Giscus
To enable comments, add your Giscus embed code here.
Learn more about Giscus →