Meilleures pratiques JavaScript

Dans cet article, je vais vous présenter « Les bonnes habitudes » lors du codage JavaScript.

1 — Évitez d'utiliser new Object()
En JavaScript, utiliser new Object est un peu risqué, alors qu'il est toujours préférable d'utiliser des primitives pour plusieurs raisons. Approfondissons cela.

Parler général
Le "" par exemple, crée une primitive chaîne comme nous le savons tous, par contre… new String() crée un objet chaîne. Comme ils sont plus complexes et disposent de méthodes, les objets chaîne peuvent apporter un comportement inattendu, précisément en matière de comparaisons et de coercition de type.

Simplicité
Les primitives sont plus simples à utiliser et plus directes, car leur utilisation évite une complexité inutile et le code devient facile à lire et à maintenir.

Performances
Les primitives sont plus efficaces en termes de mémoire et de performances. Alors que la création d'un objet implique une surcharge supplémentaire.

Confusion possible
Étant donné que JavaScript traite les objets et les primitives différemment, l'utilisation de new Object() peut conduire à des situations confuses dans lesquelles vous traitez involontairement un objet au lieu d'une primitive, ce qui pourrait vous conduire à un nid de bugs.

Dans la plupart des cas, il est préférable d'utiliser des primitives à la place.

// ❌ Avoid
const str = new String();
const num = new Number();
const bool = new Boolean();
const obj = new Object();
const arr = new Array();
const regEx = new RegExp();
const func = new Function();

// ✅ Use
const str = "JavaScript";
const num = 10;
const bool = true;
const obj = {};
const arr = [];
const regEx = /()/;
const func = function() {};

2 — Évitez d'utiliser let avec des tableaux et des objets
Tout d’abord, soyons clairs… Utiliser let avec des tableaux et des objets n’est pas du tout problématique en soi. Mais il y a quelques considérations particulières qui pourraient vous amener à l'éviter dans certains cas :

Réaffectation vs. Mutation
Comme nous le savons tous, let nous permet de réaffecter la variable elle-même, ce qui peut entraîner une confusion ou une perte de données. Un objet/tableau peut être réaffecté par accident avec un tout nouvel ensemble de données (nouvel objet/nouveau tableau).

L'utilisation de const à la place rend plus sûr et plus clair que la référence à l'objet/au tableau ne changera pas, mais vous pouvez toujours modifier son contenu.

Intention d'immuabilité
En utilisant const, vous signalez aux autres développeurs avec lesquels vous travaillez que la variable ne doit pas être réaffectée, améliorant ainsi la lisibilité et la maintenabilité du code.

Portée
Bien que let ait une portée de bloc, cela peut conduire à un comportement inattendu dans les boucles ou les instructions conditionnelles. En utilisant const, la variable reste dans la portée sans risque de réaffectation involontaire.

Bonne pratique
De nombreuses normes de codage et bonnes pratiques encouragent l'utilisation de const pour les variables qui ne nécessitent pas de réaffectation, favorisant ainsi un code plus propre et plus prévisible.

// ❌ Avoid
let book = { title: "Inferno", author: "Dan Brown" };

// The book object will be overrode with string
book = "Hello world";
// ✅ Use
const book = { title: "Inferno", author: "Dan Brown" };

// The book object cannot be overrode
book = "Hello world";

3 — Soyez prudent avec la conversion automatique de type
Également connue sous le nom de coercition de type, en JavaScript, cela se produit lorsque le langage convertit automatiquement une valeur d'un type en un autre. Cela peut arriver dans diverses situations, notamment lors d'opérations impliquant différents types de données :

// ❌ Avoid
const str = new String();
const num = new Number();
const bool = new Boolean();
const obj = new Object();
const arr = new Array();
const regEx = new RegExp();
const func = new Function();

// ✅ Use
const str = "JavaScript";
const num = 10;
const bool = true;
const obj = {};
const arr = [];
const regEx = /()/;
const func = function() {};

