Il est essentiel de maintenir la simplicité, la lisibilité et la facilité de maintenance de votre code afin de gérer des projets JavaScript complexes. Le respect constant des conventions de nommage est la clé pour atteindre cet objectif.
Les variables, les booléens, les fonctions, les constantes, les classes, les composants, les méthodes, les fonctions privées, les variables globales et les fichiers font partie des éléments JavaScript qui nécessitent des conventions de dénomination cohérentes. Vous pouvez améliorer l’organisation et la compréhension du code en mettant en œuvre des conventions de dénomination normalisées pour tous ces éléments, ce qui vous permettra de gagner du temps et d’économiser des efforts à long terme.
1. Nommer les variables
En JavaScript, les données sont stockées dans des variables. Il est essentiel de choisir des noms descriptifs pour les variables qui reflètent précisément leur fonction. Vous pouvez, par exemple, remplacer nom d’utilisateur ou prix total pour le nom d’une variable plutôt que x.
Une bonne façon de nommer les variables est la suivante :
let totalPrice = 100;
let userName = "John";
L’utilisation de noms de variables descriptifs permet d’améliorer la lisibilité du code
2. Nommer les variables booléennes
Variables qui ne peuvent avoir que deux valeurs, c’est-à-dire soit vrai ou fauxsont connues sous le nom de variables booléennes. Il est essentiel de choisir des noms appropriés pour les variables booléennes, qui expriment leur objectif.
Par exemple, au lieu d’opter pour un nom de variable tel que isTrue, il est préférable d’opter pour isValid ou hasValue.
Prenons l’exemple suivant :
let isValid = true;
let hasValue = false;
Dans cet exemple, les noms descriptifs des variables booléennes indiquent clairement ce qu’elles représentent.
3. Nommer les fonctions
En JavaScript, une fonction est une unité de code autonome destinée à effectuer une tâche particulière. Il s’agit d’un bloc de code qui peut être appelé ou invoqué par d’autres parties du code et qui fonctionne comme une entité indépendante.
Pour nommer efficacement les fonctions, il convient d’utiliser des noms descriptifs qui traduisent leur objectif. Par exemple, au lieu de créer une fonction foooptez pour des noms plus illustratifs comme validateUserInput ou calculerPrixTotal.
Par exemple :
function calculateTotalPrice(price, quantity) {
return price * quantity;
}
function validateUserInput(input) {
return input !== undefined && input !== null;
}
4. Attribution de noms aux constantes
Les constantes sont des variables qui ne peuvent pas être réaffectées. Lorsque vous nommez des constantes, il est important d’utiliser des lettres majuscules et des traits de soulignement pour séparer les mots.
Par exemple :
const MAX_PRICE = 1000;
const MIN_PRICE = 0;
Dans cet exemple, toutes les lettres majuscules et les traits de soulignement ont été utilisés pour séparer les mots dans les noms des constantes.
5. Nommer les classes
En JavaScript, les objets peuvent être créés à l’aide de plans appelés classes. Pour obtenir des pratiques de nommage immaculées, il est de la plus haute importance d’exécuter PascalCase, une convention de nommage qui impose de mettre la première lettre de chaque mot en majuscule.
Prenons un exemple :
class ShoppingCart {
constructor(make, model) {
this.make = make;
this.model = model;
}
}
Dans cet exemple, la classe Panier d’achat a été nommée en utilisant PascalCase, ce qui signifie que la première lettre de chaque mot du nom de la classe a été mise en majuscule et qu’il n’y a pas d’espace ou de soulignement entre les mots.
6. Nommer les composants
Les composants sont des éléments essentiels dans le développement de logiciels modernes, en particulier dans des frameworks comme React, qui mettent l’accent sur le code réutilisable.
En décomposant une interface utilisateur ou une application complexe en éléments plus petits et gérables, vous pouvez créer des composants qui peuvent être réutilisés dans différents projets, ce qui réduit le temps de développement et augmente l’efficacité du code.
Encore une fois, nous recommandons vivement d’utiliser la convention de dénomination PascalCase pour nommer les composants. Cela signifie qu’il faut mettre une majuscule à la première lettre de chaque mot du nom du composant.
Une telle convention permet de distinguer les composants des autres segments de code, ce qui simplifie l’identification et la manipulation.
function Button(props) {
return <button>{props.label}</button>;
}
Dans cet exemple, la convention de nommage PascalCase a été utilisée pour nommer le composant Bouton.
7. Méthodes de dénomination
Lorsque l’on nomme des méthodes, il est essentiel d’utiliser des noms descriptifs qui communiquent avec succès ce que la méthode accomplit, puisque les méthodes sont des fonctions qui concernent un objet.
Par exemple :
class Car {
constructor(make, model) {
this.make = make;
this.model = model;
}
startEngine() {
// code to start engine
}
stopEngine() {
// code to stop engine
}
}
}
Les noms descriptifs (startEngine, stopEngine) sont utilisées pour les méthodes de cet exemple, ce qui permet de comprendre facilement leur objectif.
8. Nommer les fonctions privées
Les fonctions définies comme privées ne sont accessibles qu’à l’intérieur de l’objet dans lequel elles sont définies. Il est essentiel d’ajouter un trait de soulignement (_) pour indiquer que les fonctions sont privées.
Voici un exemple :
class Car {
constructor(make, model) {
this.make = make;
this.model = model;
}
_startEngine() {
// code to start engine
}
_stopEngine() {
// code to stop engine
}
}
L’utilisation d’un trait de soulignement dans cet exemple indique que les fonctions sont privées.
9. Nommer les variables globales
Les variables classées comme globales sont accessibles à partir de n’importe quelle partie de la base de code. Lors de la dénomination de ces variables globales, il est essentiel d’utiliser des noms clairs et descriptifs qui transmettent efficacement l’objectif visé.
Par exemple :
const MAX_PRICE = 1000;
const MIN_PRICE = 0;
function checkPrice(price) {
if (price > MAX_PRICE) {
// code to handle high prices
} else if (price < MIN_PRICE) {
// code to handle low prices
}
}
10. Nommer les fichiers
L’organisation efficace des fichiers est un aspect crucial de la gestion réussie d’un projet JavaScript. Pour garantir des conventions de dénomination rationnelles et cohérentes, il est essentiel de séparer les mots dans les noms de fichiers à l’aide de lettres minuscules et de traits d’union.
Les lettres minuscules sont préférables car JavaScript est un langage sensible à la casse, ce qui signifie que le langage traite les lettres minuscules et majuscules différemment. L’utilisation de lettres minuscules pour les noms de fichiers garantit la cohérence et évite toute confusion lors de la référence à des fichiers dans le code.
Les traits d’union sont utilisés pour séparer les mots dans les noms de fichiers car les espaces ne sont pas autorisés dans les noms de fichiers. D’autres alternatives telles que le soulignement ou le camelCase peuvent également être utilisées, mais les traits d’union sont généralement préférés pour leur lisibilité.
L’utilisation de traits d’union rend également les noms de fichiers plus accessibles aux utilisateurs de lecteurs d’écran ou d’autres technologies d’assistance.
my-app/
├── src/
├── components/
├── button.js
├── input-field.js
├── utils/
├── string-utils.js
├── date-utils.js
├── app.js
├── index.js
Dans cet exemple, des lettres minuscules et des traits d’union sont utilisés pour séparer les mots dans les noms de fichiers.
Importance de respecter les conventions d’appellation en JavaScript
Le respect de bonnes conventions de nommage est un aspect essentiel de l’écriture d’un code propre et facile à maintenir en JavaScript. En respectant ces conventions, vous pouvez rendre votre code plus lisible et plus facile à maintenir, en particulier dans certains frameworks JavaScript où vous devez manipuler du code volumineux, ce qui peut vous faire gagner du temps et des efforts à long terme.