Seguir la convención de nombres estándar aumenta la legibilidad y facilita la comprensión de tu código. Sin embargo, muchos desarrolladores no saben cómo utilizar correctamente las convenciones de nomenclatura, y a veces complican las cosas.
En este artículo, hablaré de 10 buenas prácticas de convención de nombres de JavaScript que deberías seguir.
1. Convención de nombres para las variables
Los nombres de las variables de JavaScript distinguen entre mayúsculas y minúsculas. Las minúsculas y las mayúsculas son distintas. Por ejemplo, puedes definir tres variables únicas para almacenar el nombre de un perro, como sigue
var DogName = 'Scooby-Doo';
var dogName = 'Droopy';
var DOGNAME = 'Odie';
console.log(DogName); // "Scooby-Doo"
console.log(dogName); // "Droopy"
console.log(DOGNAME); // "Odie"
Sin embargo, la forma más recomendable de declarar las variables de JavaScript es con nombres de variables en mayúsculas y minúsculas sin espacios, también llamados camel case. Puedes utilizar la convención de nomenclatura en mayúsculas para todos los tipos de variables en JavaScript, y así te asegurarás de que no haya varias variables con el mismo nombre.
// bad
var dogname = 'Droopy';
// bad
var dog_name = 'Droopy';
// bad
var DOGNAME = ‘Droopy’;
// bad
var DOG_NAME = 'Droopy';
// good
var dogName = 'Droopy';
Los nombres de las variables deben ser autoexplicativos y describir el valor almacenado. Por ejemplo, si necesitas una variable para almacenar el nombre de un perro, debes utilizar NombreDelPerro en lugar de sólo Nombre, ya que es más significativo.
// bad
var d = 'Scooby-Doo';
// bad
var name = 'Scooby-Doo';
// good
var dogName = 'Scooby-Doo';
2. Convención de nombres para booleanos
Cuando se trata de variables booleanas, debemos utilizar is o has como prefijos. Por ejemplo, si necesitas una variable booleana para comprobar si un perro tiene dueño, debes utilizar hasPropietario como nombre de la variable.
// bad
var bark = false;
// good
var isBark = false;
// bad
var ideal = true;
// good
var areIdeal = true;
// bad
var owner = true;
// good
var hasOwner = true;
3. Convención de nombres para funciones
Los nombres de las funciones de JavaScript también distinguen entre mayúsculas y minúsculas. Así que, al igual que con las variables, se recomienda usar camel case para declarar los nombres de las funciones.
Además, debes utilizar 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.
// bad
function name(dogName, ownerName) {
return '${dogName} ${ownerName}';
}
// good
function getName(dogName, ownerName) {
return '${dogName} ${ownerName}';
}
4. Convención de nombres para las constantes
Las constantes de JavaScript también distinguen entre mayúsculas y minúsculas. Sin embargo, estas constantes deben escribirse en mayúsculas porque son variables que no cambian.
var LEG = 4;
var TAIL = 1;
var MOVABLE = LEG + TAIL;
var DAYS_UNTIL_TOMORROW = 1;
Si el nombre de la declaración de la variable contiene más de una palabra, debes utilizar UPPER_SNAKE_CASE.
Todas las constantes deben definirse al principio de tu archivo, método o clase.
5. Convención de nombres para las clases
Las reglas de la convención de nombres para las clases de JavaScript son bastante similares a las de las funciones. Tenemos que utilizar títulos descriptivos que expliquen las capacidades de la clase.
La principal diferencia entre los nombres de las funciones y los de las clases es que para los nombres de las clases tenemos que utilizar el Pascal case.
class DogCartoon {
constructor(dogName, ownerName) {
this.dogName = dogName;
this.ownerName = ownerName;
}
}
var cartoon = new DogCartoon('Scooby-Doo', 'Shaggy');
6. Convención de nombres para los componentes
Los componentes de JavaScript se utilizan ampliamente en los frameworks de front-end como React. Aunque los componentes se utilizan en el DOM, se recomienda tratarlos de forma similar a las clases y utilizar el Pascal case para definir los nombres.
// bad
function dogCartoon(roles) {
return (
< div >
< span > Dog Name: { roles.dogName } < /span>
< span > Owner Name: { roles.ownerName } < /span>
< /div>
);
}
// good
function DogCartoon(roles) {
return (
< div >
< span > Dog Name: { roles.dogName } < /span>
< span > Owner Name: { roles.ownerName } < /span>
< /div>
);
}
Como la letra inicial siempre se escribe en mayúsculas, un componente se distingue de los componentes nativos de HTML y de la web cuando se utiliza.
<div>
<DogCartoon
roles={{ dogName: 'Scooby-Doo', ownerName: 'Shaggy' }}
/>
</div>
7. Convención de nombres para los métodos
Aunque hay algunas diferencias, la estructura de una función y un método de JavaScript son bastante similares. Por tanto, las reglas de la convención de nombres son las mismas.
Debemos utilizar camel case para declarar los métodos de JavaScript y utilizar verbos como prefijos para que los nombres tengan más sentido.
class DogCartoon {
constructor(dogName, ownerName) {
this.dogName = dogName;
this.ownerName = ownerName;
}
getName() {
return '${this.dogName} ${this.ownerName}';
}
}
var cartoon= new DogCartoon('Scooby-Doo', 'Shaggy');
console.log(cartoon.getName());
// "Scooby-Doo Shaggy"
8. Convención de nombres para denotar funciones privadas
Los guiones bajos ( _ ) se utilizan ampliamente en lenguajes como MySQL y PHP para definir variables, funciones y métodos. Pero en JavaScript, el guión bajo se utiliza para denotar variables o funciones privadas.
Por ejemplo, si tienes un nombre de función privada como toonName, puedes denotar que es una función privada añadiendo un guión bajo como prefijo (_toonName).
class DogCartoon {
constructor(dogName, ownerName) {
this.dogName = dogName;
this.ownerName = ownerName;
this.name = _toonName(dogName, ownerName);
}
_toonName(dogName, ownerName) {
return `${dogName} ${ownerName}`;
}
}
var cartoon = new DodCartoon('Scooby-Doo', 'Shaggy');
// good
var name = cartoon.name;
console.log(name);
// "Scooby-Doo Shaggy"
// bad
name =cartoon._toonName(cartoon.dogName, cartoon.ownerName);
console.log(name);
// "Scooby-Doo Shaggy"
9. Convención de nombres para las variables globales
Para las variables globales de JavaScript, no hay normas de denominación específicas.
Se recomienda utilizar el camel case para las variables globales mutables y las mayúsculas para las variables globales inmutables.
10. Convención para los nombres de los archivos
La mayoría de los servidores web (Apache, Unix) distinguen entre mayúsculas y minúsculas a la hora de manejar los archivos. Por ejemplo, Flor.jpg no es flor.jpg.
Por otro lado, los servidores web, como el IIS de Microsoft, no se preocupan del caso. En tales servidores, puedes usar Flor.jpg o flor.jpg para acceder a Flor.jpg.
Sin embargo, si pasas de un servidor que no distingue entre mayúsculas y minúsculas a otro que sí lo hace, incluso un pequeño error puede hacer que tu sitio web se bloquee.
Por lo tanto, se recomienda utilizar nombres de archivo en minúsculas en todos los servidores, a pesar de que se distinga entre mayúsculas y minúsculas.
Conclusión
En este artículo, he hablado de 10 convenciones de nomenclatura de JavaScript que pueden utilizarse para mejorar nuestras habilidades de codificación. Como desarrolladores, siempre debemos adherirnos a las mejores prácticas, ya que eso aumentará la legibilidad y facilitará la comprensión de tu código para ti y tu equipo.
Espero que estas sugerencias te ayuden a mejorar tus habilidades de codificación. Gracias por leer.
