Meilleures pratiques en JavaScript moderne - Partie 1

JavaScript est, sans aucun doute, le langage de programmation le plus utilisé au monde et a une énorme influence sur l'une des technologies les plus importantes de notre vie quotidienne : Internet. Ce pouvoir s'accompagne de grandes responsabilités, et l'écosystème JavaScript a évolué rapidement, ce qui rend difficile le suivi des meilleures pratiques.

Dans cet article, nous explorerons certaines des meilleures pratiques du JavaScript moderne pour écrire du code plus propre, maintenable et efficace.

1. Les règles du projet sont la chose la plus importante

Chaque projet peut avoir des règles spécifiques pour maintenir la cohérence du code. Ces règles prévaudront toujours sur toutes recommandations externes, y compris celles contenues dans cet article. Avant de mettre en œuvre une pratique dans un projet, assurez-vous qu'elle est alignée sur les règles établies et que tous les membres de l'équipe sont d'accord.

2. Utilisez JavaScript mis à jour

JavaScript a énormément évolué depuis sa création en 1995. De nombreuses anciennes pratiques que vous trouvez sur Internet peuvent être dépassées. Avant de mettre en œuvre une technique, vérifiez qu'elle est compatible avec la version actuelle du langage.

3. Utilisez let et const au lieu de var

Bien que var soit toujours valide, son utilisation est considérée comme obsolète et, dans de nombreux cas, peut introduire des bugs difficiles à tracer en raison de sa portée fonctionnelle. D'un autre côté, let et const nous donnent une portée plus prévisible et sûre, étant limitée au bloc où ils sont déclarés.

Quand utiliser let et quand utiliser const ?

• Utilisez const chaque fois qu'une variable ne change pas sa référence ou sa valeur. Cela rend votre code plus facile à comprendre et réduit les erreurs en protégeant les valeurs immuables.
• Utilisez let si vous devez réaffecter la valeur de la variable à l'avenir, mais uniquement dans les cas où cela est nécessaire.

Règle d'or : Utilisez const par défaut. Si vous devez ultérieurement modifier la valeur, passez à let.

Exemples pratiques

1. const pour les valeurs constantes :

const PI = 3.14159;
console.log(PI); // 3.14159

PI = 3; // TypeError: Assignment to constant variable.

1. laisser changer les valeurs :

let count = 0;

for (let i = 1; i <= 3; i++) {
  count += i; 
}
console.log(count); // 6

1. Comparaison de portée (let vs var) :

if (true) {
  let blockScoped = "Solo dentro del bloque";
  var functionScoped = "Disponible fuera también";
}

console.log(functionScoped); // "Disponible fuera también"
console.log(blockScoped); // ReferenceError: blockScoped is not defined

1. Évitez les problèmes de boucles et de rappels :

Avec var vous pouvez avoir des comportements inattendus dans les boucles, notamment dans les fonctions asynchrones :

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100); // Imprime 3, 3, 3
}

En attendant, résolvons ceci :

const PI = 3.14159;
console.log(PI); // 3.14159

PI = 3; // TypeError: Assignment to constant variable.

Remplacer var par let et const n'est pas seulement une bonne pratique, mais cela contribue également à rendre votre code plus sûr, plus lisible et plus facile à déboguer. Faites de l'avenir vous merci.

4. Optez pour les cours : simplicité en JavaScript

L'utilisation de Function.prototype pour la programmation orientée objet en JavaScript est une approche plus ancienne et souvent sujette aux erreurs. Au contraire, les classes introduites dans ES6 proposent une syntaxe plus intuitive et plus proche des autres langages orientés objet, facilitant la lisibilité et la maintenance du code.

Exemple avec des cours (modernes et clairs) :

let count = 0;

for (let i = 1; i <= 3; i++) {
  count += i; 
}
console.log(count); // 6

Comparaison avec Function.prototype (compliqué et moins intuitif) :

if (true) {
  let blockScoped = "Solo dentro del bloque";
  var functionScoped = "Disponible fuera también";
}

console.log(functionScoped); // "Disponible fuera también"
console.log(blockScoped); // ReferenceError: blockScoped is not defined

Comme vous pouvez le constater, l'approche basée sur des prototypes nécessite plus d'étapes pour définir les méthodes et peut être plus déroutante pour les développeurs moins expérimentés. Non seulement les classes sont plus faciles à lire, mais elles favorisent également un code plus propre et plus modulaire.

Pourquoi utiliser les cours ?

• Plus lisible et moins sujet aux erreurs.
• Ils facilitent l'héritage avec des extensions et l'utilisation de super.
• Plus compatible avec les outils modernes et les normes ES6.

5. Utilisez de vrais champs privés en JavaScript

Pendant longtemps, les développeurs JavaScript utilisaient des conventions comme le trait de soulignement (_) pour simuler des champs privés dans les classes. Cependant, il ne s’agissait que d’une convention visuelle, car les propriétés restaient accessibles depuis l’extérieur de la classe. Désormais, grâce à de véritables terrains privés, nous pouvons garantir que certaines propriétés sont totalement inaccessibles de l'extérieur.

⚠️ Attention : Cette fonctionnalité peut ne pas être disponible dans la console de certains navigateurs.

Pourquoi utiliser de vrais champs privés ?

