J'ai reçu d'excellents commentaires des lecteurs de l'un de mes articles les plus récents, "10 concepts pour améliorer votre maîtrise de JavaScript" , concernant les conseils et astuces fournis pour parfaire leur maîtrise de JavaScript. Cette nouvelle pièce développe ces idées en approfondissant le monde de JavaScript et en examinant les fonctionnalités avancées et modernes qui peuvent vous permettre d'écrire du code efficace et propre, mais avec brièveté. Que vous soyez un développeur expérimenté ou que vous débutiez, vous serez en mesure d'écrire du code plus propre et plus facile à gérer et d'acquérir une meilleure compréhension du langage en utilisant ces fonctionnalités. Je vous invite à me suivre alors que nous les explorons ensemble afin que vous puissiez écrire un code plus efficace et expressif.

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

Introduit dans ECMAScript 2020 et noté "??", l'opérateur de coalescence nul est un opérateur logique qui accepte deux opérandes et renvoie son opérande de droite si son opérande de gauche est nul (null ou indéfini), sinon il renvoie son opérande de gauche.

L'opérateur de coalescence nulle (??) accepte deux valeurs et renvoie la seconde valeur si la première est « nulle » ou « indéfinie ».

Cet opérateur offre un moyen plus succinct et efficace de gérer les valeurs par défaut dans votre code. Avant de définir une valeur par défaut, l'opérateur de coalescence nul vous permet de déterminer si une valeur est nulle ou indéfinie. Voyons comment cela fonctionne à partir de sa syntaxe qui est énoncée comme suit :

Dans la syntaxe ci-dessus, l'opérateur renvoie le deuxième opérande ( opérande2 ) si le premier opérande ( opérande1 ) est nul ou indéfini . Techniquement, l'opérateur de coalescence nul est équivalent au bloc suivant :

Au lieu d'écrire un code qui ressemble à celui ci-dessus ou à celui-ci :

avec l'opérateur de coalescence nul, vous pouvez écrire un code concis et propre qui ressemble à ceci :

L'opérateur de coalescence nul, par exemple, peut être utilisé pour définir la valeur par défaut d'une variable comme suit :

Dans l'exemple ci-dessus, si userAge n'est pas nul ou indéfini, la valeur de user.age lui est affectée. Sinon, userAge sera défini sur 25.

L'utilisation d'un opérateur de coalescence nulle dans une fonction est une autre situation où cela serait utile :

Il est crucial de garder à l'esprit que l'opérateur de coalescence nulle diffère de l'opérateur logique OU (||), qui donne la première valeur de vérité des opérandes. Même si le premier opérande est 0 ou une chaîne vide, l'opérateur logique OR renvoie toujours la valeur si elle est véridique. L'opérateur de coalescence nul ne renvoie que la valeur du deuxième opérande, si le premier opérande est nul.

2. Opérateur d'affectation de coalescence nulle

L'opérateur de coalescence nul, comme mentionné précédemment, fournit une forme abrégée d'une expression JavaScript spécifique. Cependant, une fonctionnalité merveilleuse de JavaScript est que cette nouvelle expression, lorsqu'elle est utilisée pour attribuer une valeur, peut être encore améliorée pour produire une version plus courte en utilisant un opérateur connu sous le nom d'opérateur d'affectation coalescent nul ou d'opérateur d'affectation logique nul (??=) .

L'opérateur d'affectation coalescent nul (??=) est une version abrégée de l'opérateur coalescent nul (??) qui vous permet de vérifier si une variable est nulle avant de lui affecter une valeur.

Avant de donner une valeur à une variable, vous pouvez l'utiliser pour voir si elle est nulle ou indéfinie. La variable sera affectée si elle est nulle ou indéfinie ; sinon, sa valeur actuelle sera conservée.

Voici à quoi ressemble sa syntaxe :

Où variable indique la variable que vous souhaitez vérifier et valeur indique la valeur que vous souhaitez attribuer. Comme indiqué précédemment, cet opérateur est une forme abrégée d'opérateur de coalescence nulle. Ainsi, sa forme complète ressemblera à ceci :

