10 conventions de nommage JavaScript essentielles que chaque développeur devrait connaître

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 implémentant des conventions de dénomination standardisées sur tous ces composants, ce qui vous permet d'économiser du temps et 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 fidèlement 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 :

laisser prix total = 100;
laisser nom d'utilisateur = "John";

Une meilleure lisibilité du code peut être obtenue en utilisant des noms de variables descriptifs

2. Nommage booléen

Les variables qui ne peuvent avoir que deux valeurs, c'est-à-dire soit vrai ou FAUX, sont appelés booléens. Il est crucial de choisir des noms appropriés pour les variables booléennes qui expriment leur objectif.

Pour illustrer, au lieu d'opter pour un nom de variable tel que est vrai, vous devriez préférer aller avec est valable ou aValeur.

Considérez cet exemple :

laisser est valide = vrai;
laisser aValeur = FAUX;

Dans cet exemple, les noms de variable booléens descriptifs indiquent clairement ce qu'ils représentent.

3. Fonctions de nommage

Une fonction en JavaScript fait référence à 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 fonctionne comme une entité indépendante.

Pour nommer efficacement les fonctions, utilisez des noms descriptifs qui traduisent leur objectif. Par exemple, au lieu de créer une fonctionfou, optez pour des noms plus illustratifs comme validerUserInput ou calculerPrixTotal.

Par exemple:

fonctioncalculerPrixTotal(Prix ​​de la Quantité) {
retour Prix ​​de la Quantité;
}
fonctionvaliderUserInput(saisir) {
retour entrée !== indéfini && entrée !== nul;
}

4. Nommer les constantes

Les constantes sont des variables qui ne peuvent pas être réaffectées. Lorsque vous nommez des constantes, il est important d'utiliser toutes les lettres majuscules et les traits de soulignement pour séparer les mots.

Par exemple:

constante PRIX_MAX = 1000;
constante PRIX_MIN = 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 de 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 dénomination immaculées, il est de la plus haute importance d'exécuter PascalCase, une convention de dénomination qui impose la capitalisation de la première lettre de chaque mot.

Prenez, par exemple :

classePanier{
constructeur(marque, modèle) {
ce.faire = faire;
ce.model = modèle ;
 }
}

Dans cet exemple, la classe Panier a été nommé en utilisant PascalCase, ce qui signifie que la première lettre de chaque mot du nom de la classe a été en majuscule et qu'il n'y a pas d'espaces ni de traits de soulignement entre les mots.

6. Nommer les composants

Les composants sont des blocs de construction 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 composants qui peuvent être réutilisés dans différents projets, réduisant le temps de développement et augmentant le code efficacité.

Encore une fois, nous vous recommandons fortement d'utiliser la convention de dénomination PascalCase pour nommer les composants. Cela signifie mettre en majuscule la première lettre de chaque mot dans le nom du composant.

Une telle convention vous aide à distinguer les composants des autres segments de code, en simplifiant l'identification et la manipulation.

fonctionBouton(accessoires) {
retour<bouton>{accessoires.label}bouton>;
}

Dans cet exemple, la convention de nommage PascalCase a été utilisée pour nommer le composant Bouton.

7. Méthodes de dénomination

Lorsque vous nommez des méthodes, il est crucial d'utiliser des noms descriptifs qui communiquent avec succès ce que la méthode accomplit puisque les méthodes sont des fonctions qui se rapportent à un objet.

Par exemple:

classeVoiture{
constructeur(marque, modèle) {
ce.faire = faire;
ce.model = modèle ;
 }
 démarrer le moteur() {
// code pour démarrer le moteur 
 } 
 arrêtMoteur() { 
// code pour arrêter le moteur 
 }
 }
}

Noms descriptifs (démarrer le moteur, stopEngine) sont utilisés pour les méthodes de cet exemple, en veillant à ce que leur objectif soit facilement compris.

8. Nommer les fonctions privées

Les fonctions définies comme privées sont limitées à l'accès uniquement dans l'objet où elles sont définies. Il est crucial d'ajouter un trait de soulignement (_) pour indiquer que les fonctions sont privées.

Voici un exemple :

classeVoiture{
constructeur(marque, modèle) {
ce.faire = faire;
ce.model = modèle ;
 }
 _démarrer le moteur() {
// code pour démarrer le moteur
 }
 _stopEngine() {
// code pour arrêter le moteur
 }
}

En utilisant un trait de soulignement en tête dans cet exemple, il est indiqué que les fonctions sont privées.

9. Nommer les variables globales

Les variables classées comme globales sont accessibles depuis n'importe quelle partie de la base de code. Lors de la désignation de ces variables globales, il est essentiel d'utiliser des noms clairs et descriptifs qui traduisent efficacement leur objectif.

Par exemple:

constante PRIX_MAX = 1000;
constante PRIX_MIN = 0;
fonctionVérifiez le prix(prix) {
si (prix > MAX_PRICE) {
// code pour gérer les prix élevés
 } autresi (prix < MIN_PRICE) {
// code pour gérer les prix bas
 }
}

10. Nommer les fichiers

L'organisation efficace des fichiers est un aspect crucial d'une gestion de projet JavaScript réussie. Pour garantir des conventions de dénomination rationalisées et cohérentes, il est essentiel de séparer les mots dans les noms de fichiers à l'aide de lettres minuscules et de tirets.

Les lettres minuscules sont préférées car JavaScript est un langage sensible à la casse, ce qui signifie que le langage traite différemment les lettres minuscules et majuscules. L'utilisation de lettres minuscules pour les noms de fichiers garantit la cohérence et évite toute confusion lors du référencement des fichiers dans le code.

Les tirets 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 les traits de soulignement ou 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 disposant de lecteurs d'écran ou d'autres technologies d'assistance.

mon-appli/
├── source/
 ├── composants/
 ├── bouton.js
 ├── input-field.js
├── utilitaires/
 ├── 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 suivre les conventions de nommage en JavaScript

Suivre de bonnes conventions de nommage est un aspect essentiel de l'écriture de code propre et maintenable en JavaScript. En suivant ces conventions, vous pouvez rendre votre code plus lisible et maintenable, en particulier dans certains Frameworks JavaScript où vous devez gérer du code volumineux, ce qui peut vous faire gagner du temps et des efforts dans le long terme.