Programmet ditt lagrer en verdi i en variabel, men hva gjør du når koden skal oppføre seg forskjellig avhengig av den verdien? Kanskje du vil vise en melding bare hvis brukeren har fylt inn riktig passord, eller endre fargen på en knapp hvis handlekurven er tom. Til dette bruker du if og else i JavaScript. Det er slik programmet ditt tar beslutninger.
Slik fungerer en if-setning
En if-setning sjekker om en betingelse er sann. Hvis den er det, kjøres koden innenfor krøllparentesene. Hvis ikke, hopper programmet over den kodeblokken og fortsetter videre.
let alder = 20
if (alder >= 18) {
console.log("Du er myndig")
}
Her sjekker JavaScript om verdien i variabelen alder er 18 eller høyere. Siden 20 er større enn 18, er betingelsen sann, og teksten skrives ut i konsolen. Hadde alder vært 15, ville ingenting skjedd.
Delen mellom parentesene kalles en logisk test. Den evaluerer alltid til enten true eller false. Kodeblokken mellom krøllparentesene kjøres bare når resultatet er true.
Else gir et alternativ
Ofte trenger du å gjøre noe annet når betingelsen er usann. Det er her else kommer inn. Else legger til en kodeblokk som kjøres når if-testen feiler.
let dag = "onsdag"
if (dag === "fredag") {
console.log("Det er helg!")
} else {
console.log("Det er ikke helg enda")
}
Siden dag inneholder "onsdag" og ikke "fredag", kjøres koden i else-blokken. Brukeren får beskjeden "Det er ikke helg enda". Uten else ville programmet gitt et tomt resultat, og det er sjelden god brukeropplevelse.
Else if for flere betingelser
Virkeligheten har sjelden bare to utfall. Kanskje du vil sjekke om det er fredag, lørdag eller søndag, og gi forskjellige meldinger for hver dag. Da bruker du else if mellom if og else.
if (dag === "fredag") {
console.log("Snart helg!")
} else if (dag === "lordag") {
console.log("Det er lordag!")
} else if (dag === "sondag") {
console.log("Det er sondag!")
} else {
console.log("Det er hverdag")
}
JavaScript starter på toppen og sjekker hver betingelse i rekkefølge. Så snart den finner en som er sann, kjører den den kodeblokken og hopper over resten. Else-blokken nederst fungerer som et sikkerhetsnett som fanger opp alt som ikke matchet noen av betingelsene over.
Du kan lenke sammen så mange else if-blokker du vil, men mange betingelser etter hverandre kan gjøre koden vanskelig å lese. Har du mer enn fire eller fem, bør du vurdere om det finnes en ryddigere løsning.
If else JavaScript og sammenligningsoperatorer
For at if-setningen skal fungere, trenger du en betingelse som evaluerer til true eller false. De vanligste verktøyene for dette er sammenligningsoperatorer.
- === sjekker om to verdier er like (inkludert datatype)
- !== sjekker om to verdier er ulike
- > og < sjekker om en verdi er større eller mindre enn en annen
- >= og <= inkluderer også grenseverdien
En vanlig feil er å bruke enkelt liktegn (=) i stedet for trippelt liktegn (===) i betingelsen. Enkelt liktegn tilordner en verdi. Skriver du if (dag = "fredag") i stedet for if (dag === "fredag"), endrer du verdien av variabelen dag til "fredag" i stedet for å sammenligne den. Betingelsen blir sann uansett, og koden oppfører seg uforutsigbart. Denne feilen er spesielt utsatt fordi den ikke alltid gir en tydelig feilmelding.
Dobbelt vs. trippelt liktegn
JavaScript har to måter å sjekke likhet: == og ===. Dobbelt liktegn sammenligner bare verdien. Trippelt liktegn sammenligner både verdi og datatype.
5 == "5" er true (begge har verdien 5)
5 === "5" er false (den ene er et tall, den andre er en streng)
Bruk alltid trippelt liktegn (===). Det er tryggere fordi du unngår uventede typekonverteringer. I koden fra MDN sin dokumentasjon anbefales trippelt liktegn som standardvalg.
Nøstede if-setninger
Noen ganger må du sjekke en betingelse inne i en annen betingelse. Det kalles nøsting. Et praktisk eksempel: du vil sjekke om det er helg, men også om det er ettermiddag på fredag.
if (dag === "fredag" || dag === "lordag" || dag === "sondag") {
if (dag === "fredag" && klokke < 16) {
console.log("Snart helg!")
} else {
console.log("Det er helg!")
}
} else {
console.log("Det er ikke helg")
}
Her brukes || (eller) for å sjekke flere dager, og && (og) for å kombinere to betingelser. Den ytre if-setningen sjekker om det er en helgedag. Den indre sjekker om det er fredag og før klokken 16. Innrykk (indentation) er kritisk for å holde nøstede if-setninger lesbare. Hvert nytt nivå rykker inn med to eller fire mellomrom.
Neste steg
Nå som du kan styre programflyten med if og else, er neste steg å forstå operatorer i JavaScript bedre. Sammenligningsoperatorer og logiske operatorer som du har sett i denne artikkelen er bare en del av bildet. Trenger du å friske opp grunnleggende variabler og datatyper, har vi en egen artikkel om variabler i JavaScript.
Videoen til denne artikkelen er hentet fra kurset JavaScript for nybegynnere med kursholder Lars Vidar Nordli. Kurset går grundig gjennom if else i JavaScript, switch-setninger og andre måter å kontrollere programflyten på, med eksempler du koder selv underveis.
