Des instructions if plus simples signifient invariablement un code JavaScript plus propre.

Les instructions conditionnelles sont une partie essentielle de JavaScript. Ils vous permettent d'exécuter du code selon qu'une condition donnée est vraie ou fausse, et vous pouvez imbriquer plusieurs sinon si déclarations (et un autre) pour évaluer plus d'une condition.

Mais voici le problème - lors de l'écriture complexe sinon chaînes, les choses peuvent rapidement devenir désordonnées et vous pouvez facilement vous retrouver avec un code difficile à lire et à comprendre.

Apprenons à refactoriser long et complexe si... sinon si... sinon chaînes conditionnelles dans 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 que vous écriviez code propre, concis et compréhensible. Par exemple, jetez un oeil à la sinon chaîne conditionnelle à l'intérieur de la fonction ci-dessous :

instagram viewer 
fonctionpeutBoire(personne) {
si(personne?.age != nul) {
si(personne.âge < 18) {
console.enregistrer("Encore trop jeune")
 } autresi(personne.age < 21) {
console.enregistrer("Pas aux États-Unis")
 } autre {
console.enregistrer("Autorisé à boire")
 }
 } autre {
console.enregistrer("Tu n'es pas une personne")
 }
}
constante personne = {
 âge: 22
}
canDrink (personne)

La logique ici est simple. La première si déclaration assure que le personne l'objet a un âge propriété (sinon il ou elle n'est pas une personne). A l'intérieur de ça si bloc, vous avez ajouté un si... sinon... si chaîne qui dit essentiellement :

Si la personne a moins de 18 ans, elle est trop jeune pour prendre un verre. S'ils ont moins de 21 ans, ils n'ont toujours pas atteint l'âge légal pour boire aux États-Unis. Sinon, ils peuvent légalement prendre un verre.

Bien que le code ci-dessus soit valide, l'imbrication rend plus difficile la compréhension du code. Heureusement, vous pouvez refactoriser le code pour qu'il soit concis et plus facile à lire en utilisant un clause de garde.

Clauses de garde

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

fonctionpeutboiremieux() {
si(personne?.age == nul) retourconsole.enregistrer("Tu n'es pas une personne") 
si(personne.âge < 18) {
console.enregistrer("Encore trop jeune")
 } autresi(personne.age < 21) {
console.enregistrer("Pas aux États-Unis")
 } autre {
console.enregistrer("Autorisé à boire")
 }
}

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 souhaitez quitter la peutboiremieux() fonctionner immédiatement (et enregistrer "Vous n'êtes pas une personne" sur la console).

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

N'utilisez pas une seule déclaration

Vous pourriez dire que la technique ci-dessus n'est pas une 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 (c'est-à-dire une politique de retour unique).

Mais c'est une façon terrible d'écrire du code car cela vous oblige à vivre les mêmes situations d'imbrication folles que celles que nous avons vues dans le premier exemple de code.

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

fonctionpeutboiremieux() {
si(personne?.age == nul) retourconsole.enregistrer("Tu n'es pas une personne") 
si(personne.âge < 18) {
console.enregistrer("Encore trop jeune")
retour
 } 


si(personne.âge < 21) {
console.enregistrer("Pas aux États-Unis")
retour
 }
console.enregistrer("Autorisé à boire") 
}

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

Fonctions d'extraction 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 une longue sinon chaîne à l'intérieur d'une fonction, vous pouvez créer une fonction distincte canDrinkResult() qui fait la vérification pour vous et renvoie le résultat :

fonctionpeutBoireRésultat(âge) {
si(âge < 18) retour"Encore trop jeune"
si(âge < 21) retour"Pas aux États-Unis"
retour"Autorisé à boire"
}

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

fonctionpeutboiremieux() { 
si(personne?.age == nul) retourconsole.enregistrer("Tu n'es pas une personne") 
laisser result = canDrinkResult (personne.age)
console.log (résultat)
}

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

Éloignez-vous des instructions conditionnelles

Vous avez appris à refactoriser 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 fonctions.

Essayez de garder le autre loin de vos conditionnels autant que possible en utilisant à la fois des clauses de garde et la technique d'extraction de fonction.

Si vous êtes encore novice dans l'utilisation de JavaScript sinon déclaration, commencez par les bases.