Méfiez-vous des nombres, ils peuvent être convertis en chaîne ou en NaN par accident. Par conséquent, envisagez de mettre en œuvre des tests de type avant les opérations sensibles ou envisagez d'utiliser TypeScript pour une saisie sécurisée.

4 — Évitez d'utiliser une comparaison double égale
== et === sont des opérateurs de comparaison utilisés pour comparer des valeurs, mais ils se comportent différemment.

Égalité abstraite
Lors de l'utilisation de ==, JavaScript convertit les valeurs en un type commun avant de faire la comparaison

// ❌ Avoid
let book = { title: "Inferno", author: "Dan Brown" };

// The book object will be overrode with string
book = "Hello world";
// ✅ Use
const book = { title: "Inferno", author: "Dan Brown" };

// The book object cannot be overrode
book = "Hello world";

Quand utiliser ?
Utilisez === lorsque vous souhaitez vous assurer que la valeur et le type sont identiques, ce qui est généralement une bonne pratique pour éviter des résultats inattendus.

Utilisez == si vous avez spécifiquement besoin de comparer des valeurs sans tenir compte de leurs types, mais cela peut entraîner des bugs et est généralement déconseillé.

En général, envisagez d'utiliser === pour des comparaisons plus prévisibles et plus claires.

Remarque : la même chose vaut avec !== et !=

5 — Utiliser la déstructuration d'objets/tableaux
En JavaScript, l'utilisation de la technique de déstructuration avec les objets et les tableaux vous offre plusieurs avantages.

La syntaxe d'affectation de déstructuration est une expression JavaScript qui permet de décompresser les valeurs de tableaux, ou les propriétés d'objets, en variables distinctes. Comme le dit la documentation Web MDN.

Concision
Il vous permet d'extraire plusieurs propriétés d'un objet ou d'éléments d'un tableau en une seule instruction, réduisant ainsi la quantité de code que vous devez écrire.

let sum = "5" + 1; // "51" (string concatenation)
// In the code above, typeof sum is a string

let sub = "5" - 1; // 4 (string converted to number)
// In the code obove, typeof sub in a number
Another example can be helpful:

let lang = "JavaScript"; // typeof name is string
lang = 15; // changes typeof x to a number

Clarté
La déstructuration peut rendre votre code plus lisible en affichant clairement les propriétés ou les éléments avec lesquels vous travaillez.

console.log(5 == '5'); // true (number is converted to string)
console.log(null == undefined); // true (considered equal)
console.log(0 == false); // true (0 is converted to boolean as it's falsy value)
Strict Equality
With ===, the comparison checks both the value and the type. If types are different, it returns false

console.log(5 === '5'); // false (different types)
console.log(null === undefined); // false (different types)
console.log(0 === false); // false (different types)

Valeurs par défaut
Vous pouvez facilement attribuer des valeurs par défaut si la propriété ou l'élément n'existe pas.

const book = { name: 'The Lost Symbol', author: 'Dan Brown' };
const { name, price } = book; // concise extraction

Déstructuration Nestée
Vous pouvez déstructurer des objets ou des tableaux imbriqués, ce qui peut simplifier l'accès aux données profondément imbriquées.

const colors = ['red', 'green', 'blue'];
const [firstColor, secondColor] = colors; // clear intention

Paramètres de fonction
Cela peut être utile pour les paramètres de fonction, vous permettant de décompresser directement les valeurs.

const { height = 180 } = person; // uses default value if height is undefined

La déstructuration permet de rationaliser votre code, le rendant plus propre et plus facile à maintenir.

6 — Paramètres par défaut
Les paramètres par défaut sont une bonne technique à adopter pour garder votre code plus clair et facile à lire.

Les paramètres de fonction par défaut permettent aux paramètres nommés d'être initialisés avec des valeurs par défaut si aucune valeur ou non définie n'est transmise. Comme le dit la documentation Web MDN.

Paramètre unique

