Articles

Convenciones de nomenclatura de JavaScript

Una introducción a las convenciones de nomenclatura de JavaScript mediante un ejemplo — que te da el sentido común a la hora de nombrar variables, funciones, clases o componentes en JavaScript. Nadie impone estas reglas de convenciones de nomenclatura, sin embargo, son ampliamente aceptadas como un estándar en la comunidad JS.

Convenciones de nomenclatura de JavaScript: Variables

Las variables de JavaScript distinguen entre mayúsculas y minúsculas. Por lo tanto, las variables JavaScript con caracteres en minúsculas y mayúsculas son diferentes:

var name = 'Robin Wieruch';
var Name = 'Dennis Wieruch';
var NAME = 'Thomas Wieruch';
console.log(name);
// "Robin Wieruch"
console.log(Name);
// "Dennis Wieruch"
console.log(NAME);
// "Thomas Wieruch"

Una variable JavaScript debería ser autodescriptiva. No debería ser necesario añadir un comentario para documentación adicional a la variable:

// bad
var value = 'Robin';
// bad
var val = 'Robin';
// good
var firstName = 'Robin';

Lo más frecuente es encontrar variables JavaScript declaradas con un nombre de variable camelCase con un carácter minúsculo inicial:

// bad
var firstname = 'Robin';
// bad
var first_name = 'Robin';
// bad
var FIRSTNAME = 'Robin';
// bad
var FIRST_NAME = 'Robin';
// good
var firstName = 'Robin';

Hay excepciones para las constantes, privados y clases/componentes de JavaScript — que exploraremos más adelante. Sin embargo, en general una variable de JavaScript — una cadena, booleano o número, pero también un objeto, matriz o función — se declara con un nombre de variable camelCase.

Un breve resumen sobre los diferentes estilos de mayúsculas y minúsculas:

  • camelCase (usado en JS)
  • PascalCase (usado en JS)
  • snake_case
  • kebab-case

Convenciones de nomenclatura de JavaScript: Boolean

Un prefijo como is, are, o has ayuda a todo desarrollador de JavaScript a distinguir un booleano de otra variable con sólo mirarlo:

// bad
var visible = true;
// good
var isVisible = true;
// bad
var equal = false;
// good
var areEqual = false;
// bad
var encryption = true;
// good
var hasEncryption = true;

En contraste con las cadenas y los enteros, se puede ver como otra regla suave para una convención de nomenclatura booleana de JavaScript además de estar escrita en camel case.

Convenciones de nomenclatura de JavaScript: Función

Las funciones de JavaScript también se escriben en camel case. Además, es una buena práctica decir lo que la función está haciendo dando al nombre de la función un verbo como prefijo.

// bad
function name(firstName, lastName) {
return `${firstName} ${lastName}`;
}
// good
function getName(firstName, lastName) {
return `${firstName} ${lastName}`;
}

Este verbo como prefijo puede ser cualquier cosa (por ejemplo, obtener, buscar, empujar, aplicar, calcular, calcular, publicar). Es otra regla suave a tener en cuenta para tener variables JavaScript más autodescriptivas.

Convenciones de nomenclatura JavaScript: Clase

Una clase de JavaScript se declara con PascalCase en contraste con otras estructuras de datos de JavaScript:

class SoftwareDeveloper {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
}
var me = new SoftwareDeveloper('Robin', 'Wieruch');

Cada vez que se llama a un constructor de JavaScript para instanciar una nueva instancia de una clase, el nombre de la clase debe aparecer en Pascal Case, porque la clase se ha declarado con Pascal Case en primer lugar.

Convenciones de nomenclatura de JavaScript: Componente

Los componentes no están en todas partes en JavaScript, pero se encuentran comúnmente en los frameworks frontales como React. Dado que un componente es una especie de instanciación – pero se anexa al DOM en su lugar – como una clase de JavaScript, son ampliamente declarados con Pascal Case también.

// bad
function userProfile(user) {
return (
<div>
<span>First Name: {user.firstName}</span>
<span>Last Name: {user.lastName}</span>
</div>
);
}
// good
function UserProfile(user) {
return (
<div>
<span>First Name: {user.firstName}</span>
<span>Last Name: {user.lastName}</span>
</div>
);
}

Cuando se utiliza un componente, se distingue de los componentes nativos de HTML y de la web, porque su primera letra siempre se escribe en mayúsculas.

<div>
<UserProfile
user={{ firstName: 'Robin', lastName: 'Wieruch' }}
/>
</div>

Convenciones de nomenclatura de JavaScript: Métodos

Igual que las funciones de JavaScript, un método de una clase de JavaScript se declara con camelCase:

class SoftwareDeveloper {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
getName() {
return `${this.firstName} ${this.lastName}`;
}
}
var me = new SoftwareDeveloper('Robin', 'Wieruch');
console.log(me.getName());
// "Robin Wieruch"

Aquí se aplican las mismas reglas que para las funciones de JavaScript -por ejemplo, añadir un verbo como prefijo-, para que el nombre del método sea más autodescriptivo.

