5 fonctionnalités JavaScript de pointe pour améliorer votre code

Les fonctionnalités JavaScript ne cessent de croître et d’en recevoir de nouvelles comme les opérateurs, les constructions de syntaxe, les expressions. Beaucoup ont été introduits ces dernières années et certains d’entre eux sont déjà une seconde nature, comme l’expression de la flèche grasse ou l’ opérateur de =>propagation d’objet ....

Les fonctionnalités JavaScript commencent en tant que propositions

Toutes ces fonctionnalités JavaScript commencent par des propositions soumises au TC 39. Le Comité Technique 39 est en charge de standardiser :

le langage de programmation à usage général, multiplateforme et indépendant du fournisseur ECMAScript (JavaScript). Cela inclut la syntaxe du langage, la sémantique, les bibliothèques et les technologies complémentaires qui prennent en charge le langage.

Il existe de nombreuses propositions JavaScript que nous pouvons commencer à ajouter à notre flux dès aujourd’hui, grâce à Babel, le compilateur JavaScript. Certains d’entre eux offrent plus de clarté, comme le séparateur numérique. D’autres, comme les doexpressions, introduisent la possibilité d’avoir des conditions complexes mélangées avec des balises React JSX.

Examinons dans cet article 5 fonctionnalités JavaScript qui sont encore au stade de la proposition mais que nous pouvons utiliser avec Babel, et qui amélioreront considérablement votre expérience de codage.

Chacun a un lien vers sa page Babel où vous pouvez voir comment configurer Babel pour l’utiliser, bien que les fonctionnalités JavaScript proposées décrites ici soient déjà incluses avec Babel 7. Chaque section a également un lien vers sa proposition dans l’ organisation Ecma TC39 sur GitHub.

Opérateur de coalescence nulle

Proposition: https://github.com/tc39/proposal-nullish-coalescing

Babel : https://babeljs.io/docs/en/next/babel-plugin-proposal-nullish-coalescing-operator.html

Cette proposition JavaScript décrit un opérateur qui permet de fournir une valeur de repli à droite de l’opérateur lorsqu’une variable ou une propriété d’objet est indéfinie. S’il n’est pas indéfini, il utilisera le côté gauche de l’opérateur :

const maybeUndef = undefined;
const val = maybeUndef ?? 2021; 

Cela revient à l’écrire sous la forme d’un opérateur ternaire :

const maybeUndef = undefined;
const val = maybeUndef? maybeUndef: 2021; 

Notez que cet opérateur ne vérifie pas que la variable n’existe pas. Cela lancera une erreur :

const val = maybeUndef ?? 2021;  

Mais attention, cet opérateur n’est pas 100% comme un opérateur ternaire qui renvoie le premier côté si la condition évaluée est vraie. Il n’évaluera pas les valeurs qui sont généralement fausses en JavaScript en false. Par exemple, une chaîne vide ne sera pas considérée false:

const someEmptyString = '';
const val = someEmptyString ?? 'fallback'; 

Contrairement à cet opérateur de coalescence nul, un opérateur ternaire aurait été lancé fallbackà la suite de cette évaluation.

Opérateur de chaînage en option

Proposition: https://github.com/tc39/proposal-optional-chaining

Babel : https://babeljs.io/docs/en/next/babel-plugin-proposal-optional-chaining.html

Cet opérateur fonctionne également sur les variables et les propriétés des objets: il vérifie si les propriétés imbriquées que nous parcourons existent ou non. Sans cet opérateur, nous devons vérifier chaque propriété imbriquée :

const val = anObj && anObj.aProp && anObj.aProp.aNestedProp

Avec le nouvel opérateur de chaînage optionnel, nous pouvons faire quelque chose comme :

const val = anObj.aProp?.aNestedProp

Cela semble beaucoup plus clair et c’est plus court à écrire. Cet opérateur fonctionne également avec des tableaux numériques, il est donc préférable de travailler avec des collections :

const val = anObj.anArray[0]?.someProp

Et nous pouvons empiler plusieurs opérateurs :

const val = anObj.anArray[0]?.someProp?.aNestedProp

Et si nous combinions cela avec le précédent, la coalescence nulle ? Nous obtenons une syntaxe qui vérifie que chaque propriété traversée existe et, si ce n’est pas le cas, fournit une valeur de secours :

const val = anObj.anArray[0]?.someProp ?? 'someDefaultValue'

Si l’une des valeurs n’existe pas, elle renverra someDefaultValue. La combinaison de ces deux opérateurs est un excellent moyen de remplacer la fonction get de lodash .

Opérateur de pipeline

