Naming Conventions para Proyectos JavaScript

Este documento establece convenciones de nombres para proyectos JavaScript. Siguiendo estos lineamientos, se busca mejorar la consistencia, colaboración y mantenibilidad del código.

Índice

• Variables
• Booleans
• Functions
• Constantes
• Clases y Componentes
• Métodos
• Funciones Privadas
• Variables Globales
• Nombres de Archivos
• Resumen de Formatos

Variables

• Formato: camelCase
• Descripción: Las variables deben ser descriptivas y específicas para el propósito que cumplen.

// good
let userName = 'Juan';
const productCount = 5;

// bad
let usr_name = 'Juan';
const pCount = 5;

Aplicación:

• Frontend: se usa camelCase en variables de estado y para manejar datos.
• Backend: es útil para nombres en controladores, servicios y modelos de datos.

Booleans

• Formato: camelCase con prefijos is, are o has.
• Descripción: Los nombres booleanos deben ser claros, indicando una condición o estado.

// good
let isAvailable = true;
const hasPermission = false;
let areItemsSelected = true;

// bad
let available = true;
const permission = false;
let selectedItems = true;

Aplicación:

• Frontend: el uso de prefijos facilita la comprensión en lógica condicional.
• Backend: útil para variables que manejan permisos y estados de autenticación.

Functions

• Formato: camelCase
• Descripción: Los nombres de funciones deben expresar claramente la acción que realizan.

// good
function fetchUserData() {
  // code
}

const calculateTotal = (items) => {
  // code
}

// bad
function get() {
  // code
}

const calc = (i) => {
  // code
}

Aplicación:

• Frontend: para manejar eventos y funciones auxiliares.
• Backend: se utiliza en servicios y controladores para acciones específicas.

Constantes

• Formato: UPPER_CASE_SNAKE
• Descripción: Las constantes deben estar en mayúsculas y separadas por guiones bajos.

// good
const API_URL = 'https://api.example.com';
const MAX_RETRY_COUNT = 3;
const FULL_NAME = {
  firstName: "Juan",
  lastName: "Carlo"
}

// bad
const ApiUrl = 'https://api.example.com';
const maxRetryCount = 3;
const FullName = {
  firstName: "Juan",
  lastName: "Carlo"
}

Aplicación:

• Frontend: para configurar URLs, claves o valores constantes.
• Backend: útiles para constantes globales o valores de configuración.

Clases y Componentes

• Formato: PascalCase
• Descripción: Usa nombres específicos que representen el propósito de la clase o componente.

// good
class UserController {
  // code
}

function ProductList() {
  // code
}

// bad
class usercontroller {
  // code
}

function product_list() {
  // code
}

Aplicación:

• Frontend: se usa PascalCase para componentes.
• Backend: se usa en clases de controladores, servicios y modelos de datos.

Métodos

• Formato: camelCase
• Descripción: Utiliza verbos que describan la acción específica de cada método.

class User {
  // good
  getName() {
    // code
  }

  updateProfile(data) {
    // code
  }

  // bad
  Name() {
    // code
  }

  updProf(d) {
    // code
  }
}

Aplicación:

• Frontend: útil para métodos de manejo de estado y eventos.
• Backend: usado en métodos dentro de clases de servicio y controladores.

Funciones Privadas

• Formato: _camelCase
• Descripción: Prefija con _ para indicar que es una función interna.

class User {
  // good
  _validateEmail(email) {
    // código
  }

  // bad
  validateEmail(email) {
    // código
  }
}

Aplicación:

• Frontend: para identificar funciones internas en lógica de componentes.
• Backend: en servicios y modelos para distinguir métodos internos.

Variables Globales

• Formato: UPPER_CASE_SNAKE
• Descripción: Idealmente, evita el uso de variables globales.

// good
const GLOBAL_THEME_COLOR = '#333333';

// bad
const globalThemeColor = '#333333';

Aplicación:

• Frontend: se debe evitar, usando mejor contexto o almacenamiento local.
• Backend: usa servicios en lugar de variables globales.

Nombres de Archivos

• Formato: kebab-case para módulos y PascalCase para componentes o clases.
• Descripción: Usa nombres claros que describan el contenido o propósito del archivo.

// good
user-service.js
product-list.js
UserProfile.js

// bad
userService.js
Productlist.js
product_list.js

Aplicación:

• Frontend: usa PascalCase para componentes y kebab-case para utilidades.
• Backend: usa kebab-case para archivos de servicios y controladores.

Resumen de Formatos

Tipo	Formato	Ejemplo
Variables	camelCase	userName
Booleans	camelCase (con prefijos is, are, has)	isAvailable
Funciones	camelCase	fetchData
Constantes	UPPER_CASE_SNAKE	API_KEY
Clases y Componentes	PascalCase	User
Métodos	camelCase	calculateTotal
Funciones Privadas	_camelCase	_fetchData
Variables Globales	UPPER_CASE_SNAKE	GLOBAL_CONFIG
Nombres de Archivos	kebab-case o PascalCase	user-profile.js o UserProfile.js

Notas Adicionales:

• Consistencia: Mantén estas convenciones en el proyecto para facilitar la colaboración.
• Nombres Descriptivos: Usa nombres claros y evita abreviaciones.
• Modularización: Usa contexto y dependencias inyectadas en lugar de variables globales.