Le chaînage optionnel est un moyen sûr et concis d’effectuer des contrôles d’accès pour les propriétés d’objets imbriqués.
L’opérateur de chaînage optionnel ?. prend la référence à sa gauche et vérifie si elle est indéfinie ou nulle. Si la référence est l’une de ces valeurs nulles, les contrôles s’arrêtent et renvoient undefined. Sinon, la chaîne des contrôles d’accès continuera sur le chemin heureux jusqu’à la valeur finale.
// Un objet person vide avec des informations de localisation optionnelles manquantes
const person = {}
// Ce qui suit équivaut à undefined au lieu d'une erreur
const currentAddress = person.location ?.address
Le chaînage optionnel a été introduit dans l’ES2020. Selon le TC39, il est actuellement au stade 4 du processus de proposition et est prêt à être inclus dans la norme ECMAScript finale. Cela signifie que vous pouvez l’utiliser, mais notez que les anciens navigateurs peuvent encore exiger l’utilisation de polyfill.
Le chaînage facultatif est une fonctionnalité utile qui peut vous aider à écrire un code plus propre. Voyons maintenant comment l’utiliser.
Syntaxe du chaînage facultatif
Dans cet article, je vais surtout vous expliquer comment accéder aux propriétés des objets. Mais vous pouvez également utiliser le chaînage optionnel pour contrôler les fonctions.
Voici tous les cas d’utilisation du chaînage optionnel :
obj ?.prop // Accès optionnel à une propriété statique
obj ?.[expr] // accès facultatif à une propriété dynamique
func ?.(...args) // appel facultatif de fonction ou de méthode
Source : MDN Web Docs
Exemple :
const value = obj ?.propOne ?.propTwo ?.propThree ?.lastProp ;Dans l’extrait de code ci-dessus, nous vérifions si obj est nul ou indéfini, puis propOne, puis propTwo, et ainsi de suite. Le chaînage optionnel porte bien son nom. Dans la chaîne d’accès aux propriétés de l’objet, nous pouvons vérifier que chaque valeur n’est pas indéfinie ou nulle.
Cette vérification peut être extrêmement utile pour accéder à des valeurs d’objets profondément imbriquées. Il s’agit d’une fonctionnalité très attendue qui vous évite d’avoir à effectuer de nombreuses vérifications de nullité. Cela signifie également que vous n’avez pas besoin d’utiliser des variables temporaires pour stocker les valeurs vérifiées, par exemple :
const neighborhood = city.nashville && city.nashvile.eastnashville ;
Ici, nous pouvons vérifier que nashville est une propriété de city avant de tenter d’accéder à la propriété inner neighborhood de eastnashville. Nous pouvons convertir l’exemple ci-dessus pour utiliser le chaînage optionnel, comme suit :
const neighborhood = city ?.nashville ?.eastnashville ;Le chaînage optionnel simplifie cette expression.
Gestion des erreurs avec le chaînage facultatif
Le chaînage facultatif est particulièrement utile lorsque vous travaillez avec des données d’API. Si vous n’êtes pas sûr de l’existence d’une propriété facultative, vous pouvez faire appel au chaînage facultatif.
Un mot d’avertissement
N’utilisez pas le chaînage optionnel à chaque occasion. Cela pourrait avoir pour conséquence de faire taire les erreurs en ayant un potentiel indéfini retourné à de nombreux endroits.
Il est également important de se rappeler que la vérification s’arrêtera et « court-circuitera » au moment où elle rencontrera une valeur nulle. Pensez-y pour les propriétés suivantes de la chaîne et ce qui se passera si elles ne peuvent être atteintes.
Il est préférable d’utiliser cette vérification lorsque vous savez qu’un élément peut ne pas avoir de valeur, comme une propriété facultative. Si une valeur requise est assortie d’un contrôle nullish, elle peut être réduite au silence par le renvoi de la valeur undefined au lieu de renvoyer une erreur pour signaler ce problème.
Chaînage optionnel + Nullish Coalescing
Le chaînage optionnel se combine bien avec le coalesçage nullish ? ? pour fournir des valeurs de repli.
const data = obj ?.prop ? ? "chaîne de repli" ;const data = obj ?.prop ?.func() ? ? fallbackFunc() ;Si l’élément à gauche de ? ? est nul, l’élément à droite sera retourné.
Nous savons que si un contrôle ?. correspond à une valeur nulle dans la chaîne, il retournera undefined. Nous pouvons donc utiliser notre coalescence nullish pour répondre au résultat indéfini et définir une valeur de repli explicite.
const meal = menu.breakfast ?.waffles ? ? "Aucune gaufre trouvée"Conclusion
Le chaînage optionnel est une fonctionnalité récente et pratique de JavaScript qui vous permet de vérifier l’absence de valeurs nulles lors de l’accès aux valeurs des propriétés. Vous pouvez également l’utiliser avec l’opérateur ?
J’espère que cet article a permis de présenter ou de clarifier le chaînage optionnel. Bon codage !
