Hoe if-verklaringen in JavaScript te vereenvoudigen

Voorwaardelijke uitspraken zijn een essentieel onderdeel van JavaScript. Ze laten je code uitvoeren op basis van het feit of een bepaalde voorwaarde waar of onwaar is, en je kunt er meerdere nesten anders verklaringen (en een anders) om meer dan één voorwaarde te evalueren.

Maar hier is het probleem - bij het schrijven van complexe als... anders ketens, dingen kunnen snel rommelig worden en je kunt gemakkelijk eindigen met code die moeilijk te lezen en te begrijpen is.

Laten we leren hoe we lang en complex kunnen refactoren als... anders als... anders voorwaardelijke ketens tot een beknoptere, schonere en gemakkelijker te begrijpen versie.

Complexe if...else ketens

Bij het schrijven van complexe if...els-statements in JavaScript, is het essentieel dat u schrijft schone, beknopte en begrijpelijke code. Kijk bijvoorbeeld eens naar de als... anders voorwaardelijke keten binnen de onderstaande functie:

functiekanDrinken(persoon) 

instagram viewer
{
als(persoon?.leeftijd != nul) {
als(persoon.leeftijd < 18) {
troosten.log("Nog te jong")
 } andersals(persoon.leeftijd < 21) {
troosten.log("Niet in de VS")
 } anders {
troosten.log("Mag drinken")
 }
 } anders {
troosten.log("Je bent geen persoon")
 }
}
const persoon = {
 leeftijd: 22
}
canDrink (persoon)

De logica hier is simpel. De eerste als verklaring zorgt ervoor dat de persoon voorwerp heeft een leeftijd eigendom (anders is hij of zij geen persoon). Daarbinnen als blok, je hebt een toegevoegd als...anders...als ketting die eigenlijk zegt:

Als de persoon jonger is dan 18 jaar, is hij te jong om iets te drinken te krijgen. Als ze jonger zijn dan 21, zijn ze nog steeds onder de wettelijke minimumleeftijd voor alcoholconsumptie in de Verenigde Staten. Anders kunnen ze legaal een drankje krijgen.

Hoewel de bovenstaande code geldig is, maakt het nesten het moeilijker voor u om de code te begrijpen. Gelukkig kun je de code herstructureren om beknopt en gemakkelijker leesbaar te maken door een wacht clausule.

Bewakingsclausules

Elke keer dat je een als instructie die al uw code bevat, kunt u een wacht clausule om alle nesten te verwijderen:

functiecanDrinkBetter() {
als(persoon?.leeftijd == nul) opbrengsttroosten.log("Je bent geen persoon") 
als(persoon.leeftijd < 18) {
troosten.log("Nog te jong")
 } andersals(persoon.leeftijd < 21) {
troosten.log("Niet in de VS")
 } anders {
troosten.log("Mag drinken")
 }
}

Aan het begin van de functie heb je een beveiligingsclausule gedefinieerd waarin staat dat als niet aan die specifieke voorwaarde wordt voldaan, je de functie wilt verlaten. canDrinkBetter() functie onmiddellijk (en log "Je bent geen persoon" op de console).

Maar als aan de voorwaarde is voldaan, evalueer je de als... anders keten om te zien welk blok van toepassing is. Het uitvoeren van de code geeft hetzelfde resultaat als het eerste voorbeeld, maar deze code is gemakkelijker te lezen.

Gebruik geen enkele retour

Je zou kunnen beweren dat de bovenstaande techniek geen goed programmeerprincipe omdat we meerdere retouren gebruiken in dezelfde functie, en u denkt dat het beter is om slechts één retourverklaring te hebben (ook wel één retourbeleid genoemd).

Maar dit is een vreselijke manier om code te schrijven, omdat het je dwingt tot dezelfde gekke nestsituaties die we in het eerste codevoorbeeld zagen.

Dat gezegd hebbende, je kunt er meerdere gebruiken opbrengst verklaringen om uw code verder te vereenvoudigen (en het nesten te verwijderen):

functiecanDrinkBetter() {
als(persoon?.leeftijd == nul) opbrengsttroosten.log("Je bent geen persoon") 
als(persoon.leeftijd < 18) {
troosten.log("Nog te jong")
opbrengst
 } 
als(persoon.leeftijd < 21) {
troosten.log("Niet in de VS")
opbrengst
 }
troosten.log("Mag drinken") 
}

Deze code werkt hetzelfde als de twee vorige voorbeelden en is ook een beetje schoner.

Extraheer functies voor schonere code

Ons laatste codeblok was schoner dan de eerste twee, maar het is nog steeds niet zo goed als het zou kunnen zijn.

In plaats van een lange als... anders keten binnen één functie, kunt u een afzonderlijke functie maken canDrinkResult() dat doet de controle voor u en retourneert het resultaat:

functiecanDrinkResult(leeftijd) {
als(leeftijd < 18) opbrengst"Nog te jong"
als(leeftijd < 21) opbrengst"Niet in de VS"
opbrengst"Mag drinken"
}

Vervolgens hoeft u binnen de hoofdfunctie alleen eerst de guard-clausule toe te passen voordat u de canDrinkResult() functie (met de leeftijd als parameter) om het resultaat te krijgen:

functiecanDrinkBetter() { 
als(persoon?.leeftijd == nul) opbrengsttroosten.log("Je bent geen persoon") 
laten resultaat = canDrinkResult (persoon.leeftijd)
troosten.log (resultaat)
}

Dus in dit geval delegeerde u de taak om de drinkleeftijd te controleren naar een aparte functie en riep u deze alleen op wanneer dat nodig was. Dit maakt uw code beknopt en eenvoudiger om mee te werken dan alle voorgaande voorbeelden.

Houd anders weg van voorwaardelijke verklaringen

U hebt geleerd hoe u complexe, geneste voorwaardelijke ketens kunt herstructureren tot kortere, gemakkelijker te lezen ketens met behulp van beveiligingsclausules en de functie-extractietechniek.

Probeer de anders statement zoveel mogelijk weg van uw conditionals door zowel guard-clausules als de functie-extractietechniek te gebruiken.

Als u nog niet bekend bent met het gebruik van JavaScript als... anders statement, begin bij de basis.