Définir une valeur par défaut pour une variable comme celle ci-dessous est un moyen efficace d'utiliser cet opérateur :

Dans l'exemple ci-dessus, userAge nous a donné 25 car sa valeur initiale était indéfinie. Néanmoins, le nom d'utilisateur a renvoyé une valeur de chaîne ("sodiq") car sa valeur initiale n'était ni nulle ni indéfinie.

L'opérateur d'affectation coalescent nul est l'un des trois opérateurs d'affectation logiques qui ont été introduits dans ECMAScript 2021. Cela nous amène donc aux deux autres qui sont l'opérateur d'affectation logique OU et l'opérateur d'affectation logique ET.

3. Opérateur d'affectation OU logique

L'opérateur d'affectation OU logique est un opérateur logique qui accepte deux opérandes et n'affecte l'opérande droit à l'opérande gauche que si l'opérande gauche est faux, sinon il conserve la valeur de l'opérande gauche.

Voyons sa syntaxe :

Dans la syntaxe (x ||= y), l'opérateur d'affectation logique OR n'affecte y à x que si x est faux.

Si vous ne savez pas ce qu'est une valeur fausse, ce n'est rien d'autre qu'une valeur considérée comme fausse lorsqu'elle est rencontrée dans un contexte booléen. Un faux (également écrit faux) peut être l'un des éléments suivants :

