JavaScript Naming Conventions

Un’introduzione alle convenzioni di denominazione JavaScript con un esempio — che ti dà il buon senso quando si tratta di nominare variabili, funzioni, classi o componenti in JavaScript. Nessuno fa rispettare queste regole di convenzione di denominazione, tuttavia, sono ampiamente accettate come standard nella comunità JS.

Convenzioni di denominazione JavaScript: Variabili

Le variabili JavaScript sono sensibili alle maiuscole. Pertanto, le variabili JavaScript con caratteri minuscoli e maiuscoli sono diverse:

 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 variabile JavaScript dovrebbe essere auto-descrittiva. Non dovrebbe essere necessario aggiungere un commento per la documentazione aggiuntiva alla variabile:
 // bad 
 var value = 'Robin'; 
 
 // bad 
 var val = 'Robin'; 
 
 // good 
 var firstName = 'Robin'; 
Il più delle volte si trovano variabili JavaScript dichiarate con un nome variabile camelCase con un carattere minuscolo iniziale:
 // bad 
 var firstname = 'Robin'; 
 
 // bad 
 var first_name = 'Robin'; 
 
 // bad 
 var FIRSTNAME = 'Robin'; 
 
 // bad 
 var FIRST_NAME = 'Robin'; 
 
 // good 
 var firstName = 'Robin'; 
Ci sono eccezioni per le costanti JavaScript, i privati e le classi/componenti — che esploreremo più avanti. Comunque, in generale una variabile JavaScript — una stringa, un booleano o un numero, ma anche un oggetto, un array o una funzione — è dichiarata con un nome variabile in camelCase.
Una breve panoramica sui diversi stili di caso:

camelCase (usato in JS)
PascalCase (usato in JS)
snake_case
kebab-case

 Convenzioni di denominazione JavaScript: Boolean
Un prefisso come is, are, o has aiuta ogni sviluppatore JavaScript a distinguere un booleano da un’altra variabile semplicemente guardandolo:
 // bad 
 var visible = true; 
 
 // good 
 var isVisible = true; 
 
 // bad 
 var equal = false; 
 
 // good 
 var areEqual = false; 
 
 // bad 
 var encryption = true; 
 
 // good 
 var hasEncryption = true; 
In contrasto con stringhe e interi, si può vedere come un’altra regola soft per una convenzione di denominazione JavaScript booleana oltre ad essere scritta in camel case.
 Convenzioni di denominazione JavaScript: Funzione
Anche le funzioni JavaScript sono scritte in camel case. Inoltre, è una buona pratica dire effettivamente cosa sta facendo la funzione dando al nome della funzione un verbo come prefisso.

 // bad 
 function name(firstName, lastName) { 
 return `${firstName} ${lastName}`; 
 } 
 
 // good 
 function getName(firstName, lastName) { 
 return `${firstName} ${lastName}`; 
 } 
Questo verbo come prefisso può essere qualsiasi cosa (es. get, fetch, push, apply, calculate, compute, post). È un’altra regola soft da considerare per avere variabili JavaScript più auto-descrittive.
 Convenzioni di denominazione JavaScript: Class
Una classe JavaScript è dichiarata con un PascalCase in contrasto con altre strutture dati JavaScript:
 class SoftwareDeveloper { 
 constructor(firstName, lastName) { 
 this.firstName = firstName; 
 this.lastName = lastName; 
 } 
 } 
 
 var me = new SoftwareDeveloper('Robin', 'Wieruch'); 
Ogni volta che un costruttore JavaScript è chiamato per istanziare una nuova istanza di una classe, il nome della classe dovrebbe apparire in Pascal Case, perché la classe è stata dichiarata con Pascal Case in primo luogo.
 Convenzioni di denominazione JavaScript: Componente
I componenti non sono ovunque in JavaScript, ma si trovano comunemente in framework frontend come React. Dal momento che un componente è più o meno istanziato – ma aggiunto al DOM – come una classe JavaScript, sono ampiamente dichiarati anche con Pascal Case.
 // 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> 
 ); 
 } 
Quando un componente viene usato, si distingue dai componenti nativi HTML e web, perché la sua prima lettera è sempre scritta in maiuscolo.
 <div> 
 <UserProfile 
 user={{ firstName: 'Robin', lastName: 'Wieruch' }} 
 /> 
 </div> 
 Convenzioni di denominazione JavaScript: Metodi
Identico alle funzioni JavaScript, un metodo su una classe JavaScript è dichiarato 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" 
Qui si applicano le stesse regole delle funzioni JavaScript — ad esempio aggiungendo un verbo come prefisso –, per rendere il nome del metodo più auto-descrittivo.
 Convenzioni di denominazione JavaScript: Private
