Conventions de nommage JavaScript

Une introduction aux conventions de nommage JavaScript par l’exemple — qui vous donne le bon sens quand il s’agit de nommer des variables, des fonctions, des classes ou des composants en JavaScript. Personne ne fait respecter ces règles de convention de nommage, cependant, elles sont largement acceptées comme une norme dans la communauté JS.

Conventions de nommage JavaScript : Variables

Les variables JavaScript sont sensibles à la casse. Par conséquent, les variables JavaScript avec des caractères minuscules et majuscules sont différentes :

 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" 
Une variable JavaScript devrait être auto-décrite. Il ne devrait pas être nécessaire d’ajouter un commentaire pour une documentation supplémentaire à la variable:
 // bad 
 var value = 'Robin'; 
 
 // bad 
 var val = 'Robin'; 
 
 // good 
 var firstName = 'Robin'; 
Le plus souvent, vous trouverez des variables JavaScript déclarées avec un nom de variable en camelCase avec un caractère minuscule en tête :
 // bad 
 var firstname = 'Robin'; 
 
 // bad 
 var first_name = 'Robin'; 
 
 // bad 
 var FIRSTNAME = 'Robin'; 
 
 // bad 
 var FIRST_NAME = 'Robin'; 
 
 // good 
 var firstName = 'Robin'; 
Il existe des exceptions pour les constantes JavaScript, les privates et les classes/composants — que nous explorerons plus tard. Cependant, en général, une variable JavaScript — une chaîne, un booléen ou un nombre, mais aussi un objet, un tableau ou une fonction — est déclarée avec un nom de variable en camelCase.
Un bref aperçu sur les différents styles de casse :

camelCase (utilisé en JS)
PascalCase (utilisé en JS)
snake_case
kebab-case

Conventions de dénomination en JavaScript : Booléen
Un préfixe comme is, are ou has aide tout développeur JavaScript à distinguer un booléen d’une autre variable en le regardant simplement :
 // bad 
 var visible = true; 
 
 // good 
 var isVisible = true; 
 
 // bad 
 var equal = false; 
 
 // good 
 var areEqual = false; 
 
 // bad 
 var encryption = true; 
 
 // good 
 var hasEncryption = true; 
Contrairement aux chaînes de caractères et aux entiers, vous pouvez le voir comme une autre règle souple pour une convention de dénomination des booléens JavaScript en plus d’être écrite en casse camel.
Conventions de dénomination JavaScript : Fonction
Les fonctions JavaScript sont également écrites en casse camel. En outre, c’est une bonne pratique de dire réellement ce que fait la fonction en donnant au nom de la fonction un verbe comme préfixe.

 // bad 
 function name(firstName, lastName) { 
 return `${firstName} ${lastName}`; 
 } 
 
 // good 
 function getName(firstName, lastName) { 
 return `${firstName} ${lastName}`; 
 } 
Ce verbe comme préfixe peut être n’importe quoi (par exemple, get, fetch, push, apply, calculate, compute, post). C’est encore une autre règle douce à prendre en compte pour avoir des variables JavaScript plus auto-descriptives.
Conventions de nommage JavaScript : Classe
Une classe JavaScript est déclarée avec une casse Pascal, contrairement aux autres structures de données JavaScript :
 class SoftwareDeveloper { 
 constructor(firstName, lastName) { 
 this.firstName = firstName; 
 this.lastName = lastName; 
 } 
 } 
 
 var me = new SoftwareDeveloper('Robin', 'Wieruch'); 
Chaque fois qu’un constructeur JavaScript est appelé pour instancier une nouvelle instance d’une classe, le nom de la classe doit apparaître en casse Pascal, car la classe a été déclarée avec la casse Pascal en premier lieu.
Conventions de nommage JavaScript : Composant
Les composants ne sont pas partout en JavaScript, mais on les trouve couramment dans les frameworks frontaux comme React. Puisqu’un composant est kinda instancié — mais annexé au DOM à la place — comme une classe JavaScript, ils sont largement déclarés avec Pascal Case aussi.
 // 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> 
 ); 
 } 
Lorsqu’un composant est utilisé, il se distingue des composants HTML et web natifs, car sa première lettre est toujours écrite en majuscule.
 <div> 
 <UserProfile 
 user={{ firstName: 'Robin', lastName: 'Wieruch' }} 
 /> 
 </div> 
Conventions de dénomination JavaScript : Méthodes
Comme pour les fonctions JavaScript, une méthode sur une classe JavaScript est déclarée avec 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" 
Ici s’appliquent les mêmes règles que pour les fonctions JavaScript — par exemple l’ajout d’un verbe en préfixe –, pour rendre le nom de la méthode plus auto-descriptif.
Conventions de nommage JavaScript : Private
Il est rare que vous trouviez un trait de soulignement (_) devant une variable/fonction/méthode en JavaScript. Si vous en voyez un, c’est qu’il est destiné à être privé. Même si cela ne peut pas être réellement appliqué par JavaScript, déclarer quelque chose comme privé nous renseigne sur la façon dont il doit être utilisé ou non.