const user = { profile: { name: 'Eren Yeager', age: 20 } };
const { profile: { name } } = user; // easy access to nested properties

Paramètres multiples
Vous pouvez définir des valeurs par défaut pour plusieurs paramètres.

function display({ name, age }) {
    console.log(`${name} is ${age} years old.`);
}

Attention aux paramètres non donnés lors du passage de multiples. Évitez de transmettre le paramètre éventuellement non défini ou éventuellement non transmis en premier, ou avant tout autre paramètre transmis.

Si vous pensez qu'une valeur de paramètre pourrait ne pas être donnée ou pourrait être transmise comme indéfinie, assurez-vous de la transmettre comme la dernière, ainsi que pour plusieurs paramètres non donnés.

Utiliser des expressions par défaut
Vous pouvez utiliser des expressions pour calculer les valeurs par défaut.

// ❌ Avoid
const str = new String();
const num = new Number();
const bool = new Boolean();
const obj = new Object();
const arr = new Array();
const regEx = new RegExp();
const func = new Function();

// ✅ Use
const str = "JavaScript";
const num = 10;
const bool = true;
const obj = {};
const arr = [];
const regEx = /()/;
const func = function() {};

Paramètres de repos avec valeurs par défaut
Vous pouvez combiner les paramètres par défaut avec les paramètres de repos.

// ❌ Avoid
let book = { title: "Inferno", author: "Dan Brown" };

// The book object will be overrode with string
book = "Hello world";
// ✅ Use
const book = { title: "Inferno", author: "Dan Brown" };

// The book object cannot be overrode
book = "Hello world";

Avantages
Lisibilité améliorée : les valeurs par défaut utilisées sont claires si les arguments sont omis.
Moins de passe-partout : réduit le besoin de vérifier et d'attribuer des valeurs par défaut à l'intérieur du corps de la fonction.
Flexibilité améliorée : les fonctions peuvent gérer un plus large éventail d'entrées avec plus de grâce.
Les paramètres par défaut sont une fonctionnalité puissante qui améliore la convivialité des fonctions et rend votre code plus propre !

7 —Utilisez la valeur par défaut dans vos commutateurs
Terminer vos instructions switch par un cas par défaut est une bonne pratique en JavaScript. Le cas par défaut agit comme une solution de secours lorsqu'aucun des cas spécifiés ne correspond à l'entrée :

let sum = "5" + 1; // "51" (string concatenation)
// In the code above, typeof sum is a string

let sub = "5" - 1; // 4 (string converted to number)
// In the code obove, typeof sub in a number
Another example can be helpful:

let lang = "JavaScript"; // typeof name is string
lang = 15; // changes typeof x to a number

Catch-All
Il fournit un moyen de gérer les valeurs inattendues, garantissant que votre code n'échoue pas silencieusement.

console.log(5 == '5'); // true (number is converted to string)
console.log(null == undefined); // true (considered equal)
console.log(0 == false); // true (0 is converted to boolean as it's falsy value)
Strict Equality
With ===, the comparison checks both the value and the type. If types are different, it returns false

console.log(5 === '5'); // false (different types)
console.log(null === undefined); // false (different types)
console.log(0 === false); // false (different types)

Lisibilité améliorée
L'inclusion d'un cas par défaut indique clairement aux autres développeurs (ou à vous-même) que vous avez envisagé toutes les possibilités.

Gestion des erreurs
Il peut être utilisé pour enregistrer ou générer des erreurs lorsque des valeurs inattendues sont rencontrées.

const book = { name: 'The Lost Symbol', author: 'Dan Brown' };
const { name, price } = book; // concise extraction

Incluez toujours un cas par défaut s'il existe une possibilité de recevoir des informations inattendues.
Utilisez le cas par défaut pour fournir des commentaires ou une journalisation utiles, en particulier dans les scénarios de débogage.
Pensez à utiliser un cas par défaut pour définir une valeur de secours, le cas échéant.
L'ajout d'un cas par défaut à vos instructions switch améliore la robustesse et la maintenabilité du code.