Raramente troverete un underscore (_) davanti ad una variabile/funzione/metodo in JavaScript. Se ne vedete uno, è inteso che sia privato. Anche se non può essere realmente applicato da JavaScript, dichiarare qualcosa come privato ci dice come dovrebbe essere usato o come non dovrebbe essere usato.

Per esempio, un metodo privato in una classe dovrebbe essere usato solo internamente dalla classe, ma dovrebbe essere evitato di essere usato sull’istanza della classe:
 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 variabile/funzione privata può essere presente anche in un file JavaScript. Questo potrebbe significare che la variabile/funzione non dovrebbe essere usata al di fuori di questo file ma solo internamente per calcolare ulteriore logica di business per altre funzioni all’interno dello stesso file..
 Convenzioni di denominazione JavaScript: Costante
Ultimo ma non meno importante, ci sono delle costanti — intese come variabili che non cambiano — in JavaScript che sono scritte in lettere maiuscole (MAIUSCOLO):
 var SECONDS = 60; 
 var MINUTES = 60; 
 var HOURS = 24; 
 
 var DAY = SECONDS * MINUTES * HOURS; 
Se una variabile ha più di una parola nel suo nome di dichiarazione di variabile, fa uso di un underscore (_):
 var DAYS_UNTIL_TOMORROW = 1; 
Di solito le costanti JavaScript sono definite all’inizio di un file JavaScript. Come accennato prima, nessuno impone di non cambiare la variabile qui, tranne una dichiarazione const della variabile per strutture dati primitive, ma la sua denominazione in maiuscolo suggerisce di evitarlo.
 Convenzioni di denominazione JavaScript: Variabile globale
Una variabile JavaScript è definita globalmente, se tutto il suo contesto ha accesso ad essa. Spesso il contesto è definito dal file JavaScript in cui la variabile è dichiarata/definita, ma in piccoli progetti JavaScript può essere l’intero progetto. Non ci sono convenzioni di denominazione speciali per le variabili JavaScript globali.

Una variabile JavaScript globale è dichiarata all’inizio di un progetto/file.
Una variabile JavaScript globale è scritta in camelCase se è mutabile.
Una variabile JavaScript globale è scritta in UPPERCASE se è immutabile.

 Convenzioni di denominazione JavaScript: Underscore
E allora che dire del trattino basso e del trattino nei nomi delle variabili JavaScript? Dal momento che camelCase e PascalCase sono considerati principalmente in JS, avete visto che il trattino basso è usato solo raramente per variabili private o costanti. Occasionalmente troverete underscore quando si ottengono informazioni da terze parti come database o API. Un altro scenario in cui potreste vedere un underscore sono i parametri di funzione inutilizzati, ma non preoccupatevi ancora di questi se non li avete visti in giro 😉
 Convenzioni di denominazione JavaScript: Trattino
Anche un trattino in una variabile JavaScript non è di buon senso. Rende solo le cose più difficili; come usarli in un oggetto:
 // bad 
 var person = { 
 'first-name': 'Robin', 
 'last-name': 'Wieruch', 
 }; 
 
 var firstName = person; 
 
 // good 
 var person = { 
 firstName: 'Robin', 
 lastName: 'Wieruch', 
 }; 
 
 var firstName = person.firstName; 
Non è nemmeno possibile usare un trattino direttamente per una dichiarazione di variabile:
 var first-name = 'Robin'; 
 // Uncaught SyntaxError: Unexpected token '-' 
Ecco perché è meglio evitarli.
 Convenzioni di denominazione JavaScript: File
Ci sono due strategie di denominazione dei file in JavaScript: PascalCase e kebab-case. Nelle applicazioni frontend JavaScript, vedrete spesso PascalCase per nominare i componenti (ad esempio i componenti React).
 - components/ 
 --- user/ 
 ----- UserProfile.js 
 ----- UserList.js 
 ----- UserItem.js 
 --- ui/ 
 ----- Dialog.js 
 ----- Dropdown.js 
 ----- Table.js 
Al contrario, nelle applicazioni JavaScript backend, il kebab-case è il senso comune:
 - routing/ 
 --- user-route.js 
 --- messages-route.js 
Vedrete anche denominazioni camelCase, ma come PascalCase (scusate le applicazioni frontend), c’è il rischio che i sistemi operativi le gestiscano in modo diverso, il che può portare a dei bug. Ecco perché attenersi al kebab-case dovrebbe essere la norma per i nomi dei file in JavaScript.
Se volete imparare di più sullo stile e la formattazione del codice JavaScript, che non è discusso qui per il bene delle convenzioni di denominazione, dovreste assolutamente controllare ESLint e Prettier per JavaScript.