Hvordan forenkle if-utsagn i JavaScript

Betingede utsagn er en viktig del av JavaScript. De lar deg kjøre kode basert på om en gitt betingelse er sann eller usann, og du kan neste flere eller hvis uttalelser (og en ellers) for å evaluere mer enn én tilstand.

Men her er problemet - når du skriver komplekst hvis... annet kjeder, kan ting fort bli rotete, og du kan lett ende opp med kode som er vanskelig å lese og forstå.

La oss lære hvordan du refaktoriserer lang og kompleks hvis... annet hvis... annet betingede kjeder til en mer kortfattet, renere og lettere å forstå versjon.

Komplekse if...else Kjeder

Når du skriver komplekse if...else-setninger i JavaScript, er det viktig at du skriver ren, kortfattet og forståelig kode. Ta for eksempel en titt på hvis... annet betinget kjede i funksjonen nedenfor:

funksjonkanDrikke(person) {
hvis(person?.alder != null) {
hvis(person.alder < 18) {
konsoll.Logg("Fortsatt for ung")
 } ellershvis(person.alder < 21) {
konsoll.Logg("Ikke i USA")
 } ellers





instagram viewer
 {
konsoll.Logg("Får lov til å drikke")
 }
 } ellers {
konsoll.Logg("Du er ikke en person")
 }
}
konst person = {
 alder: 22
}
canDrink (person)

Logikken her er enkel. Den første hvis uttalelse sikrer at person objektet har en alder eiendom (ellers er han eller hun ikke en person). Inni det hvis blokk, har du lagt til en hvis... annet... hvis kjede som i utgangspunktet sier:

Hvis personen er yngre enn 18, er de for unge til å få en drink. Hvis de er yngre enn 21, er de fortsatt under den lovlige drikkealderen i USA. Ellers kan de lovlig få en drink.

Selv om koden ovenfor er gyldig, gjør nesting det vanskeligere for deg å forstå koden. Heldigvis kan du refaktorere koden til å være kortfattet og lettere å lese ved å bruke en vaktparagraf.

Vaktklausuler

Når som helst du har en hvis uttalelse som omslutter hele koden din, kan du bruke en vaktparagraf for å fjerne all hekking:

funksjoncanDrinkBedre() {
hvis(person?.alder == null) komme tilbakekonsoll.Logg("Du er ikke en person") 
hvis(person.alder < 18) {
konsoll.Logg("Fortsatt for ung")
 } ellershvis(person.alder < 21) {
konsoll.Logg("Ikke i USA")
 } ellers {
konsoll.Logg("Får lov til å drikke")
 }
}

Ved starten av funksjonen definerte du en vaktklausul som sier at hvis den spesifikke betingelsen ikke er oppfylt, vil du avslutte canDrinkBetter() funksjon umiddelbart (og logg "Du er ikke en person" på konsollen).

Men hvis betingelsen er oppfylt, vurderer du hvis... annet kjede for å se hvilken blokk som er aktuell. Å kjøre koden gir deg samme resultat som det første eksemplet, men denne koden er lettere å lese.

Ikke bruk en enkelt retur

Du kan hevde at teknikken ovenfor ikke er en godt programmeringsprinsipp fordi vi bruker flere returer i samme funksjon, og du mener det er bedre å bare ha én returerklæring (aka, enkelt returpolicy).

Men dette er en forferdelig måte å skrive kode på fordi det tvinger deg inn i de samme sprø hekkesituasjonene som vi så i den første kodeeksemplet.

Med det sagt, kan du bruke flere komme tilbake uttalelser for å forenkle koden din ytterligere (og bli kvitt hekkingen):

funksjoncanDrinkBedre() {
hvis(person?.alder == null) komme tilbakekonsoll.Logg("Du er ikke en person") 
hvis(person.alder < 18) {
konsoll.Logg("Fortsatt for ung")
komme tilbake
 } 
hvis(person.alder < 21) {
konsoll.Logg("Ikke i USA")
komme tilbake
 }
konsoll.Logg("Får lov til å drikke") 
}

Denne koden fungerer på samme måte som de to foregående eksemplene, og den er også litt renere.

Pakk ut funksjoner for renere kode

Vår siste kodeblokk var renere enn de to første, men den er fortsatt ikke så god som den kunne vært.

I stedet for å ha en lang hvis... annet kjede inne i en funksjon, kan du lage en egen funksjon canDrinkResult() som sjekker for deg og returnerer resultatet:

funksjoncanDrinkResult(alder) {
hvis(alder < 18) komme tilbake"Fortsatt for ung"
hvis(alder < 21) komme tilbake"Ikke i USA"
komme tilbake"Får lov til å drikke"
}

Så inne i hovedfunksjonen er alt du trenger å gjøre først å bruke vaktklausulen før du ringer canDrinkResult() funksjon (med alderen som parameter) for å få resultatet:

funksjoncanDrinkBedre() { 
hvis(person?.alder == null) komme tilbakekonsoll.Logg("Du er ikke en person") 
la resultat = canDrinkResult (person.age)
konsoll.log (resultat)
}

Så i dette tilfellet delegerte du oppgaven med å sjekke drikkealderen til en egen funksjon og ringte den bare ved behov. Dette gjør koden din kortfattet og mer enkel å jobbe med enn alle de tidligere eksemplene.

Hold annet unna betingede erklæringer

Du har lært hvordan du kan omforme komplekse, nestede betingede kjeder til kortere, lettere å lese ved å bruke vaktklausuler og funksjonsekstraksjonsteknikken.

Prøv å beholde ellers utsagn vekk fra betingelsene dine så mye som mulig ved å bruke både guard-klausuler og funksjonsekstraksjonsteknikken.

Hvis du fortsatt er ny på å bruke JavaScript hvis... annet uttalelse, start med det grunnleggende.