8 — Évitez d'utiliser eval()
eval() est une fonction JavaScript intégrée qui prend une chaîne comme argument et l'évalue en tant que code JavaScript. Cela signifie que vous pouvez exécuter dynamiquement le code généré lors de l'exécution.

const colors = ['red', 'green', 'blue'];
const [firstColor, secondColor] = colors; // clear intention

Éviter l'utilisation de eval() en JavaScript est largement recommandé pour plusieurs raisons importantes.

Risques de sécurité
Injection de code : eval() peut exécuter du code arbitraire, rendant votre application vulnérable aux attaques par injection de code. Si l'entrée de l'utilisateur est évaluée, un attaquant pourrait injecter du code malveillant.

const { height = 180 } = person; // uses default value if height is undefined

Problèmes de performances
Exécution lente : le code exécuté avec eval() s'exécute plus lentement que le code normal car il doit être interprété au moment de l'exécution, contournant certaines optimisations effectuées par les moteurs JavaScript.
Défis de débogage
Plus difficile à déboguer : l'utilisation de eval() rend le débogage difficile. Les erreurs générées dans eval() peuvent être difficiles à retracer jusqu'à la source d'origine.
Alternatives
Au lieu de eval(), envisagez ces alternatives plus sûres :

Analyse JSON : si vous traitez des données JSON, utilisez JSON.parse() au lieu de eval().
const jsonString = '{"name": "Alice"}';
const obj = JSON.parse(jsonString); // Un moyen sûr de convertir une chaîne JSON en objet
Constructeurs de fonctions : si vous devez créer dynamiquement des fonctions, envisagez plutôt d'utiliser le constructeur de fonctions.

// ❌ Avoid
const str = new String();
const num = new Number();
const bool = new Boolean();
const obj = new Object();
const arr = new Array();
const regEx = new RegExp();
const func = new Function();

// ✅ Use
const str = "JavaScript";
const num = 10;
const bool = true;
const obj = {};
const arr = [];
const regEx = /()/;
const func = function() {};

En résumé, évitez d'utiliser eval() en raison des risques de sécurité, des problèmes de performances et des difficultés de débogage. Optez pour des alternatives plus sûres pour atteindre vos objectifs sans compromettre l'intégrité et les performances de votre code.

9 — Utiliser le mode strict
En JavaScript, le « mode strict » est un moyen d'opter pour une variante restreinte du langage, ce qui permet de détecter les erreurs de codage courantes et les actions « dangereuses ». Cela peut rendre votre code plus prévisible et plus facile à déboguer.

Activer le mode strict
Globalement : En plaçant « use strict » ; en haut d'un fichier de script.

// ❌ Avoid
let book = { title: "Inferno", author: "Dan Brown" };

// The book object will be overrode with string
book = "Hello world";
// ✅ Use
const book = { title: "Inferno", author: "Dan Brown" };

// The book object cannot be overrode
book = "Hello world";

Avantages de l'utilisation du mode strict
Empêche l'utilisation de variables non déclarées : l'attribution d'une valeur à une variable non déclarée génère une erreur.

let sum = "5" + 1; // "51" (string concatenation)
// In the code above, typeof sum is a string

let sub = "5" - 1; // 4 (string converted to number)
// In the code obove, typeof sub in a number
Another example can be helpful:

let lang = "JavaScript"; // typeof name is string
lang = 15; // changes typeof x to a number

Élimine cette coercition : en mode strict, ceci n'est pas défini dans les fonctions appelées sans contexte explicite.

console.log(5 == '5'); // true (number is converted to string)
console.log(null == undefined); // true (considered equal)
console.log(0 == false); // true (0 is converted to boolean as it's falsy value)
Strict Equality
With ===, the comparison checks both the value and the type. If types are different, it returns false

console.log(5 === '5'); // false (different types)
console.log(null === undefined); // false (different types)
console.log(0 === false); // false (different types)

