Bonjour, nous allons aujourd’hui parler d’ECMAScript et plus précisément de sa nouvelle version prévue cette année. Mais tout d’abord, revenons rapidement ce sur ce qu’est ECMAScript.

Il existe un organisme indépendant de standardisation nommé ECMA International qui est responsable notamment de publier chaque année une version mise à jour de son standard de scripting nommé ECMAScript, ayant pour but de définir ce que doit être un langage de scripting et quelles fonctionnalités il doit posséder.

Javascript en est l’une des implémentations les plus connues puisqu’il est même à l’origine du standard. Cependant, Javascript n’est pas totalement conforme au standard, le langage se permet en effet certaines libertés quant à l’implémentation des fonctionnalités standardisées. Certaines ne sont tout simplement pas implémentées alors que d’autres tardent à l'être, ce qui implique un décalage entre la norme ECMAScript en cours et l’état de l’implémentation du langage dans les différents navigateurs au même instant. Il est aussi important de noter que certains navigateurs implémentent également de leur côté des fonctionnalités qui ne sont pas standardisées par ECMAScript.

Pour pallier ce genre de manque et comme nous en avons déjà parlé dans de précédents articles, il existe une solution nommée Babel qui nous permet d’étendre les fonctionnalités de Javascript en implémentant notamment les fonctionnalités standardisées par ECMAScript mais non présentes nativement dans le langage. (Attention, Babel n’est lui-même pas toujours à l’affût de toutes les nouveautés du standard !)

Bien, nous pouvons donc commencer à passer en revue les nouveautés. Je me permets de préciser que cette liste n’est pas exhaustive, j’ai sélectionné dans cet article des fonctionnalités qui me paraisse importantes.

L’import dynamique

L’import dynamique rentre donc dans le standard pour 2020. C’est un ajout important puisqu’il permet de charger de façon asynchrone un module quand celui-ci est nécessaire, ce qui permet entre autre de faire du lazy-loading.

const afficherSurLaConsole = (str: string) => {
	   const logger = await import('./mylogger.js');
	   logger(str);
}

A savoir que cette fonctionnalité est déjà rendue disponible par Webpack ainsi que la plupart des bundlers js.

Attribut privé de classe

C’est un ajout notable puisque Javascript est un langage jusqu’à présent sans accès protégé des variables de classe. Grâce à Typescript il était possible d’émuler ce comportement grâce aux keywords private et public qui nous permettait d’avoir des erreurs à la compilation en cas d’accès non-autorisé.

Désormais, il serait possible nativement de définir une propriété de classe en tant que private en ajoutant simplement un # devant une variable ou fonction comme ceci :

class Toto {
    #my_private_attribute = 'tutu';
    
    #get() {
	return this.my_private_attribute;	
    }
}

Nullish coalescing operator

Vous connaissez sans doute cette syntaxe faite simplement d’un operator OR || :

const result = choice1 || choice2

Cette syntaxe nous permet spécifier à Javascript d’assigner dans notre cas la valeur de choice1 à result si celui-là est définit et choice2 à défaut. Ainsi :

const choice1 = 'toto';
const choice2 = 'tutu';

console.log(choice1 || choice2); // ==> 'toto'

// =======

const choice1 = null;
const choice2 = 'tutu'

console.log(choice1 || choice2); // ==> 'tutu'

Sauf que cette syntaxe présente un souci. Si dans notre cas choice1 avait pour valeur '', 0, [], {} , ces différentes valeurs étant considérées comme false par Javascript, choice2 aurait toujours été retenu

Pour pallier à ce problème, ECMAScript a standardisé une nouvelle syntaxe nommée Nullish coalescing operator qui a pour but de sélectionner dans notre exemple choice2 quand choice1 vaut explicitement null ou undefined. Ainsi :

const choice1 = 0;
const choice2 = 'tutu';

console.log(choice1 ?? choice2); // ==> '0'

A savoir que cette fonctionnalité a déjà été implémentée dans les dernières versions des navigateurs principaux (Chrome, Firefox et Edge). Si vous souhaitez utiliser cette syntaxe sur des versions de navigateurs qui ne supportent pas la fonctionnalité, vous pouvez utiliser le plugin Babel "@babel/plugin-proposal-nullish-coalescing-operator".

Optionnal chaining operator

Mon ajout favori au standard a pour but de nous éviter de faire des conditions ternaires dans tous les sens lorsque nous voulons tester des variables, sous peine d’avoir un jolie crash JS.

Ainsi au lieu de faire :

const myCatName = animals && animals.cat && animals.cat.name ? animals.cat.name : undefined;

Nous pouvons faire :

const myCatName = animals?.cat?.name;

Ainsi, si animals ou animals.cat ou animals.cat.name n’est pas défini, cet operator nous retournera undefined au lieu d’une erreur JS :)

A savoir que cette fonctionnalité a déjà été implémentée dans les dernières versions des navigateurs principaux (Chrome, Firefox et Edge) mais en tant que fonctionnalité expérimentale (il faudra donc l’activer dans les préférences de votre navigateur). Si vous souhaitez utiliser cette syntaxe sur des versions de navigateurs qui ne supportent pas la fonctionnalité, vous pouvez utiliser le plugin Babel "@babel/plugin-proposal-optional-chaining".

Promise.allSettled

Nouvel ajout pour les Promesses JS ! Cette fois-ci l’opérateur allSettled nous permet de nous retourner le tableau de résultat de nos promesses comme un Promise.all() à l’exception que celui-ci ne court-circuite jamais même en cas de Promesses rejetées. Ainsi :

const result = await Promise.allSettled([...monTableauDePromises]);
console.log(result); // ⇒ [{status: 'fulfilled', value: 100}, {status: 'fulfilled', value: 200}, {status: 'rejected', reason: Error...}]

A savoir que cette fonctionnalité a déjà été implémentée dans les dernières versions des navigateurs principaux (Chrome, Firefox et Edge). Si vous souhaitez utiliser cette syntaxe sur des versions de navigateurs qui ne supportent pas la fonctionnalité, il existe notamment des paquets indépendants comme promise.allsettled qui implémentent cette fonctionnalité.

Et voilà pour les principaux ajouts de ES2020 ! En espérant que vous en ferez bonne usage !

Happy coding !