• false (le mot-clé booléen false)
• 0 (le Nombre positif zéro)
• -0 (le Nombre négatif zéro)
• 0n (le zéro BigInt, également 0x0n)
• "", '', `` (une valeur de chaîne vide)
• null (un type de données - l'absence de toute valeur)
• indéfini (un type de données)
• NaN (pas un nombre)
• document.all

Cela étant dit, regardons un exemple pratique de la façon dont « ||= » peut être utilisé :

La sortie de l'exemple ci-dessus à la ligne 3 a renvoyé " sans titre " car la variable de titre était undefined , une valeur fausse. D'autre part, la variable title2 avait la chaîne " I love JavaScript " comme valeur initiale, donc " ||= " ne lui a pas donné la chaîne " sans titre ", mais a plutôt conservé sa valeur initiale.

L'opérateur d'affectation logique OR :

est un raccourci pour l'expression suivante utilisant l'opérateur OR :

Dans le même ordre d'idées, il sert également de raccourci pour l'instruction conditionnelle suivante :

Considérez les exemples ci-dessus, vous observerez que l'opérateur d'affectation logique OU garantit un code plus concis et efficace. Cet opérateur est pratique lorsque vous souhaitez affecter une valeur par défaut à une variable uniquement si elle est fausse et conserver la valeur d'origine si elle est véridique.

Il est crucial de toujours garder à l'esprit que, contrairement à l'opérateur de coalescence nulle (??) et à l'opérateur d'affectation de coalescence nulle (??=), cet opérateur n'attribue une valeur que si la valeur actuelle de la variable est fausse. Il ne vérifie pas les valeurs nulles ou indéfinies.

Plus encore, comme l'opérateur logique OU, l'affectation logique OU court-circuite également. Cela signifie qu'il n'effectue une affectation que lorsque son premier opérande est faux.

4. Opérateur d'affectation ET logique

Un opérateur qui accepte deux opérandes et n'affecte l'opérande droit à l'opérande gauche que si l'opérande gauche est véridique, sinon il conserve la valeur de l'opérande gauche.

Considérez le code suivant :

Avec l'utilisation de l'opérateur logique ET, nous pouvons appliquer des courts-circuits et avoir ceci :

Fait intéressant, l'opérateur d'affectation logique ET fournit une forme abrégée de ce qui précède de manière concise tout en atteignant le même objectif. Voici la syntaxe :

Comme l'opérateur logique ET, l'opérateur d'affectation logique ET court-circuite également et n'affecte l'opérande de droite à l'opérande de gauche que si l'opérande de gauche est véridique. Il ne vérifie pas les valeurs nulles ou indéfinies. Si vous devez rechercher des valeurs nulles ou indéfinies, vous devez utiliser l'opérateur de coalescence nul (??) ou l'opérateur d'affectation de coalescence nul (??=).

5. Noms de propriété abrégés

Les noms de propriété abrégés sont un moyen de définir les propriétés d'un objet en JavaScript où le nom de la propriété est le même que le nom de la variable que vous lui attribuez. Vous pouvez utiliser une notation abrégée plutôt que d'avoir à écrire le nom de la propriété et le nom de la variable individuellement.

Prenons par exemple, considérons le code suivant où l'intention de créer un objet avec deux propriétés " x " et " y " :

Vous pouvez exprimer la même chose en utilisant les noms de propriété abrégés comme suit :

Le deuxième exemple affecte la valeur de la variable y à la propriété y et la valeur de la variable x à la propriété x. Cette version du code est plus courte et plus facile à lire.

Cette notation abrégée devient utile pour les propriétés d'objet lorsque la variable et les noms de propriétés sont identiques. Il fournit une manière succincte et plus lisible d'écrire une expression JavaScript.

6. Noms abrégés des méthodes

JavaScript vous permet de définir des méthodes d'objet à l'aide de noms de méthode abrégés, où le nom de la méthode est le même que le nom de la fonction. Vous pouvez utiliser une notation abrégée plutôt que d'avoir à écrire le nom de la méthode et le nom de la fonction individuellement.

Jetons un coup d'œil au code suivant, à titre d'exemple, où nous voulons créer un objet avec une méthode « sayName » :

Cela peut être écrit en utilisant des noms de méthode abrégés comme ceci :

Le deuxième exemple ci-dessus affecte la fonction à la méthode sayName , et le nom de la méthode est le même que le nom de la fonction. Cette notation abrégée peut aider à rendre votre code plus lisible et concis en vous permettant de construire un objet avec des méthodes qui partagent le même nom que la fonction que vous lui affectez.

Le fait que les noms abrégés des méthodes soient liés à l'objet sur lequel ils sont définis implique que le mot-clé « this » à l'intérieur d'une méthode fait toujours référence à l'objet sur lequel la méthode est définie. C'est un autre avantage de l'utilisation de noms de méthode abrégés. Cette technique est connue sous le nom de « liaison lexicale ». Il permet un accès direct à des attributs et méthodes supplémentaires sur le même objet à partir de la méthode.

7. Mission de déstructuration

L'affectation de déstructuration est une fonctionnalité classique d'ES6 que vous pouvez utiliser pour extraire des données d'un tableau ou d'un objet et les affecter à des variables distinctes.

Une déstructuration de tableau, où les valeurs sont extraites d'un tableau et affectées à des variables séparées ressemble à ceci :

De même, la déstructuration peut être utilisée pour extraire des valeurs d'un objet et les affecter à des variables séparées comme ceci :

Lors de la déstructuration, vous pouvez également attribuer différents noms de variables. Un exemple est illustré ci-dessous :

Les objets imbriqués et les tableaux peuvent également être déstructurés :

De plus, la déstructuration peut être utilisée dans les arguments de fonction :

De plus, lors de la déstructuration, des valeurs par défaut peuvent être définies :

Dans l'ensemble, la déstructuration est une fonctionnalité JavaScript puissante qui simplifie l'extraction de données à partir de tableaux et d'objets et l'assigne à des variables. Cela pourrait améliorer la lisibilité, la clarté et la maintenabilité de votre code.

8. Modèles littéraux

Une autre fonctionnalité puissante introduite dans ECMAScript 2015 est les littéraux de modèle. Également appelés chaînes de modèle et désignés par des backticks (``), les littéraux de modèle vous permettent de générer des chaînes contenant des expressions.

Le fait que les littéraux de modèle facilitent et clarifient l'insertion d'expressions dans des chaînes est l'un de ses principaux avantages. Pour ajouter une variable à une chaîne, par exemple, utilisez des littéraux de modèle :

Un autre cas d'utilisation des littéraux de modèle consiste à insérer le résultat d'une expression dans une chaîne :

Cela élimine le besoin de concaténation et simplifie l'inclusion du résultat d'une expression dans une chaîne.

La simplicité avec laquelle des chaînes multilignes peuvent être créées à l'aide de modèles littéraux est un avantage supplémentaire. Sans littéraux de modèle, la concaténation de plusieurs chaînes est nécessaire pour créer des chaînes multilignes. Coniser ce qui suit :

Les littéraux de modèle permettent de générer des chaînes multilignes de manière simple et plus lisible :

Vous pouvez générer des chaînes plus complexes et dynamiques en utilisant les littéraux de modèle balisés, qui sont rendus possibles par les littéraux de modèle. Une fonction qui reçoit le modèle littéral et toutes les expressions associées en tant qu'arguments est appelée fonction de balise. Prenez par exemple :

9. Opérateur de propagation

En JavaScript, un itérable (tel qu'un tableau ou une chaîne) peut être développé en une liste d'éléments distincts à l'aide de l'opérateur de propagation. Désigné par trois points (…), l'opérateur de propagation peut être utile dans un certain nombre de circonstances, y compris lorsque vous travaillez avec des objets et des tableaux.

Prenons par exemple, l'opérateur spread nous aide à concaténer facilement deux tableaux, comme celui ci-dessous :

Il peut également être utilisé pour prendre une copie superficielle d'un tableau ou d'un objet :

De plus, l'opérateur de propagation peut être utilisé pour passer des éléments de tableau en tant qu'arguments individuels aux fonctions :

En éliminant le besoin de boucles explicites et d'autres opérations détaillées lors de l'utilisation de tableaux et d'objets, l'utilisation de l'opérateur de propagation peut aider le code JavaScript à devenir plus concis. De plus, cela permet une programmation plus fonctionnelle, dans laquelle des fonctions peuvent être créées pour travailler sur des pièces spécifiques plutôt que sur des collections entières.

10. Paramètre de repos

Une fonction en JavaScript peut accepter n'importe quel nombre de paramètres grâce au paramètre rest, qui est noté par trois points (…). Il crée un tableau contenant tous les arguments fournis à la fonction. Lorsque vous passez un nombre arbitraire d'arguments à une fonction ou lorsque vous ne savez pas combien d'arguments seront fournis à une fonction, cela peut être utile.

Par exemple, vous pouvez écrire une fonction qui calcule la somme de n'importe quelle quantité de nombres en utilisant le paramètre rest :

Le paramètre rest avec la déstructuration peut être utilisé pour affecter les premiers arguments aux variables et les arguments restants à un tableau. Par exemple:

Semblable à l'opérateur de propagation, le paramètre rest permet un paradigme de programmation de style plus fonctionnel et peut aider à atteindre la brièveté du code JavaScript en réduisant le besoin de boucles explicites et d'autres opérations détaillées lorsque vous travaillez avec un nombre variable d'arguments.

Il est essentiel de noter que le paramètre rest doit être le dernier paramètre de la fonction afin d'éviter une erreur de syntaxe.

Enfin, vous pouvez écrire du code plus lisible, maintenable et efficace en maîtrisant l'art de la brièveté en JavaScript. La syntaxe avancée abordée dans cet article, comme les opérateurs d'affectation logique, la déstructuration, les littéraux de modèle, les opérateurs de propagation et de repos, sont des outils efficaces qui peuvent vous permettre d'écrire plus facilement du code propre et concis avec moins d'effort. Vous pouvez faire progresser vos connaissances sur JavaScript et devenir un développeur plus efficace et productif en adoptant ces stratégies dans votre workflow de développement. N'oubliez pas que la simplicité est toujours la meilleure solution lors du développement de code, car elle vous évite de vous enliser dans un code verbeux ou complexe et vous permet de vous concentrer sur le problème à résoudre. Alors allez-y, examinez ces techniques de plus près et intégrez-les dans votre ensemble d'outils de développement.