Convenciones de nomenclatura de JavaScript: Private

Rara vez encontrarás un guión bajo (_) delante de una variable/función/método en JavaScript. Si ves uno, se pretende que sea privado. Aunque no puede ser realmente aplicado por JavaScript, declarar algo como privado nos indica cómo debe ser utilizado o cómo no debe ser utilizado.

Por ejemplo, un método privado en una clase sólo debe ser utilizado internamente por la clase, pero debe evitarse que sea utilizado en la instancia de la clase:

class SoftwareDeveloper {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
this.name = _getName(firstName, lastName);
}
_getName(firstName, lastName) {
return `${firstName} ${lastName}`;
}
}
var me = new SoftwareDeveloper('Robin', 'Wieruch');
// good
var name = me.name;
console.log(name);
// "Robin Wieruch"
// bad
name = me._getName(me.firstName, me.lastName);
console.log(name);
// "Robin Wieruch"

Una variable/función privada puede ocurrir en un archivo JavaScript también. Esto podría significar que la variable/función no debería usarse fuera de este archivo, sino sólo internamente para calcular más lógica de negocio para otras funciones dentro del mismo archivo..

Convenciones de nomenclatura de JavaScript: Constantes

Por último, pero no por ello menos importante, existen constantes -destinadas a ser variables no cambiantes- en JavaScript que se escriben en mayúsculas (UPPERCASE):

var SECONDS = 60;
var MINUTES = 60;
var HOURS = 24;
var DAY = SECONDS * MINUTES * HOURS;

Si una variable tiene más de una palabra en su nombre de declaración de variable, se hace uso de un guión bajo (_):

var DAYS_UNTIL_TOMORROW = 1;

Normalmente las constantes de JavaScript se definen en la parte superior de un archivo JavaScript. Como se ha insinuado antes, no se obliga a no cambiar la variable aquí, salvo una declaración const de la variable para estructuras de datos primitivas, pero su denominación en mayúsculas sugiere evitarlo.

Convenciones de nomenclatura de JavaScript: Variable Global

Una variable JavaScript está definida globalmente, si todo su contexto tiene acceso a ella. A menudo el contexto está definido por el archivo JavaScript en el que se declara/define la variable, pero en proyectos JavaScript más pequeños puede ser todo el proyecto. No hay convenciones de nomenclatura especiales para las variables globales de JavaScript.

  • Una variable global de JavaScript se declara al principio de un proyecto/archivo.
  • Una variable global de JavaScript se escribe en camelCase si es mutable.
  • Una variable global de JavaScript se escribe en UPPERCASE si es inmutable.

Convenciones de nomenclatura de JavaScript: Subrayado

¿Y qué pasa con el subrayado y el guión en los nombres de las variables de JavaScript? Dado que en JS se consideran principalmente las camelCase y las PascalCase, habrás visto que el guión bajo sólo se utiliza en raras ocasiones para variables privadas o constantes. Ocasionalmente encontrarás guiones bajos cuando obtengas información de terceros como bases de datos o APIs. Otro escenario en el que podrías ver un guión bajo son los parámetros de función no utilizados, pero no te preocupes por estos todavía si no los has visto por ahí 😉

Convenciones de nomenclatura de JavaScript: Guión

Un guión en una variable de JavaScript no es de sentido común también. Sólo hace las cosas más difíciles; como usarlos en un objeto:

// bad
var person = {
'first-name': 'Robin',
'last-name': 'Wieruch',
};
var firstName = person;
// good
var person = {
firstName: 'Robin',
lastName: 'Wieruch',
};
var firstName = person.firstName;

Incluso no es posible usar un guión directamente para una declaración de variable:

var first-name = 'Robin';
// Uncaught SyntaxError: Unexpected token '-'

Por eso es mejor evitarlos.

Convenciones de nomenclatura de JavaScript: Archivos

Hay dos estrategias de nombramiento de archivos en JavaScript: PascalCase y kebab-case. En las aplicaciones frontales de JavaScript, a menudo verás PascalCase para nombrar componentes (por ejemplo, componentes de React).

- components/
--- user/
----- UserProfile.js
----- UserList.js
----- UserItem.js
--- ui/
----- Dialog.js
----- Dropdown.js
----- Table.js

En cambio, en la aplicación backend de JavaScript, kebab-case es el sentido común:

- routing/
--- user-route.js
--- messages-route.js

También verás nombres en camelCase, pero al igual que en PascalCase (lo siento por las aplicaciones frontales), existe el riesgo de que los sistemas operativos los manejen de forma diferente, lo que puede dar lugar a bugs. Es por eso que apegarse a kebab-case debe ser la norma para los nombres de archivo en JavaScript.

Si quieres aprender más sobre el estilo y el formato del código de JavaScript, que no se discute aquí por el bien de las convenciones de nomenclatura, definitivamente debes revisar ESLint y Prettier para JavaScript.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *