Il y a 3 ans -
Temps de lecture 3 minutes
Pépite #21 – ECMAScript va introduire l’optional chaining dans sa norme.
ECMAScript est un standard évoluant en permanence et de nouvelles normes font régulièrement leur apparition. C’est le cas de ces deux nouvelles propositions (parmi d’autres) faisant particulièrement parler d’elles dans le monde JavaScript : Le nullish coalescing et l’optional chaining !
En effet, le tc39 (Technical Committee 39), le comité chargé de définir les nouveaux standards d’ECMAScript, a validé ces deux fonctionnalités et les a placées au niveau 3 de validation (stage 3), cela indique que ces propositions sont suffisamment matures pour être prises en considération. Le comité attend maintenant le feedback des utilisateurs et les implémentations qui satisferont leurs critères d’acceptances..
Nous allons voir ici ce que l’optional chaining peut nous apporter. Si vous êtes intéréssé(e) par le nullish coalescing, je vous invite à vous rendre sur cet article qui lui est dédié : Pépite #19 : Introduction du nullish coalescing dans ECMAScript.
Qu’est ce que l’optional chaining ?
Une des problématiques que l’on rencontre régulièrement lorsque l’on veut utiliser un attribut d’un objet est de devoir vérifier l’existence de ce dernier, la presence de ses attributs, ou des attributs parents le contenant.
Cela nous pousse à réaliser du code dédié à cette vérification et qui peut, au mieux, être rébarbatif, au pire, provoquer du bruit dans notre programme.
Par exemple :
[js]function uppercaseFoobar(data) {
if(data && data.foo && data.foo.bar) {
return data.foo.bar.toUpperCase();
}
return "Missing attribute";
}
uppercaseFoobar({})[/js]
L’optional chaining permet de simplifier ces vérifications en précisant que les attributs que nous manipulons sont optionnels, et de fait potentiellement null ou undefined.
Dans le cas où l’un des éléments de la chaîne est null ou undefined, le résultat retournera automatiquement undefined.
Le code ci-dessus peut ainsi être réécrit de la manière suivante :
[js]function uppercaseFoobar(data) {
if(data.foo?.bar?) {
return data.foo.bar.toUpperCase();
}
return "Missing attribute";
}
uppercaseFoobar({})[/js]
Nous gagnons déjà en lisibilité. Mais il est possible de simplifier encore plus cette écriture.
En effet, si nous combinons cette méthode avec le le nullish coalescing nous pouvons réduire la fonction uppercaseFoobar à une seule ligne :
[js]function uppercaseFoobar(data) {
return data.foo?.bar?.toUpperCase() ?? "Missing attribute";
}
uppercaseFoobar({})[/js]
Cela permet ainsi de prendre en compte le fait que l’attribut bar peut être une chaîne de caractère vide :
[js]function uppercaseFoobarNullish(data) {
return data.foo?.bar?.toUpperCase() ?? ‘Missing attribute’;
}
function uppercaseFoobar(data) {
return data.foo?.bar?.toUpperCase() || ‘Missing attribute’;
}
uppercaseFoobarNullish({ foo: {bar: »}}); // return »
uppercaseFoobar({ foo: {bar: »}}); // return ‘Missing attribute'[/js]
Cependant cette vérification est nécessaire sur chaque élément de la chaîne potentiellement null. On ne peut pas se contenter de le mettre uniquement sur le premier élément de la chaîne, au risque de continuer à obtenir des erreurs :
[js]const foobar = {
foo: {
bar: null
}
};
console.log(foobar.foo?.bar?.length); // returns undefined
console.log(foobar.foo?.bar.length); // throws error[/js]
Quand pourra-t-on les utiliser ?
Actuellement cette fonctionnalités est au stage 3 de publication pour le tc39, nous pouvons donc espérer que cette nouvelle syntaxe sera intégrée dans la prochaine version d’ECMAScript d’ici le mois de juillet 2020 (le comité se réunissant tous les ans à cette période afin de valider les nouvelles normes).
TypeScript l’implémentera dans sa prochaine version 3.7 (accessible uniquement en bêta pour le moment).
En attendant une implémentation officielle, il est d’ores et déjà possible de simuler ce comportement en utilisant le plugin babel dédié à l’optional chaining.
Il est possible de suivre l’avancée des travaux via le GitHub dédié au TC39.
Commentaire