Cum să simplificați declarațiile if în JavaScript

Declarațiile condiționate sunt o parte esențială a JavaScript. Vă permit să executați cod în funcție de faptul că o anumită condiție este adevărată sau falsă și puteți imbrica mai multe elseif declarații (și an altfel) pentru a evalua mai mult de o condiție.

Dar aici este problema - când scrieți complex daca...altfel lanțuri, lucrurile se pot dezordona rapid și puteți ajunge cu ușurință la un cod greu de citit și de înțeles.

Să învățăm cum să refactorăm lung și complex dacă...altfel dacă...altfel lanțuri condiționate într-o versiune mai concisă, mai curată și mai ușor de înțeles.

Complex dacă...altfel Lanțuri

Când scrieți declarații complexe if...else în JavaScript, este esențial să scrieți cod curat, concis și ușor de înțeles. De exemplu, aruncați o privire la daca...altfel lanț condiționat în interiorul funcției de mai jos:

funcţiecanDrink(persoană) {
dacă(persoana?.varsta != nul) {
dacă(persoană.vârstă < 18) {
consolă





instagram viewer
.Buturuga(„Încă prea tânăr”)
 } altfeldacă(persoana.varsta < 21) {
consolă.Buturuga(„Nu în SUA”)
 } altfel {
consolă.Buturuga(„Permis să bea”)
 }
 } altfel {
consolă.Buturuga(„Nu ești o persoană”)
 }
}
const persoana = {
 varsta: 22
}
canDrink (persoană)

Logica aici este simplă. Primul dacă declarația asigură că persoană obiectul are o vârstă proprietate (altfel el sau ea nu este o persoană). Înăuntrul ei dacă bloc, ați adăugat un dacă...altfel...dacă lanț care practic spune:

Dacă persoana are mai puțin de 18 ani, este prea tânără pentru a bea ceva. Dacă au mai puțin de 21 de ani, sunt încă sub vârsta legală pentru consumul de alcool în Statele Unite. În caz contrar, pot lua în mod legal o băutură.

Deși codul de mai sus este valid, imbricarea vă îngreunează înțelegerea codului. Din fericire, puteți refactoriza codul pentru a fi concis și mai ușor de citit utilizând a clauza de pază.

Clauze de gardă

Oricând ai un dacă declarație care cuprinde întregul cod, puteți utiliza a clauza de pază pentru a elimina toate cuiburile:

funcţiecanDrinkBetter() {
dacă(persoana?.varsta == nul) întoarcereconsolă.Buturuga(„Nu ești o persoană”) 
dacă(persoană.vârstă < 18) {
consolă.Buturuga(„Încă prea tânăr”)
 } altfeldacă(persoana.varsta < 21) {
consolă.Buturuga(„Nu în SUA”)
 } altfel {
consolă.Buturuga(„Permis să bea”)
 }
}

La începutul funcției, ați definit o clauză de pază care afirmă că, dacă acea condiție specifică nu este îndeplinită, doriți să părăsiți canDrinkBetter() funcționează imediat (și înregistrează „Nu ești o persoană” pe consolă).

Dar dacă condiția este îndeplinită, evaluați daca...altfel lanț pentru a vedea ce bloc este aplicabil. Rularea codului vă oferă același rezultat ca primul exemplu, dar acest cod este mai ușor de citit.

Nu folosiți o singură retur

Ați putea argumenta că tehnica de mai sus nu este a bun principiu de programare deoarece folosim mai multe returnări în aceeași funcție și credeți că este mai bine să aveți o singură declarație de returnare (alias, politica de returnare unică).

Dar acesta este un mod groaznic de a scrie cod, deoarece te forțează în aceleași situații nebunești de imbricare pe care le-am văzut în primul exemplu de cod.

Acestea fiind spuse, puteți utiliza mai multe întoarcere declarații pentru a simplifica și mai mult codul (și a scăpa de imbricare):

funcţiecanDrinkBetter() {
dacă(persoana?.varsta == nul) întoarcereconsolă.Buturuga(„Nu ești o persoană”) 
dacă(persoană.vârstă < 18) {
consolă.Buturuga(„Încă prea tânăr”)
întoarcere
 } 
dacă(persoană.vârstă < 21) {
consolă.Buturuga(„Nu în SUA”)
întoarcere
 }
consolă.Buturuga(„Permis să bea”) 
}

Acest cod funcționează la fel ca cele două exemple anterioare și este, de asemenea, puțin mai curat.

Extrageți funcții pentru codul Cleaner

Ultimul nostru bloc de cod a fost mai curat decât primele două, dar încă nu este atât de bun pe cât ar putea fi.

În loc să aibă un lung daca...altfel lanț în interiorul unei singure funcții, puteți crea o funcție separată canDrinkResult() care face verificarea pentru tine și returnează rezultatul:

funcţiecanDrinkResult(vârstă) {
dacă(varsta < 18) întoarcere„Încă prea tânăr”
dacă(varsta < 21) întoarcere„Nu în SUA”
întoarcere„Permis să bea”
}

Apoi, în interiorul funcției principale, tot ce trebuie să faceți este să aplicați mai întâi clauza de gard înainte de a apela canDrinkResult() funcția (cu vârsta ca parametru) pentru a obține rezultatul:

funcţiecanDrinkBetter() { 
dacă(persoana?.varsta == nul) întoarcereconsolă.Buturuga(„Nu ești o persoană”) 
lăsa rezultat = canDrinkResult (persoană.vârstă)
consolă.log (rezultat)
}

Deci, în acest caz, ați delegat sarcina de a verifica vârsta de băut unei funcții separate și ați apelat-o doar atunci când este necesar. Acest lucru face codul dvs. concis și mai simplu de lucrat decât toate exemplele anterioare.

Păstrați altceva departe de declarațiile condiționate

Ați învățat cum să refactorizați lanțuri condiționale complexe, imbricate, în altele mai scurte și mai ușor de citit, folosind clauze de gardă și tehnica de extracție a funcției.

Încercați să păstrați altfel declarație departe de condiționalele dvs. cât mai mult posibil utilizând atât clauze de gardă, cât și tehnica de extracție a funcției.

Dacă sunteți încă nou în utilizarea JavaScript daca...altfel declarație, începeți cu elementele de bază.