Comment simplifier les instructions if en JavaScript

Les instructions conditionnelles sont un élément essentiel de JavaScript. Elles vous permettent d'exécuter du code selon qu'une condition donnée est vraie ou fausse, et vous pouvez imbriquer plusieurs instructions if. elseif (et une instruction else) pour évaluer plus d'une condition.

Mais voici le problème : lorsque l'on écrit des expressions complexes de type si.autre les choses peuvent rapidement devenir confuses, et vous pouvez facilement vous retrouver avec un code difficile à lire et à comprendre.

Apprenons à refactoriser des chaînes de caractères longues et complexes. if.elseif.else en une version plus concise, plus propre et plus facile à comprendre.

Chaînes complexes if.else

Lorsque vous écrivez des instructions if.else complexes en JavaScript, il est essentiel d'écrire un code propre, concis et compréhensible. Par exemple, jetez un coup d'œil à la chaîne if.else à l'intérieur de la fonction ci-dessous :

La logique est simple. Le premier si garantit que l'instruction personne possède un objet âge (sinon il ne s'agit pas d'une personne). A l'intérieur de cette propriété si vous avez ajouté un bloc si.autre.si qui dit essentiellement :

Si la personne a moins de 18 ans, elle est trop jeune pour prendre un verre. Si elle a moins de 21 ans, elle n'a pas encore l'âge légal pour boire aux États-Unis. Dans le cas contraire, elle peut légalement boire un verre.

Bien que le code ci-dessus soit valide, l'imbrication rend le code plus difficile à comprendre. Heureusement, vous pouvez remanier le code pour le rendre plus concis et plus facile à lire en utilisant une balise pour rendre le code plus concis et plus lisible.

Clauses de garde

Chaque fois que vous avez une clause de garde si qui englobe tout votre code, vous pouvez utiliser une instruction clause de garde pour supprimer toutes les imbrications :

Au début de la fonction, vous avez défini une clause de garde indiquant que si cette condition spécifique n'est pas remplie, vous voulez quitter la fonction canDrinkBetter() immédiatement (et afficher "You're not a person" sur la console).

Mais si la condition est remplie, vous évaluez la fonction if.else pour voir quel bloc est applicable. L'exécution du code donne le même résultat que le premier exemple, mais ce code est plus facile à lire.

N'utilisez pas de retour unique

Vous pourriez dire que la technique ci-dessus n'est pas un bon principe de programmation parce que nous utilisons plusieurs retours dans la même fonction, et vous pensez qu'il est préférable d'avoir une seule déclaration de retour (aka, politique de retour unique).

Mais c'est une très mauvaise façon d'écrire du code parce qu'elle vous oblige à vous retrouver dans les mêmes situations d'imbrication folles que nous avons vues dans le premier exemple de code.

Cela dit, vous pouvez utiliser plusieurs retourner pour simplifier davantage votre code (et vous débarrasser de l'imbrication) :

Ce code fonctionne de la même manière que les deux exemples précédents, et il est aussi un peu plus propre.

Extraire des fonctions pour un code plus propre

Notre dernier bloc de code était plus propre que les deux premiers, mais il n'est toujours pas aussi bon qu'il pourrait l'être.

Au lieu d'avoir un long if.else à l'intérieur d'une fonction, vous pouvez créer une fonction séparée canDrinkResult() qui effectue la vérification pour vous et renvoie le résultat :

Ensuite, à l'intérieur de la fonction principale, tout ce que vous avez à faire est d'appliquer la clause de garde avant d'appeler la fonction canDrinkResult() (avec l'âge comme paramètre) pour obtenir le résultat :

Dans ce cas, vous avez délégué la vérification de l'âge à une fonction distincte et ne l'avez appelée qu'en cas de besoin. Cela rend votre code plus concis et plus simple à utiliser que tous les exemples précédents.

Tenez vous à l'écart des déclarations conditionnelles

Vous avez appris à remanier des chaînes conditionnelles complexes et imbriquées en chaînes plus courtes et plus faciles à lire à l'aide de clauses de garde et de la technique d'extraction de fonction.

Essayez de conserver la clause else de vos conditionnelles en utilisant à la fois les clauses de garde et la technique d'extraction de fonction.

Si vous n'avez pas encore l'habitude d'utiliser l'instruction JavaScript if.else commencez par les principes de base.

S'abonner à notre lettre d'information