En JavaScript `switch`-setning er en type kontrollstruktur som styrer flyten i et program basert på betingelser. Den er spesielt nyttig når du har behov for å lage kodeblokker som skal utføres basert på mange ulike verdier.
Denne veiledningen gir en detaljert forklaring av hvordan `switch`-setningen fungerer og hvordan den kan brukes effektivt. I tillegg vil vi sammenligne den med andre måter å håndtere betingelser på, som `if`-setninger og ternære operatorer, for å gi deg et grunnlag for å velge den mest hensiktsmessige metoden i ulike situasjoner.
Hva er en `switch`-setning i JavaScript?
En JavaScript `switch`-setning brukes til å velge hvilken kode som skal kjøres basert på verdien av et uttrykk. Den er en av to metoder for å håndtere betinget kodeutførelse i JavaScript.
Den andre er `if`-setningen, og i tillegg finnes ternære operatorer. `switch`-setningen har likhetstrekk med begge disse, men har også noen unike egenskaper som gjør den bedre egnet i visse tilfeller. Vi skal gå grundig gjennom disse forskjellene.
Hvordan bruke en JavaScript `switch`-setning
I denne delen skal vi se på hvordan `switch`-setningen er bygget opp og hvordan du kan bruke den i praksis. For å følge eksemplene trenger du tilgang til en JavaScript-kompilator. En enkel løsning er å bruke denne online JavaScript-kompilatoren. Alternativt kan du se vår artikkel om de beste online JavaScript IDE-ene.
Generell syntaks
Den generelle strukturen til en `switch`-setning er som følger:
switch(<uttrykk>) {
case <verdi 1>:
<setninger>
break;
case <verdi 2>:
<setninger>
break;
default:
<setninger>
}
`switch`-nøkkelordet markerer starten på `switch`-blokken. Inne i parentesen setter du inn et JavaScript-uttrykk. Et uttrykk kan være alt som evalueres til en verdi, for eksempel strenger, tall, variabler eller funksjonskall.
Selve `switch`-blokken er omsluttet av krøllparenteser. Inne i blokken finnes ulike `case`-elementer. Hver `case` har en verdi og en samling setninger. Hvis uttrykket i parentesene stemmer overens med verdien til en av `case`-elementene, blir setningene under denne `case` utført.
Du kan legge til nøkkelordet `break` etter hver `case`. Dette er valgfritt, men dersom `break` er til stede, vil JavaScript hoppe ut av `switch`-blokken når det treffes. Hvis det mangler, vil JavaScript fortsette å utføre alle `case`-elementer som følger etter den matchende. Dette kalles «fall-through». Med mindre du har en god grunn til å utnytte fall-through, bør du som regel bruke `break`-nøkkelordet.
Det siste viktige nøkkelordet er `default`. Dette elementet vil bli utført dersom ingen av de andre `case`-elementene matcher uttrykkets verdi.
Eksempler
Denne delen gir konkrete eksempler på hvordan `switch`-setningen kan brukes i ulike situasjoner.
#1. Med Fall-through
Her ser du et eksempel der `break`-nøkkelordet ikke er brukt for å illustrere hvordan fall-through fungerer.
I dette eksemplet skal vi se på hvordan vi kan håndtere ulike HTTP-statuskoder:
const statusCode = <sett inn statuskode her>
switch (statusCode) {
case 200:
console.log('OK');
case 301:
console.log('Redirect');
case 403:
console.log('Forbidden');
case 404:
console.log('Not Found');
case 500:
console.log('Internal Server Error')
}
Koden sjekker om `statusCode` er lik en bestemt HTTP-statuskode og skriver ut en beskrivende melding.
La oss se hva som skjer når `statusCode` er satt til 403.
Etter at `case 403` ble matchet, ble alle `case`-elementene som følger etter også utført. Dette er fall-through. I de fleste tilfeller ønsker vi ikke denne atferden. Denne særegenheten ved JavaScript er grunnen til at `break`-nøkkelordet vanligvis er nødvendig.
#2. Uten Fall-through
For å forhindre fall-through, legger vi til `break`-nøkkelordet på slutten av hver `case`. Her er et eksempel som viser hvordan dette fungerer:
const statusCode = <sett inn statuskode her>
switch (statusCode) {
case 200:
console.log('OK');
break;
case 301:
console.log('Redirect');
break;
case 403:
console.log('Forbidden');
break;
case 404:
console.log('Not Found');
break;
case 500:
console.log('Internal Server Error')
break;
}
Når vi kjører koden med statuskode 403, får vi dette resultatet:
Som du ser, matcher koden nå bare ett `case`-element og unngår fall-through.
#3. Nyttig Fall-through
Det er likevel viktig å huske at fall-through kan være nyttig i enkelte tilfeller. Tenk deg at vi ønsker å sjekke om en person beveger seg horisontalt eller vertikalt basert på en retningsinput.
const direction = '<sett inn retning her>'
switch(direction) {
case 'left':
case 'right':
console.log('horisontal bevegelse');
break;
case 'up':
case 'down':
console.log('horisontal bevegelse');
break;
}
Dersom vi setter `direction` til «left» og kjører koden, får vi dette resultatet:
Hvis vi setter `direction` til «right», får vi fortsatt det samme resultatet:
Dette er fordi når `case «left’` matches, fortsetter den til `case «right’` og skriver ut «horisontal bevegelse». Men siden det er et `break`-nøkkelord der, faller den ikke videre ned til `case «up’`. Når `case «right’` matches, kjører den setningene i det `case`-elementet og bryter ut av `switch`-blokken.
Dermed vises «horisontal bevegelse» når `direction` er enten «left» eller «right». På denne måten kan du bruke fall-through for å implementere OR-logikk i koden din.
#4. Matche områder
En JavaScript `switch`-setning sjekker om verdien av en `case` er lik verdien av uttrykket. Hvis det er tilfellet, utføres setningene under det `case`-elementet. Det kan imidlertid være situasjoner der du ønsker å sjekke om en verdi er innenfor et bestemt område. Dette er ikke direkte støttet, men det finnes en måte å løse dette på.
I eksemplet under skal vi lage et program som, basert på en score, skriver ut en karakter. Hvis scoren er over 90, skal programmet skrive ut «A+». Hvis den er over 80, men under 90, skal den skrive ut «A», og så videre.
For å oppnå dette har jeg satt uttrykket inni parentesene til `true`. Deretter har verdien av hver `case` blitt definert som en logisk operasjon som bare vil være sann hvis scoren er innenfor området for det `case`-elementet. For eksempel vil `case score >= 90` bare være `true` hvis scoren er større eller lik 90. Dermed vil den matche verdien av uttrykket fordi `true` er lik `true`.
const score = <erstatt med en score>;
switch (true) {
case score >= 50 && score < 60:
console.log('D');
break;
case score >= 60 && score < 70:
console.log('C');
break;
case score >= 70 && score < 80:
console.log('B');
break;
case score >= 80 && score < 90:
console.log('A')
break;
case score >= 90:
console.log('A+')
break;
default:
console.log('<50')
}
Resultatet av koden når score er satt til 80:
Når score er 95:
Og når score er 45:
Leksikalsk omfang
Setningene i et `case`-element i en `switch`-setning har ikke leksikalsk omfang. Dette betyr at variabler som defineres i en `case` er tilgjengelig i andre `case`-elementer. Dette er viktig å huske på når du skriver `switch`-blokker hvor mer enn en `case` kan bli utført. Her er et eksempel som forklarer dette nærmere:
switch (true) {
case true:
let num = 10
case true:
console.log(num);
}
I koden over vil begge `case`-elementene matche. I det første `case`-elementet definerer vi variabelen `num`, og i det andre får vi tilgang til verdien. Vi vil ikke få noen feil, som du kan se her:
Forskjellen mellom `switch`-setninger og andre betingede konstruksjoner
En `switch`-setning er mest egnet i tilfeller der du tester for flere ulike forhold. En `if`-setning passer bedre når du trenger å teste 2 eller 3 betingelser. En ternær operator er mest hensiktsmessig når du ønsker å uttrykke en betingelse på en enkelt linje.
For å oppnå kortest mulig kode bør du først vurdere å bruke ternære operatorer. Hvis logikken ikke kan uttrykkes med en ternær operator, kan du bruke en `if`-setning. Hvis ikke det fungerer, er det som regel best å bruke en `switch`-setning.
Konklusjon
Denne artikkelen har gitt en grundig gjennomgang av `switch`-setningen, hvordan den brukes og dens særegenheter. Vi har også sett på når det er best å bruke den.
For å forbedre dine JavaScript-ferdigheter ytterligere kan det være lurt å se nærmere på disse JavaScript jukselappene.