1. Encapsulation authentique : Protégez vos données et assurez-vous qu'elles ne peuvent pas être consultées ou modifiées en dehors du contexte de la classe.
2. Lisibilité : l'utilisation du préfixe # indique clairement quelles propriétés sont privées, améliorant ainsi la compréhension du code.
3. Sécurité des données : évitez les erreurs accidentelles ou l'accès involontaire aux propriétés internes.

Exemple de base :

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100); // Imprime 3, 3, 3
}

Exemple avancé : compteurs protégés

Imaginez que vous souhaitiez créer une classe qui enregistre le nombre de visites sur une page, mais que vous ne vouliez pas que quiconque puisse manipuler ce compteur directement.

const PI = 3.14159;
console.log(PI); // 3.14159

PI = 3; // TypeError: Assignment to constant variable.

Dans ce cas, le compteur de #visites est totalement protégé des accès extérieurs, ce qui garantit que sa valeur n'est pas mal manipulée.

Considérations

• Les champs privés ne sont pas accessibles même par les sous-classes.
• Si vous devez interagir avec des données privées dans les héritages, envisagez d'utiliser des méthodes protégées au lieu de champs privés.

6. Utilisez les fonctions fléchées

Les

fonctions fléchées sont une manière moderne et élégante d'écrire des fonctions en JavaScript. Elles offrent une syntaxe plus courte et, contrairement aux fonctions traditionnelles, héritent automatiquement du contexte de this, ce qui évite les problèmes courants en programmation orientée objet.

Ils sont particulièrement utiles dans les fonctions d'ordre supérieur telles que mapper, filtrer et réduire, où nous devons passer des fonctions comme arguments.

Pourquoi utiliser les fonctions fléchées ?

1. Syntaxe plus courte et plus propre : Idéale pour garder le code plus lisible.
2. Contexte de cet automatique : Parfait pour éviter les erreurs dans les rappels ou les méthodes.
3. Utilisation idéale dans les fonctions en ligne : Comme celles que nous utilisons dans la carte, le filtre ou les événements.

Exemples pratiques

1. Avec map pour transformer les tableaux

let count = 0;

for (let i = 1; i <= 3; i++) {
  count += i; 
}
console.log(count); // 6

2. Avec filtre pour filtrer les éléments

if (true) {
  let blockScoped = "Solo dentro del bloque";
  var functionScoped = "Disponible fuera también";
}

console.log(functionScoped); // "Disponible fuera también"
console.log(blockScoped); // ReferenceError: blockScoped is not defined

3. Avec réduire pour ajouter des valeurs

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100); // Imprime 3, 3, 3
}

4. Dans les événements DOM (attention au contexte !)

Lorsque nous utilisons des fonctions fléchées dans des événements, ce contexte ne changera pas, ce qui peut être utile :

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100); // Imprime 0, 1, 2
}

Astuce : quand ne pas les utiliser

Bien que les fonctions fléchées soient excellentes, elles ne sont pas idéales pour tout. Évitez-les dans les cas où vous devez accéder au contexte de la fonction lui-même, comme dans les fonctions qui utilisent this dynamique ou si vous devez écrire des méthodes dans des prototypes.

Exemple où une fonction normale est meilleure :

class Persona {
  constructor(nombre) {
    this.nombre = nombre;
  }

  obtenerNombre() {
    return this.nombre;
  }
}

const persona = new Persona('Juan');
console.log(persona.obtenerNombre()); // 'Juan'

Si vous changiez l'impression en fonction de flèche, vous perdriez le contexte de ceci.

Améliorons cette section ! J'ai ajouté du contexte, une explication plus claire et quelques exemples supplémentaires pour le rendre plus complet et utile.

7. Opérateur de coalescence nulle (??)

L'opérateur de coalescence nul (??) est une alternative plus précise à l'opérateur logique || pour attribuer des valeurs par défaut. Tandis que || considère "falsy" des valeurs telles que 0, false ou "", l'opérateur ?? n'évalue que les valeurs nulles ou indéfinies comme valeurs "manquantes". Cela en fait une option plus sûre et plus spécifique dans de nombreux cas.

Quelle est la principale différence ?

Avec ||, toute valeur "fausse" sera remplacée par la valeur par défaut.

Avec ??, seulement remplace les valeurs nulles ou indéfinies. Cela vous permet de conserver des valeurs "fausses" comme 0 ou "" si elles sont valides dans votre contexte.

Exemple de base :

const PI = 3.14159;
console.log(PI); // 3.14159

PI = 3; // TypeError: Assignment to constant variable.

Par contre, avec ||:

let count = 0;

for (let i = 1; i <= 3; i++) {
  count += i; 
}
console.log(count); // 6

Cas pratiques avec ??

• Définissez les valeurs par défaut sans écraser les valeurs valides :

if (true) {
  let blockScoped = "Solo dentro del bloque";
  var functionScoped = "Disponible fuera también";
}

console.log(functionScoped); // "Disponible fuera también"
console.log(blockScoped); // ReferenceError: blockScoped is not defined

• Valider la configuration optionnelle :

Supposons que vous disposiez d'un système qui vous permet de personnaliser les options :

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100); // Imprime 3, 3, 3
}

• Évitez les erreurs lorsque vous travaillez avec des propriétés facultatives :

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100); // Imprime 0, 1, 2
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!