Interdit certaines syntaxes : certaines syntaxes considérées comme problématiques ou prêtant à confusion ne sont pas autorisées.
Pièges courants
Fonctions fléchées : Notez que les fonctions fléchées n'ont pas leur propre ceci, le mode strict ne s'applique donc pas de la même manière.
eval : le code exécuté dans une instruction eval s'exécute dans la portée locale plutôt que dans la portée globale.
L'utilisation du mode strict est généralement considérée comme une bonne pratique, en particulier pour les applications plus volumineuses, car elle vous aide à écrire un code plus propre et plus sûr.

10 — Gardez le code SEC (ne vous répétez pas)
Le principe DRY (Don’t Repeat Yourself) est un concept clé du développement logiciel visant à réduire les répétitions dans le code. En garantissant que chaque élément de connaissance ou de logique est représenté en un seul endroit, vous facilitez la maintenance, la compréhension et la refactorisation de votre code.

Fonctions
Encapsulez la logique répétitive dans des fonctions. De cette façon, vous pouvez réutiliser le même code sans duplication.

const book = { name: 'The Lost Symbol', author: 'Dan Brown' };
const { name, price } = book; // concise extraction

Modules
Utilisez des modules pour organiser votre code. Cela permet de conserver les fonctions et variables associées ensemble, les rendant réutilisables dans différentes parties de votre application.

const colors = ['red', 'green', 'blue'];
const [firstColor, secondColor] = colors; // clear intention

Classes et objets
Utilisez des classes ou des objets pour regrouper les données et les comportements associés. Cette encapsulation permet d'éviter les répétitions lorsque l'on travaille avec des structures de données similaires.

const { height = 180 } = person; // uses default value if height is undefined

Remarque : si vous adoptez le paradigme de « Programmation fonctionnelle » dans votre codage quotidien, envisagez d'utiliser n'importe quelle autre astuce que celle-ci « Classes et objets ».

Modèles et composants
Dans le développement Web, utilisez des modèles ou des composants (dans des frameworks comme React, Vue, etc.) pour encapsuler la logique et les styles de l'interface utilisateur qui sont réutilisés.

// ❌ Avoid
const str = new String();
const num = new Number();
const bool = new Boolean();
const obj = new Object();
const arr = new Array();
const regEx = new RegExp();
const func = new Function();

// ✅ Use
const str = "JavaScript";
const num = 10;
const bool = true;
const obj = {};
const arr = [];
const regEx = /()/;
const func = function() {};

Structures de données
Utilisez des tableaux ou des objets pour stocker les données associées plutôt que de créer des variables distinctes pour chaque élément de données.

// ❌ Avoid
let book = { title: "Inferno", author: "Dan Brown" };

// The book object will be overrode with string
book = "Hello world";
// ✅ Use
const book = { title: "Inferno", author: "Dan Brown" };

// The book object cannot be overrode
book = "Hello world";

L'application du principe DRY conduit à un code plus propre et plus maintenable. Cela permet de minimiser le risque de bogues puisque les modifications doivent être apportées à un seul endroit, et améliore la lisibilité en réduisant l'encombrement. N’oubliez pas que même s’il est important d’éviter les répétitions, il y a un équilibre à trouver ; une abstraction excessive peut conduire à de la complexité, alors faites preuve de jugement lorsque vous appliquez ces principes.

11 — Utilisez des noms de variables et de fonctions significatifs
L'utilisation de noms de variables et de fonctions significatifs est cruciale pour écrire un code clair, maintenable et compréhensible.

Soyez descriptif
Choisissez des noms qui décrivent clairement le but ou la valeur de la variable ou de la fonction.

let sum = "5" + 1; // "51" (string concatenation)
// In the code above, typeof sum is a string

let sub = "5" - 1; // 4 (string converted to number)
// In the code obove, typeof sub in a number
Another example can be helpful:

let lang = "JavaScript"; // typeof name is string
lang = 15; // changes typeof x to a number