Proposition: https://github.com/tc39/proposal-pipeline-operator

Babel : https://babeljs.io/docs/en/babel-plugin-proposal-pipeline-op e rator

Cet opérateur fait partie de plusieurs fonctionnalités JavaScript expérimentales, et celle-ci offre plus de lisibilité lors de l’enchaînement de plusieurs fonctions. Considérez la fonction suivante :

Si nous devons réutiliser ces transformations partielles enchaînées, nous pouvons les décomposer en différentes fonctions, puis composer le résultat en les utilisant :

Ce qui est étrange à ce sujet, c’est que nous devons commencer à lire cela du bas, la splitBySpaceligne, vers le haut, afin de comprendre les transformations appliquées à la chaîne. Cela va à l’encontre de notre flux de lecture naturel, de haut en bas. Nous nous retrouvons également avec toutes ces vilaines parenthèses pendantes. Cela pourrait être écrit en une seule ligne et ce n’est pas beaucoup plus joli:

Ici, nous devons commencer à lire de la fonction centrale vers les fonctions externes, ou de droite à gauche, ce qui est contre-intuitif pour la lecture occidentale de gauche à droite.

L’opérateur de pipeline peut rendre ces constructions beaucoup plus lisibles et similaires au chaînage que nous avions à l’origine avant de déplacer les transformations vers des fonctions distinctes :

Maintenant, les transformations appliquées sont écrites de la même manière que notre façon d’écrire, de haut en bas, elles sont plus claires à lire et nous n’avons plus de parenthèses qui traînent. Succès!

Séparateur numérique

Proposition: https://github.com/tc39/proposal-numeric-separator

Babel : https://babeljs.io/docs/en/next/babel-plugin-proposal-numeric-separator.html

Ce séparateur numérique est différent des autres fonctionnalités JavaScript puisqu’il ne s’agit pas d’un opérateur. C’est une construction syntaxique qui rend les littéraux numériques plus lisibles en créant une séparation visuelle entre les groupes de chiffres. Les grands littéraux numériques sont difficiles à analyser et à comprendre rapidement, en particulier lorsqu’un chiffre est répété plusieurs fois. Par exemple:

const longNum = 1000000000000;

C’est difficile à comprendre d’un simple coup d’œil. Ce séparateur le rend plus lisible :

const longNum = 1_000_000_000_000;

Maintenant, nous pouvons rapidement comprendre qu’il s’agit d’un billion.

Faire des expressions

Proposition: https://github.com/tc39/proposal-do-expressions

Babel: https://babeljs.io/docs/en/babel-plugin-proposal-do-expressions

La dernière des nouvelles fonctionnalités JavaScript que nous allons aborder est une expression qui peut être évaluée. Le résultat de cette expression vient après l’exécution d’un bloc qui peut contenir plusieurs instructions. Nous pouvons facilement comprendre les expressions do si nous traduisons une expression d’opérateur ternaire comme celle-ci :

const res = isCold( color )? 'light-blue': 'orange';

On écrirait l’ do{}expression équivalente comme ceci :

const res = do {
    if (isCold( color)) {
        'light-blue';
    } else {
        'orange';
    }
};

Notez que nous n’avons pas à renvoyer la valeur car il ne s’agit pas d’une fonction. Alors que dans ce cas particulier, cela peut être écrit plus succinctement en ternaire, les expressions do sont beaucoup plus puissantes, permettant plusieurs déclarations, par exemple :

const res = do {
    if (isCold( color)) {
        'light-blue';
    } else if (isHot( color)) {
        'orange';
    } else if (isRain( color)) {
        'purple';
    } else {
        'green';
    }
};

Là où cela est vraiment puissant, c’est dans JSX, où nous pouvons le mélanger avec ses balises sans avoir à calculer le résultat en externe au préalable. Par exemple, nous pourrions faire ce qui suit si nous utilisions React pour rendre ces composants :

Plus de propositions JavaScript

De plus en plus de propositions sont discutées chaque jour pour ajouter des fonctionnalités plus intéressantes au langage JavaScript. Une liste sans cesse croissante de ces fonctionnalités JavaScript proposées peut être lue sur https://github.com/tc39/proposals#ecmascript-proposals. Les propositions ici sont presque terminées et donc sur le point d’être ajoutées à la norme ECMAScript, comme expliqué dans ce tableau qui décrit le processus d’acceptation.

Certaines des nouvelles fonctionnalités JavaScript que nous avons explorées dans cet article, comme les expressions do ou l’opérateur de pipeline sont des propositions de l’étape 1, ce qui signifie qu’elles ont encore du chemin à parcourir avant de faire partie de la norme ECMAScript.