Enklere, hvis udsagn uvægerligt betyder renere JavaScript-kode.

Betingede erklæringer er en væsentlig del af JavaScript. De lader dig udføre kode baseret på, om en given betingelse er sand eller falsk, og du kan indlejre flere elseif udsagn (og en andet) for at evaluere mere end én betingelse.

Men her er problemet - når du skriver komplekst hvis ellers kæder, kan det hurtigt blive rodet, og du kan nemt ende med kode, der er svær at læse og forstå.

Lad os lære, hvordan man refaktoriserer lang og kompleks hvis...elseif...else betingede kæder til en mere kortfattet, renere og lettere at forstå version.

Komplekse if...else Kæder

Når du skriver komplekse if...else-sætninger i JavaScript, er det vigtigt, at du skriver ren, kortfattet og forståelig kode. Tag for eksempel et kig på hvis ellers betinget kæde inde i funktionen nedenfor:

fungerekanDrikke(person) {
hvis(person?.alder != nul) {
hvis(person.alder < 18) {
konsol.log("Stadig for ung")
} andethvis(person.alder < 21) {
konsol.log("Ikke i USA")
} andet {
konsol.log("Få lov til at drikke")
}
} andet {
konsol.log("Du er ikke en person")
}
}

konst person = {
alder: 22
}

canDrink (person)

Logikken her er enkel. Den første hvis erklæring sikrer, at person objekt har en alder ejendom (ellers er han eller hun ikke en person). Inden i det hvis blok, har du tilføjet en hvis... andet... hvis kæde, der grundlæggende siger:

Hvis personen er yngre end 18, er de for unge til at få en drink. Hvis de er yngre end 21, er de stadig under den lovlige alkoholalder i USA. Ellers kan de lovligt få en drink.

Selvom ovenstående kode er gyldig, gør indlejringen det sværere for dig at forstå koden. Heldigvis kan du omstrukturere koden til at være kortfattet og lettere at læse ved at bruge en vagtklausul.

Vagtklausuler

Når som helst du har en hvis erklæring, der omslutter hele din kode, kan du bruge en vagtklausul for at fjerne al indlejring:

fungerecanDrinkBedre() {
hvis(person?.alder == nul) Vend tilbagekonsol.log("Du er ikke en person")

hvis(person.alder < 18) {
konsol.log("Stadig for ung")
} andethvis(person.alder < 21) {
konsol.log("Ikke i USA")
} andet {
konsol.log("Få lov til at drikke")
}
}

Ved starten af ​​funktionen definerede du en vagtklausul, der siger, at hvis den specifikke betingelse ikke er opfyldt, vil du forlade canDrinkBetter() funktion med det samme (og log "Du er ikke en person" på konsollen).

Men hvis betingelsen er opfyldt, vurderer du hvis ellers kæde for at se, hvilken blok der er relevant. Kørsel af koden giver dig det samme resultat som det første eksempel, men denne kode er lettere at læse.

Brug ikke en enkelt retur

Du kan hævde, at ovenstående teknik ikke er en godt programmeringsprincip fordi vi bruger flere returneringer i den samme funktion, og du mener, at det er bedre kun at have én returerklæring (også kaldet enkelt returneringspolitik).

Men dette er en frygtelig måde at skrive kode på, fordi det tvinger dig ud i de samme skøre indlejringssituationer, som vi så i den første kodeeksempel.

Med det sagt, kan du bruge flere Vend tilbage sætninger for yderligere at forenkle din kode (og slippe af med indlejringen):

fungerecanDrinkBedre() {
hvis(person?.alder == nul) Vend tilbagekonsol.log("Du er ikke en person")

hvis(person.alder < 18) {
konsol.log("Stadig for ung")
Vend tilbage
}

hvis(person.alder < 21) {
konsol.log("Ikke i USA")
Vend tilbage
}

konsol.log("Få lov til at drikke")
}

Denne kode fungerer på samme måde som de to foregående eksempler, og den er også en lille smule renere.

Uddrag funktioner til renere kode

Vores sidste kodeblok var renere end de to første, men den er stadig ikke så god, som den kunne være.

I stedet for at have en lang hvis ellers kæde inde i en funktion, kan du oprette en separat funktion canDrinkResult() der kontrollerer for dig og returnerer resultatet:

fungerecanDrinkResult(alder) {
hvis(alder < 18) Vend tilbage"Stadig for ung"
hvis(alder < 21) Vend tilbage"Ikke i USA"
Vend tilbage"Få lov til at drikke"
}

Så inde i hovedfunktionen er alt, hvad du skal gøre, først at anvende vagtklausulen, før du ringer til canDrinkResult() funktion (med alderen som parameter) for at få resultatet:

fungerecanDrinkBedre() { 
hvis(person?.alder == nul) Vend tilbagekonsol.log("Du er ikke en person")

lade resultat = canDrinkResult (person.age)
konsol.log (resultat)
}

Så i dette tilfælde uddelegerede du opgaven med at kontrollere drikkealderen til en separat funktion og kaldte den kun, når det var nødvendigt. Dette gør din kode kortfattet og mere ligetil at arbejde med end alle de foregående eksempler.

Hold andet væk fra betingede erklæringer

Du har lært, hvordan du omformer komplekse, indlejrede betingede kæder til kortere, lettere at læse ved hjælp af guard-klausuler og funktionsekstraktionsteknikken.

Prøv at beholde andet udsagn væk fra dine betingelser så meget som muligt ved at bruge både guard-klausuler og funktionsekstraktionsteknikken.

Hvis du stadig er ny til at bruge JavaScript hvis ellers erklæring, start med det grundlæggende.