Utiliser des mots d'action pour les fonctions
Démarrez les fonctions avec un verbe qui décrit l'action en cours.

console.log(5 == '5'); // true (number is converted to string)
console.log(null == undefined); // true (considered equal)
console.log(0 == false); // true (0 is converted to boolean as it's falsy value)
Strict Equality
With ===, the comparison checks both the value and the type. If types are different, it returns false

console.log(5 === '5'); // false (different types)
console.log(null === undefined); // false (different types)
console.log(0 === false); // false (different types)

Évitez les abréviations
Même si les noms courts peuvent sembler pratiques, ils peuvent prêter à confusion. Évitez les abréviations à moins qu'elles ne soient largement comprises.

const book = { name: 'The Lost Symbol', author: 'Dan Brown' };
const { name, price } = book; // concise extraction

Utilisez des conventions de dénomination cohérentes
Respectez une convention de dénomination cohérente dans toute votre base de code, telle que camelCase pour les variables et les fonctions, et PascalCase pour les classes.

const colors = ['red', 'green', 'blue'];
const [firstColor, secondColor] = colors; // clear intention

Indiquez le type de données ou le but dans les noms
Si une variable contient un type spécifique de données ou répond à un objectif particulier, incluez-le dans le nom.

const { height = 180 } = person; // uses default value if height is undefined

Utiliser les informations contextuelles
Considérez le contexte dans lequel la variable ou la fonction sera utilisée pour rendre les noms plus significatifs.

const user = { profile: { name: 'Eren Yeager', age: 20 } };
const { profile: { name } } = user; // easy access to nested properties

Gardez-le concis mais clair
Même si les noms doivent être descriptifs, ils ne doivent pas être excessivement longs. Visez un équilibre entre clarté et brièveté.

function display({ name, age }) {
    console.log(`${name} is ${age} years old.`);
}

Utiliser un langage spécifique au domaine
Si vous travaillez dans un domaine spécifique (comme la finance, la santé, etc.), utilisez des termes familiers à ce domaine.

soit InterestRate = 5,5 ; // Clairement dans un contexte financier.

function greet(name = 'Guest') {
    console.log(`Hello, ${name}!`);
}

greet();         // Output: Hello, Guest!
greet('Chrollo');  // Output: Hello, Chrollo!

Refactoriser si nécessaire
Si vous trouvez qu'un nom ne convient plus au fur et à mesure de l'évolution du code, n'hésitez pas à le refactoriser pour plus de clarté.

function multiply(a, b = 1) {
    return a * b;
}

multiply(5);    // Output: 5
multiply(5, 2);  // Output: 10

Les noms de variables et de fonctions significatifs améliorent considérablement la lisibilité et la maintenabilité du code. Ils aident les autres (et vous-même) à comprendre d'un seul coup d'œil l'objectif et la fonction de votre code, ce qui facilite grandement la collaboration et le débogage. Efforcez-vous toujours d'être clair dans vos conventions de dénomination.

12 — Évitez les variables globales
Éviter les variables globales est une pratique clé en JavaScript (et en programmation en général) pour maintenir un code propre, modulaire et maintenable. Les variables globales peuvent entraîner un comportement inattendu, des conflits de noms et des difficultés de débogage.

Utiliser la portée de la fonction
Déclarez les variables dans les fonctions pour limiter leur portée et les empêcher d'être accessibles globalement.

// ❌ Avoid
const str = new String();
const num = new Number();
const bool = new Boolean();
const obj = new Object();
const arr = new Array();
const regEx = new RegExp();
const func = new Function();

// ✅ Use
const str = "JavaScript";
const num = 10;
const bool = true;
const obj = {};
const arr = [];
const regEx = /()/;
const func = function() {};

Utilisez Block Scope avec let et const
Utilisez let et const pour déclarer des variables dans des blocs (comme des boucles ou des conditions), en vous assurant qu'elles ne sont pas accessibles en dehors de ce bloc.

// ❌ Avoid
let book = { title: "Inferno", author: "Dan Brown" };

