JavaScript: Retour sur les nouveautés ES2020
Cela fait maintenant quelques mois que les nouvelles fonctionnalités ES2020 ont été validées. Il est donc grand temps de découvrir les plus intéressantes et ça tombe bien, c’est ce que nous allons voir dans cet article.
Avant cela, quelques petites précisions toujours intéressantes à connaître concernant des termes que vous rencontrez peut-être souvent.
EcmaScript (souvent abrégée ES) est une spécification permettant de normer le langage javascript. C’est une organisation nommée ECMA (European Computer Manufacturers Association) qui se charge de cette norme.
Chaque année, le standard ES est mis à jour, et depuis 2015 maintenant, les standards sont nommés suivant l’année de sortie. Pour la mise à jour de 2021, il portera donc le nom ES2021, etc …
TC39 désigne quant à lui le comité qui a pour responsabilité de définir les nouveautés du standard.
Nous pourrons voir dans un prochain article comment sont sélectionnées les nouveautés et qui décide de tout cela mais sans plus attendre, parlons maintenant des grosses nouveautés ES2020.
1. Un nouveau type de donnée primitive: BigInt
Jusqu’ici, il existait 6 types de données primitives:
- String: chaines de caractères
- Boolean: booléen (vrai/faux)
- Null: rien
- Undefined: non défini
- Symbol: Donnée unique et impossible à changer (Je ferai un nouvel article prochainement qui sera entièrement consacré à ce type de donnée)
- Number: Nombre avec pour limite ²⁵³
Un nouveau type vient s’ajouter à la liste précédente et sa différence avec Number réside dans sa grandeur.
Le type number peut aller jusqu’à 9007199254740992 (accessible depuis une constante Number.MAX_SAFE_INTEGER). Pour définir une donnée de type bigInt, la seule contrainte est de finir le nombre par la lettre n.
Voici un exemple concret:
2. L’import dynamique (dynamic import)
Ne vous est-il jamais arrivé d’importer un module dans un composant sans forcément en avoir besoin …? Avec l’import dynamique c’est terminé, il est enfin officiellement possible d’importer un module seulement au moment on nous en avons besoin (gain en performance possible et facile à mettre en place 🥳). Auparavant c’était webpack/babel qui se chargeait de gérer les imports le plus intelligemment possible. Voyons en image, les deux manières de faire.
Dans cet exemple (très réaliste n’est-ce pas ? 💁), nous pouvons voir deux manières différentes de faire. La première permet d’importer de manière globale un module. On peut voir que dans ce cas, l’import ne servirait à rien car nous ne passons pas dans la condition appelant la méthode takeOutUmbrella. La seconde par contre est celle apportée par ES2020. Elle permet d’importer à la volée le module souhaité.
3. L’opérateur de coalescence des nuls (Nullish coalescing operator)
Cet opérateur nous donne la possibilité de vérifier les valeurs nulles au lieu des valeurs fausses.
Il peut être utile parfois de vérifier qu’une variable est nulle au lieu de vérifier qu’elle soit fausse. En javascript le nombre 0, NaN, undefined, null ou encore les chaines vides sont considérés comme des valeurs fausses.
Jusqu’ici nous avions les opérateurs ET logique (&&) et OU logique (||) qui permettaient d’avoir des valeurs falsy et truthy. Voici désormais le nullish operator (??). Voyons quelques exemples permettant de comparer les utilisations des opérateurs.
Nous pouvons donc voir que le nouvel opérateur, contrairement aux OU logique et ET logique renvoie toujours une valeur qui est non nulle.
4. Chainage optionnel (Optional Chaining)
Parlons désormais de la fonctionnalité que j’attendais le plus parmi les nouveautés. Il a dû vous arriver un grand nombre de fois d’avoir des tests à rallonge sur des valeurs d’objets à grande profondeur. C’est désormais terminé grâce au chainage optionnel !
Voyons tout de suite en image ce que va nous apporter cette fonctionnalité 😍.
Dans le cas ou la propriété address ou city n’existerait pas, la valeur renvoyée serait undefined. Auparavant si vous ne faisiez aucun test sur ce genre de cas et qu’un des attributs n’existait pas, une erreur javascript du genre “Cannot read property ‘city’ of undefined” survenait.
Plus d’excuses pour ne plus tester vos valeurs avant de les utiliser 😜.
5. Nouvelle méthode sur l’objet String: matchAll
String.prototype.match() doit déjà parler à bon nombre d’entre vous. Si ce n’est pas le cas voici une brève explication de ce que fait cette méthode et comment l’utiliser.
Il s’agit d’une méthode qui prend en entrée une expression régulière (regex) et qui retourne en sortie un tableau contenant les correspondances avec l’expression passée en paramètre.
Voici un exemple simple d’utilisation
Nous pouvons voir que nous avons donc trois occurrences de fries dans notre chaine mais malheureusement nous n’avons aucune autre information.
Faisons le même test avec la nouvelle méthode à savoir matchAll
Même résultat mais ce coup-ci nous avons un peu plus d’informations. On retrouve la valeur testée dans input mais aussi l’index à laquelle l’occurence a été trouvée. De plus, il est possible de récupérer les groupes de capture pour des expressions régulières un peu plus complexe (et réaliste) que celle montrée ici.
6. Portée globale du this (globalThis)
Alors que dans les navigateurs, l’objet global correspond à l’objet window, dans nodeJS l’équivalent de cet objet est accessible depuis un objet global. Difficile donc de s’y retrouver, pour un même langage, suivant l’environnement on n’utilise pas le même objet … Aujourd’hui ce problème est réglé !
On peut voir dans la console du navigateur que l’objet window et le nouvel objet globalThis correspondent à la même chose.
7. Nouvelle méthode permettant de gérer un ensemble de promesses: Promise.allSettled
Là encore, certains d’entres vous vont peut-être penser à une autre méthode permettant de gérer un ensemble de promesses et vous avez bien raison! Promise.all est une méthode qui permet de prendre en entrée un ensemble de promesses, qui va attendre que toutes les promesses se finalisent et qui va renvoyer une promesse si tout a bien été résolu. Oui d’accord mais si une promesse a été rejetée ? C’est ce qui est un peu violent avec cette méthode, elle va rejeter l’ensemble des promesses dès lors que l’une d’entre elles sera rejetée. La solution à ce comportement qui peut parfois être non désiré ? allSettled !
Contrairement à sa grande soeur, cette méthode va renvoyer un tableau contenant chaque promesse ainsi que leurs résultats. Elle va patiemment attendre que chacune des promesses qui lui a été passée en paramètre soit terminées (qu’elle soit résolue ou rejetée) et retourner le résultat des exécutions
Conclusion:
Javascript continue d’évoluer à une vitesse folle et c’est ce qui est plaisant dans ce langage. Il y a quelques années encore, il s’agissait d’un langage qui était parmi les plus détestés, aujourd’hui c’est l’un des plus flexible, puissant et qui attire de plus en plus de développeurs.
Ces nouveautés ne vont pas révolutionner notre manière de faire des développements web mais vont principalement permettre d’améliorer la lisibilité du code.
Un dernier petit conseil avant d’utiliser une des nouvelles fonctionnalités vues ci-dessus, pensez à vérifier qu’elles sont bien compatibles avec les navigateurs ciblés (pour IE, désolé il faudra passer par des polyfills) 🙃
Parmi ces quelques nouveautés, quelles sont celles qui vous plaisent le plus ? Quelles sont celles que vous voudriez voir venir dans le futur ?
Sources: MDN, v8.dev, freecodecamp, Git EcmaTC39
