10 nouvelles fonctionnalités JavaScript à connaître dans ES2020

Bonne nouvelle - les nouvelles fonctionnalités de l'ES2020 sont désormais finalisées! Cela signifie que nous avons maintenant une idée complète des changements qui se produisent dans ES2020, la nouvelle spécification améliorée de JavaScript. Voyons donc quels sont ces changements.

# 1: BigInt

BigInt, l'une des fonctionnalités les plus attendues de JavaScript, est enfin là. Il permet en fait aux développeurs d'avoir une représentation entière beaucoup plus grande dans leur code JS pour le traitement des données pour la gestion des données.

Pour le moment, le nombre maximum que vous pouvez stocker sous forme d'entier dans JavaScript est pow(2, 53) - 1. Mais BigInt vous permet en fait d'aller encore plus loin.  

Cependant, vous devez avoir un nappendice à la toute fin du numéro, comme vous pouvez le voir ci-dessus. Cela nindique qu'il s'agit d'un BigInt et qu'il devrait être traité différemment par le moteur JavaScript (par le moteur v8 ou quel que soit le moteur qu'il utilise).

Cette amélioration n'est pas rétrocompatible car le système de numérotation traditionnel est IEEE754 (qui ne peut tout simplement pas prendre en charge les nombres de cette taille).

# 2: import dynamique

Les importations dynamiques en JavaScript vous donnent la possibilité d'importer des fichiers JS de manière dynamique en tant que modules dans votre application de manière native. C'est exactement comme vous le faites avec Webpack et Babel en ce moment.

Cette fonctionnalité vous aidera à expédier du code de demande à la demande, mieux connu sous le nom de fractionnement de code, sans la surcharge du webpack ou d'autres bundleurs de modules. Vous pouvez également charger du code conditionnellement dans un bloc if-else si vous le souhaitez.

La bonne chose est que vous importez réellement un module et qu'il ne pollue donc jamais l'espace de noms global.

# 3: Coalescence nulle

La fusion nulle ajoute la possibilité de vraiment vérifier les nullishvaleurs au lieu des falseyvaleurs. Quelle est la différence entre les valeurs nullishet falsey, pourriez-vous vous demander?

En JavaScript, beaucoup de valeurs sont falsey, comme des chaînes vides, le nombre 0, undefined, null, false, NaN, et ainsi de suite.

Cependant, souvent, vous voudrez peut-être vérifier si une variable est nulle - c'est-à-dire si c'est soit undefinedou null, comme quand il est acceptable pour une variable d'avoir une chaîne vide, ou même une valeur fausse.

Dans ce cas, vous utiliserez le nouvel opérateur de fusion nul, ??

Vous pouvez clairement voir comment l'opérateur OR renvoie toujours une valeur de vérité, alors que l'opérateur nullish renvoie une valeur non nulllish.

# 4: chaînage facultatif

La syntaxe de chaînage facultative vous permet d'accéder aux propriétés d'objet profondément imbriquées sans vous soucier de savoir si la propriété existe ou non. Si ça existe, tant mieux! Sinon, undefinedsera retourné.

Cela fonctionne non seulement sur les propriétés des objets, mais également sur les appels de fonctions et les tableaux. Super pratique! Voici un exemple:

# 5: Promise.allSettled

La Promise.allSettledméthode accepte un tableau de promesses et ne se résout que lorsque toutes sont réglées - résolues ou rejetées.

Cela n'était pas disponible nativement auparavant, même si certaines implémentations proches comme raceet allétaient disponibles. Cela amène nativement à JavaScript "Exécuter toutes les promesses - je m'en fiche des résultats".

# 6: Chaîne # matchAll

matchAllest une nouvelle méthode ajoutée au Stringprototype qui est liée aux expressions régulières. Cela renvoie un itérateur qui renvoie tous les groupes correspondants l'un après l'autre. Jetons un coup d'œil à un exemple rapide:

# 7: globalThis

Si vous écriviez du code JS multiplateforme qui pourrait s'exécuter sur Node, dans l'environnement du navigateur et également à l'intérieur des travailleurs Web, vous auriez du mal à obtenir l'objet global.

C'est parce que c'est windowpour les navigateurs, globalpour Node et selfpour les travailleurs Web. S'il y a plus d'exécutables, l'objet global sera également différent pour eux.

Vous auriez donc dû avoir votre propre implémentation de détection du runtime, puis utiliser le bon global - c'est-à-dire jusqu'à présent.

ES2020 nous apporte ce globalThisqui fait toujours référence à l'objet global, peu importe où vous exécutez votre code:

# 8: Exportations d'espaces de noms de modules

Dans les modules JavaScript, il était déjà possible d'utiliser la syntaxe suivante:

import * as utils from './utils.mjs'

Cependant, aucune exportsyntaxe symétrique n'existait, jusqu'à présent:

export * as utils from './utils.mjs'

Ceci est équivalent à ce qui suit:

import * as utils from './utils.mjs' export { utils }

# 9: Ordre d'avance bien défini

La spécification ECMA ne précisait pas dans quel ordre for (x in y)  s'exécuter. Même si les navigateurs ont mis en œuvre un ordre cohérent par eux-mêmes auparavant, cela a été officiellement normalisé dans ES2020.

# 10: import.meta

L' import.metaobjet a été créé par l'implémentation ECMAScript, avec un nullprototype.

Considérons un module, module.js:

Vous pouvez accéder aux méta-informations sur le module à l'aide de l' import.metaobjet:

console.log(import.meta); // { url: "file:///home/user/module.js" }

Il renvoie un objet avec une urlpropriété indiquant l'URL de base du module. Ce sera soit l'URL à partir de laquelle le script a été obtenu (pour les scripts externes), soit l'URL de base du document du document contenant (pour les scripts en ligne).

Conclusion

J'adore la cohérence et la rapidité avec lesquelles la communauté JavaScript a évolué et évolue. C'est incroyable et vraiment merveilleux de voir comment JavaScript est venu d'un langage hué il y a 10 ans, à l'un des langages les plus puissants, les plus flexibles et les plus polyvalents de tous les temps.

Souhaitez-vous apprendre JavaScript et d'autres langages de programmation d'une manière complètement nouvelle? Rendez-vous sur une nouvelle plateforme pour les développeurs sur laquelle je travaille pour l'essayer aujourd'hui!

Quelle est votre fonctionnalité préférée de ES2020? Parlez-moi de cela en tweetant et en me connectant sur Twitter et Instagram!

Ceci est un article de blog composé de ma vidéo sur le même sujet. Cela signifierait le monde pour moi si vous pouviez lui montrer un peu d'amour!