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.

Voir aussi :  Utiliser Initializr pour générer une nouvelle application Spring Boot

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) :

Voir aussi :  useEffect, useLayoutEffect et useEffectEvent : Une comparaison des hooks de récupération de données dans React

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.

Voir aussi :  Comment déployer une API REST Express.js sur Render : Une alternative à Heroku

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

Comment réduire les instructions if en JavaScript ?

Arrêtez de mettre autant d’instructions If dans votre JavaScript

  • Opérateurs ternaires.
  • Les instructions Switch.
  • Opérateurs logiques (&& et ||)
  • Cartes de recherche.

Comment simplifier plusieurs instructions if en JavaScript ?

Comment simplifier ? Vous pouvez utiliser une instruction Switch au lieu de if – else. Voir également AND OR et d’autres opérateurs logiques. Ils sont également utiles pour combiner différentes conditions if-else en une seule condition.

Qu’est-ce que l’instruction if abrégée en JavaScript ?

JavaScript nous offre une autre façon d’écrire une instruction if lorsque les conditions true et false attribuent simplement des valeurs différentes à la même variable. Cette méthode plus courte omet le mot-clé if ainsi que les accolades autour des blocs (qui sont facultatives pour les instructions simples).

Comment vérifier 3 conditions dans une instruction if en JavaScript ?

L’opérateur conditionnel (ternaire) est le seul opérateur JavaScript qui prend trois opérandes : une condition suivie d’un point d’interrogation ( ? ), puis une expression à exécuter si la condition est vraie suivie de deux points ( : ), et enfin l’expression à exécuter si la condition est fausse.

Cliquez pour évaluer cet article !
[Total: Moyenne : ]

Laisser un commentaire

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