L’optionnal chaining en javascript

Une chaine

Aujourd’hui nous allons voir ensemble une fonctionnalité de Javascript es2020 encore peu assez utilisée.
Voici donc la fonctionnalité d’optionnal chaining, ou chaînage optionnel, présenté dans la proposition TC39 sur github.

Présentation

Tout d’abord qu’est-ce que l’optionnal chaining ou chaînage optionnel ?

L’opérateur de chaînage optionnel ?. permet de lire la valeur d’une propriété située profondément dans une chaîne d’objets connectés sans avoir à valider expressément que chaque référence dans la chaîne est valide.

MDN Web Doc

On comprend donc que cela permet d’accéder à des propriétés d’objet sans avoir à être sûr qu’elles existes.
Si la propriété n’est pas accessible car elle n’existe pas ou bien l’une des propriétés parente n’existe pas, cela renvoi undefined.
Ainsi on n’écrira plus le code suivant:

if(chien.carac && chien.carac.couleur && chien.couleur.nom == "rouge"){
     console.log('le chien est rouge !');
}

Mais plus simplement:

if(chien.carac?.couleur?.nom == "rouge"){
     console.log('le chien est rouge !');
}

Utilisation de l’optionnal chaining

Le chaînage conditionnel peut également être utilisé sur les méthodes:

chien.actions.abboie?.();

Mais aussi pour les tableaux:

if(chien.carac.aime?.['os']){
     console.log('Le chien aime les os !');
}

Il est également possible de le combiner avec le Nullish coalescing operator:

const chien = {name: "Rox"};

const maitre_age = chien.maitre?.nom ?? 'Arthur';

Enfin nous pouvons l’utiliser dans le cas d’un accès à une propriété par une expression:

const chien = { nom: "Rintintin", description: "Un super chien !", aime: {'jouets en plastique': true}};
let material = 'plastique';
const result = chien.aime?.['jouets en ' + material];

console.log(result); // true

Attention !

break with optionnal chaining

Il faut être bien conscient que cela ne fonctionne que pour les propriétés d’objet, ainsi le code suivant ne fonctionnera pas !

// Ici la variable chien n'existe pas

const nom_du_chien = chien?.nom; // Error: chien is not defined

L’optionnal chaining ne fonctionne que sur les propriétés d’un objet et non sur l’objet en lui-même, sinon on perdrait l’information importante de savoir si une variable est définie ou non !

Conclusion

L’optionnal chaining est un outils très utile si l’on pense à l’utiliser, notamment dans le cas de test pour accéder à des sous propriétés d’objets.
Pour ma part, il m’arrivait encore d’oublier cette fonctionnalité, mais depuis je me suis fait un petit rappel post-il sur le bureau j’y pense plus souvent !


Sources


Articles récents

L’optionnal chaining en javascript

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Retour en haut