// The book object will be overrode with string
book = "Hello world";
// ✅ Use
const book = { title: "Inferno", author: "Dan Brown" };

// The book object cannot be overrode
book = "Hello world";

Modularisez votre code
Organisez votre code en modules. Utilisez les modules ES6 ou IIFE (Immediately Invoked Function Expressions) pour encapsuler les variables.

let sum = "5" + 1; // "51" (string concatenation)
// In the code above, typeof sum is a string

let sub = "5" - 1; // 4 (string converted to number)
// In the code obove, typeof sub in a number
Another example can be helpful:

let lang = "JavaScript"; // typeof name is string
lang = 15; // changes typeof x to a number

Encapsuler dans des objets :
Regroupez les variables et fonctions associées au sein d'un objet pour éviter de polluer la portée globale.

console.log(5 == '5'); // true (number is converted to string)
console.log(null == undefined); // true (considered equal)
console.log(0 == false); // true (0 is converted to boolean as it's falsy value)
Strict Equality
With ===, the comparison checks both the value and the type. If types are different, it returns false

console.log(5 === '5'); // false (different types)
console.log(null === undefined); // false (different types)
console.log(0 === false); // false (different types)

Utilisez judicieusement le stockage local
Si vous devez conserver les données, envisagez d'utiliser le stockage local, le stockage de session ou indexedDB au lieu de variables globales.

const book = { name: 'The Lost Symbol', author: 'Dan Brown' };
const { name, price } = book; // concise extraction

Limiter l'utilisation des valeurs globales
Si vous devez utiliser des variables globales, limitez leur utilisation aux constantes de configuration ou aux paramètres à l'échelle de l'application. Nommez-les clairement pour indiquer leur caractère global.

const colors = ['red', 'green', 'blue'];
const [firstColor, secondColor] = colors; // clear intention

Éviter les effets secondaires
Lors de la conception de fonctions, évitez de modifier les variables globales. Cela permet de conserver les fonctions prévisibles et plus faciles à tester.

const { height = 180 } = person; // uses default value if height is undefined

Utilisez « ceci » à bon escient
Dans la programmation orientée objet, utilisez-le pour gérer l'état au sein des instances au lieu de vous fier à des variables globales.

const user = { profile: { name: 'Eren Yeager', age: 20 } };
const { profile: { name } } = user; // easy access to nested properties

En évitant les variables globales, vous améliorez la modularité et la maintenabilité de votre code. Il permet d'éviter les conflits de noms et les effets secondaires involontaires, rendant votre code plus prévisible et plus facile à utiliser. Le respect de ces bonnes pratiques conduira à des bases de code plus propres et plus gérables.

13 — Utiliser les promesses et Async/Await pour le code asynchrone
L'utilisation de Promises et async/await en JavaScript permet de gérer les opérations asynchrones plus efficacement, rendant votre code plus propre et plus facile à lire.

Comprendre les promesses
Une promesse est un objet représentant l'achèvement (ou l'échec) éventuel d'une opération asynchrone et sa valeur résultante.

Vous pouvez créer une promesse en utilisant le constructeur Promise :

function display({ name, age }) {
    console.log(`${name} is ${age} years old.`);
}

Consommer une promesse
Vous pouvez gérer le résultat d'une promesse en utilisant .then() pour le succès et .catch() pour la gestion des erreurs.

function greet(name = 'Guest') {
    console.log(`Hello, ${name}!`);
}

greet();         // Output: Hello, Guest!
greet('Chrollo');  // Output: Hello, Chrollo!

Enchaîner les promesses
Vous pouvez enchaîner plusieurs opérations asynchrones à l'aide de Promises.

function multiply(a, b = 1) {
    return a * b;
}

multiply(5);    // Output: 5
multiply(5, 2);  // Output: 10

Utilisation d'Async/Await
async/await fournit une manière plus synchrone d'écrire du code asynchrone, ce qui le rend plus facile à lire et à maintenir.

