Convenciones de nombres en JavaScript: Variables, funciones, clases y más

Las convenciones de nombres de JavaScript no son impuestas por el lenguaje, pero se siguen universalmente en el ecosistema. Esta guía cubre lo que todo desarrollador JavaScript y TypeScript debería saber.

Variables y funciones: camelCase

Variables, funciones y nombres de métodos usan camelCase — la primera palabra en minúscula, las siguientes con mayúscula inicial:

const userName = "Alice";
let totalPrice = 0;

function getUserById(id) { /* ... */ }
const calculateShipping = (weight) => weight * 2.5;

Clases y componentes: PascalCase

Clases, componentes React y funciones constructoras usan PascalCase:

class UserAccount { /* ... */ }
class HttpClient { /* ... */ }

// Componentes React
function UserProfile({ name }) { /* ... */ }
const ShoppingCart = () => { /* ... */ };

Constantes: SCREAMING_SNAKE_CASE

Las constantes verdaderas — valores que nunca cambian y se conocen en tiempo de compilación — usan mayúsculas con guiones bajos:

const MAX_RETRY_COUNT = 3;
const API_BASE_URL = "https://api.example.com";
const DEFAULT_PAGE_SIZE = 20;

Nota: no toda variable const es una "constante" en este sentido. const user = getUser() es una variable normal — usa camelCase.

Variables booleanas

Prefija los booleanos con is, has, can, should para mayor claridad:

const isLoading = true;
const hasPermission = false;
const canEdit = user.role === "admin";
const shouldRedirect = !isAuthenticated;

Campos privados

JavaScript moderno usa el prefijo # para campos de clase verdaderamente privados. La convención antigua con guion bajo (_name) sigue siendo común en librerías:

class User {
  #password;
  constructor(name, password) {
    this.name = name;
    this.#password = password;
  }
}

Nombres de archivo

Tipo	Convención	Ejemplo
Componente React	PascalCase	UserProfile.tsx
Módulo de utilidades	camelCase	dateUtils.ts
Archivo de config	kebab-case	eslint-config.js
Archivo de test	Igual que el fuente	UserProfile.test.tsx
Módulo CSS	PascalCase o kebab	UserProfile.module.css

Especificidades de TypeScript

• Interfaces: PascalCase, sin prefijo I. UserProps, no IUserProps.
• Type aliases: PascalCase. type ApiResponse = { ... }
• Enums: PascalCase para el enum y para los miembros. enum Color { Red, Green, Blue }
• Genéricos: Una sola letra mayúscula. T, K, V

Event handlers en React

Prefija las funciones de manejo de eventos con handle, y los props con on:

// Props: onSubmit, onClick, onChange
// Handlers: handleSubmit, handleClick, handleChange
<Button onClick={handleSubmit} />

Convierte a convenciones JavaScript

¿Trabajas con una API Python que devuelve snake_case? Usa nuestro conversor camelCase para transformar las claves. ¿Necesitas nombrar un componente React? Prueba el conversor PascalCase. Compara todos los formatos en el hub de conversión.