Par exemple, une méthode privée dans une classe ne doit être utilisée qu’en interne par la classe, mais il faut éviter de l’utiliser sur l’instance de la 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" 
Une variable/fonction privée peut également apparaître dans un fichier JavaScript. Cela pourrait signifier que la variable/fonction ne devrait pas être utilisée en dehors de ce fichier mais seulement en interne pour calculer une logique commerciale supplémentaire pour d’autres fonctions dans le même fichier..
Conventions de nommage JavaScript : Constantes
Enfin, il existe des constantes — destinées à être des variables non changeantes — en JavaScript qui sont écrites en lettres majuscules (UPPERCASE) :
 var SECONDS = 60; 
 var MINUTES = 60; 
 var HOURS = 24; 
 
 var DAY = SECONDS * MINUTES * HOURS; 
Si une variable a plus d’un mot dans son nom de déclaration de variable, elle fait usage d’un trait de soulignement (_):
 var DAYS_UNTIL_TOMORROW = 1; 
En général, les constantes JavaScript sont définies en haut d’un fichier JavaScript. Comme laissé entendre précédemment, personne n’impose de ne pas modifier la variable ici, à l’exception d’une déclaration const de la variable pour les structures de données primitives, mais sa dénomination en majuscule suggère de l’éviter.
Conventions de dénomination JavaScript : Variable globale
Une variable JavaScript est définie de manière globale, si tout son contexte y a accès. Souvent, le contexte est défini par le fichier JavaScript dans lequel la variable est déclarée/définie, mais dans les petits projets JavaScript, il peut s’agir de l’ensemble du projet. Il n’y a pas de conventions de dénomination spéciales pour les variables JavaScript globales.

Une variable JavaScript globale est déclarée en haut d’un projet/fichier.
Une variable JavaScript globale est écrite en camelCase si elle est mutable.
Une variable JavaScript globale est écrite en MAJUSCULE si elle est immuable.

Conventions de dénomination JavaScript : Soulignement
Alors, qu’en est-il du soulignement et du tiret dans la dénomination des variables JavaScript ? Puisque la camelCase et la PascalCase sont principalement considérées en JS, vous avez vu que le soulignement n’est que rarement utilisé pour les variables ou constantes privées. Occasionnellement, vous trouverez des traits de soulignement lorsque vous obtiendrez des informations de tiers, comme des bases de données ou des API. Un autre scénario où vous pourriez voir un trait de soulignement sont les paramètres de fonction inutilisés, mais ne vous inquiétez pas encore à ce sujet si vous ne les avez pas vus dehors 😉
Conventions de nommage JavaScript : Tiret
Un tiret dans une variable JavaScript n’a pas non plus de sens commun. Il ne fait que rendre les choses plus difficiles ; comme les utiliser dans un objet :
 // bad 
 var person = { 
 'first-name': 'Robin', 
 'last-name': 'Wieruch', 
 }; 
 
 var firstName = person; 
 
 // good 
 var person = { 
 firstName: 'Robin', 
 lastName: 'Wieruch', 
 }; 
 
 var firstName = person.firstName; 
Il n’est même pas possible d’utiliser un tiret directement pour une déclaration de variable :
 var first-name = 'Robin'; 
 // Uncaught SyntaxError: Unexpected token '-' 
C’est pourquoi il vaut mieux les éviter.
Conventions de nommage JavaScript : Les fichiers
Il existe deux stratégies de dénomination des fichiers en JavaScript : PascalCase et kebab-case. Dans les applications frontales JavaScript, vous verrez souvent la PascalCase pour nommer les composants (par exemple, les composants React).
 - components/ 
 --- user/ 
 ----- UserProfile.js 
 ----- UserList.js 
 ----- UserItem.js 
 --- ui/ 
 ----- Dialog.js 
 ----- Dropdown.js 
 ----- Table.js 
En revanche, dans les applications JavaScript backend, kebab-case est le sens commun :
 - routing/ 
 --- user-route.js 
 --- messages-route.js 
Vous verrez aussi des dénominations camelCase, mais comme pour PascalCase (désolé pour les applications frontales), il y a un risque que les systèmes d’exploitation les traitent différemment, ce qui peut conduire à des bugs. C’est pourquoi s’en tenir à la casse kebab devrait être la norme pour les noms de fichiers en JavaScript.
Si vous voulez en savoir plus sur le style et le formatage du code JavaScript, qui n’est pas abordé ici pour le bien des conventions de nommage, vous devriez certainement consulter ESLint et Prettier for JavaScript.