Déclarer une fonction asynchrone :
Utilisez le mot-clé async avant une fonction pour la définir comme fonction asynchrone.

// ❌ Avoid
const str = new String();
const num = new Number();
const bool = new Boolean();
const obj = new Object();
const arr = new Array();
const regEx = new RegExp();
const func = new Function();

// ✅ Use
const str = "JavaScript";
const num = 10;
const bool = true;
const obj = {};
const arr = [];
const regEx = /()/;
const func = function() {};

Appel de fonctions asynchrones
Vous pouvez appeler une fonction asynchrone comme une fonction normale. Mais attention, il renverra toujours une promesse.

// ❌ Avoid
let book = { title: "Inferno", author: "Dan Brown" };

// The book object will be overrode with string
book = "Hello world";
// ✅ Use
const book = { title: "Inferno", author: "Dan Brown" };

// The book object cannot be overrode
book = "Hello world";

Gestion de plusieurs opérations asynchrones
Vous pouvez utiliser Promise.all pour exécuter plusieurs promesses en parallèle et attendre qu'elles soient toutes résolues.

let sum = "5" + 1; // "51" (string concatenation)
// In the code above, typeof sum is a string

let sub = "5" - 1; // 4 (string converted to number)
// In the code obove, typeof sub in a number
Another example can be helpful:

let lang = "JavaScript"; // typeof name is string
lang = 15; // changes typeof x to a number

Gestion des erreurs
Promises et async/await fournissent des moyens de gérer les erreurs avec élégance.

Utilisation de .catch() avec des promesses :

console.log(5 == '5'); // true (number is converted to string)
console.log(null == undefined); // true (considered equal)
console.log(0 == false); // true (0 is converted to boolean as it's falsy value)
Strict Equality
With ===, the comparison checks both the value and the type. If types are different, it returns false

console.log(5 === '5'); // false (different types)
console.log(null === undefined); // false (different types)
console.log(0 === false); // false (different types)

Utilisation de try/catch avec Async/Await :

const book = { name: 'The Lost Symbol', author: 'Dan Brown' };
const { name, price } = book; // concise extraction

L'utilisation de Promises et async/await rend la gestion des opérations asynchrones en JavaScript beaucoup plus gérable. Ils aident à éviter l’enfer des rappels et à améliorer la lisibilité du code. L'adoption de ces modèles conduira à un code plus propre, plus maintenable et résistant aux erreurs.

14 — Documentez votre code
Documenter votre code est essentiel pour maintenir la clarté, faciliter la collaboration et garantir la maintenabilité à long terme.

Utilisez des commentaires clairs
Expliquez « Pourquoi » et non « Quoi » : concentrez-vous sur l'explication de la raison pour laquelle vous avez fait quelque chose plutôt que sur ce que fait le code. Le code lui-même doit être suffisamment lisible pour transmettre ce qu'il fait.

const colors = ['red', 'green', 'blue'];
const [firstColor, secondColor] = colors; // clear intention

Commentez la logique complexe : pour les sections de code complexes ou non évidentes, fournissez des explications détaillées.

const { height = 180 } = person; // uses default value if height is undefined

Utiliser les commentaires de style Docstring
En JavaScript, en particulier lorsque vous utilisez JSDoc, vous pouvez documenter des fonctions, des classes et des méthodes à l'aide de commentaires structurés.

const user = { profile: { name: 'Eren Yeager', age: 20 } };
const { profile: { name } } = user; // easy access to nested properties

Gérer un fichier README
Pour les projets, conservez un fichier README.md qui fournit une présentation, des instructions d'installation, des exemples d'utilisation et des directives de contribution.

Une documentation efficace rend votre code plus compréhensible et maintenable, aidant ainsi les développeurs actuels et futurs (y compris vous-même) à travailler efficacement. En intégrant ces pratiques dans votre flux de travail de développement, vous favoriserez une meilleure collaboration et réduirez la courbe d'apprentissage de toute personne interagissant avec votre code.

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!