Quoi de neuf dans la norme ES2021 pour JavaScript ? –

La version annuelle d’ECMAScript est arrivée, apportant de nouvelles fonctionnalités et des améliorations de syntaxe. La spécification a été finalisée par l’organisation de normalisation internationale ECMA le 22 juin 2021, indiquant qu’elle est maintenant prête à être utilisée.

L’implémentation la plus populaire d’ECMAScript est JavaScript, le langage pris en charge par les navigateurs Web et les environnements cloud via des runtimes comme Node.js. Voici un aperçu des principaux changements dans ES2021.

Promesse.tout()

Promise.any() termine la prise en charge globale de la gestion des erreurs pour les promesses. Il court-circuitera et reviendra dès que une du passé Promise objets est remplie.

Si toutes les promesses échouent, la méthode rejette avec un nouveau AggregateError. Cet objet encapsule les motifs de rejet pour chacune des erreurs individuelles.

const promises = [doSomething(), doSomethingElse()];
 
try {
 
    // This will be the return value from `doSomething()` 
    // or `doSomethingElse()`, depending on which 
    // resolves first
    const firstToResolve = await Promise.any(promises);
 
}
 
catch (errors) {
 
    for (const error of errors) {
        // Iterate the individual Promise rejection reasons
    }
 
}

Promise.any() est utile dans les scénarios où vous devez prendre des mesures si au moins une promesse se résout, mais peu importe si certaines échouent. Il complète l’existant Promise.all() et Promise.allSettled() méthodes.

Voici un bref résumé des différences :

• any() – Résout si une promesse se résout. Rejeté si toutes les promesses sont rejetées.
• all() – Résout si toutes les promesses se résolvent. Rejette si une promesse est rejetée.
• allSettled() – Résout une fois que toutes les promesses ont été résolues ou rejetées. Cette méthode ne rejette pas.

Opérateurs d’affectation logique

ES2021 est livré avec des améliorations de l’opérateur demandées depuis longtemps. Les nouveaux opérateurs d’affectation logique fournissent un court-circuit pratique qui se traduit par moins de code à écrire.

Les trois opérateurs (&&=, ||= et ??=) combinent leur comparaison logique correspondante avec une affectation de valeur. Vous n’avez plus besoin d’écrire deux fois le nom de la variable si vous n’attribuez que lorsque la comparaison correspond :

// ES2020
x && (x = y)
x || (x = y)
x = x ?? y
 
// ES2021
x &&= y;
x ||= y;
x ??= y;

Cela permet de compléter le support de l’opérateur et de réduire la répétitivité du code lourd d’affectation. Il donne aux opérateurs logiques la même intégration d’affectation que les opérateurs mathématiques (+=, -=, *=).

String.prototype.replaceAll()

Une nouvelle méthode sur le String prototype facilite beaucoup le remplacement de toutes les instances d’une sous-chaîne, sans recourir à une expression régulière. Lorsque l’existant replace() La méthode reçoit une chaîne en entrée, elle ne remplace que la première instance de cette valeur. replaceAll() ajoute le comportement que de nombreux développeurs ont souhaité et attendu.

const str = "xxxyz";
 
// xxyz
console.log(str.replace("x", ""));
 
// yz
console.log(/x/g, "");
 
// yz
console.log(str.replaceAll("x", ""));

C’est une petite fonctionnalité qui devrait avoir une utilité immédiate dans le monde réel. UNE replaceAll() appel augmente la lisibilité du code par rapport à une regex avec un g modificateur (global). Cela est particulièrement vrai lorsque vous travaillez avec des développeurs moins expérimentés qui peuvent ne pas savoir pourquoi l’expression régulière a été utilisée.

Séparateurs numériques

Un simple changement ajoute des séparateurs numériques à la syntaxe JavaScript de base. Cela vous permet de placer des traits de soulignement entre les chiffres des nombres littéraux, ce qui les rend plus lisibles. Ils seront automatiquement supprimés lors de l’analyse de vos fichiers.

// ES2020 - This is hard to see at a glance!
const billion = 1000000000;
 
// ES2021 - This can be more readable
const billion = 1_000_000_000;

Les séparateurs imitent la manière dont les virgules sont utilisées entre les groupes de nombres écrits. Leur utilisation est entièrement facultative. La syntaxe fonctionne également pour les littéraux binaires et hexadécimaux préfixés par 0b et 0x.

Fonctionnalités avancées

ES2021 inclut de nouveaux objets destinés à des cas d’utilisation plus avancés. D’abord, il y a WeakRef, un mécanisme qui contient une référence à un objet mais le maintient éligible pour le ramasse-miettes. La référence est « faible » car il n’y a aucune garantie qu’elle sera utilisable à l’avenir.

Vous pourrez accéder à l’objet jusqu’à ce qu’il soit récupéré. Il se peut que ce ne soit pas du tout un ramasse-miettes, car c’est au navigateur de supprimer les objets non référencés.

Vous créez des références faibles avec le WeakRef constructeur, en passant l’objet que vous souhaitez utiliser. Vous pouvez accéder à l’objet d’origine plus tard en appelant deref().

const x = {};
const xWeakRef = new WeakRef(x);
 
const deRef = xWeakRef.deref();     // this is the object from `x`

Les références faibles doivent être utilisées pour mettre en cache des objets volumineux qui ne sont pas essentiels à votre application. Le navigateur pourra les nettoyer en période de faible mémoire, améliorant ainsi les performances globales.

A côté de références faibles, le nouveau FinalizationRegistry constructeur fournit des notifications lorsque les objets sont ramassés. Il n’est pas possible d’annuler le ramasse-miettes ; cette fonctionnalité est destinée à vous permettre de répondre aux nettoyages en libérant toutes les autres ressources associées. Par exemple, si un objet représentant un utilisateur a été récupéré par la mémoire, vous pouvez utiliser le rappel pour supprimer un blob mis en cache de sa photo de profil.

const registry = new FinalizationRegistry(key => {
    // This callback will run when a 
    // registered object is garbage collected
    if (key === "user") {
         // Delete cached user data here.
    }
});
 
const user = {Username: "CloudSavvy"};
registry.register(user, "user");

Dans cet exemple, votre rappel s’exécutera et recevra user comme paramètre lorsque le x l’objet est ramassé. Vous pouvez utiliser la clé pour identifier et supprimer des données similaires. Vous devrez créer ce mécanisme vous-même.

Conclusion

ES2021 est une mise à jour saine des spécifications qui apporte de nouvelles fonctionnalités pratiques à la communauté ECMAScript. Promise.any() complète la gamme de traitement des promesses, tandis que les opérateurs d’affectation logique et replaceAll() améliorer la facilité d’utilisation au quotidien.

Bien que tout juste finalisées, les fonctionnalités ES2021 ont été livrées dans les navigateurs toute l’année. Chromium, Firefox et Safari offrent déjà une prise en charge complète d’ES2021, vous pouvez donc écrire du code en utilisant les nouvelles fonctionnalités dès aujourd’hui. Des fonctionnalités telles que Promise.any() et String.prototype.replaceAll() peut être facilement rempli pour les anciens navigateurs ; d’autres, comme les opérateurs d’affectation logique, peuvent être gérés par des préprocesseurs comme Babel.