ISNCA

Symposium

Articles

Convenciones de nomenclatura de JavaScript
admin
No Comments

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.
Share :

Deja una respuesta

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