En guide till JavaScript Switch Statement med exempel

I JavaScript fungerar en `switch`-sats som ett villkorligt styrmedel. Det är ett kraftfullt verktyg för att konstruera villkorliga block som innehåller flera alternativa vägar.

Denna genomgång utforskar `switch`-satsen och dess tillämpningar. Vi kommer även att jämföra den med andra villkorliga strukturer, som `if`-satser och ternära operatorer, för att tydliggöra när varje konstruktion lämpar sig bäst.

Vad är en `switch`-sats i JavaScript?

En `switch`-sats i JavaScript används för att selektivt exekvera kod baserat på ett uttrycks värde. Det är en av de centrala villkorliga satserna i språket.

Tillsammans med `if`-satsen och den ternära operatorn utgör `switch`-satsen grunden för villkorlig logik i JavaScript. Var och en har sin egen karaktär och är optimal för olika scenarion. I denna artikel går vi igenom alla aspekter av detta.

Hur man använder en `switch`-sats i JavaScript

Här kommer vi att fördjupa oss i hur `switch`-satsen fungerar i JavaScript. Exempelkod kommer att användas, så en JavaScript-kompilator kan vara bra att ha till hands. Enkel att använda är denna online JavaScript-kompilator. Alternativt finns vår artikel om de bästa JavaScript IDE:erna online.

Grundläggande syntax

Den generella formen för en `switch`-sats ser ut så här:

switch(<uttryck>) {
    case <värde 1>:
        <satser>
        break;
    case <värde 2>:
        <satser>
        break;
    default:
        <satser>
}

Nyckelordet `switch` markerar början på `switch`-blocket. Inom parenteserna placeras ett valfritt JavaScript-uttryck. Ett uttryck kan vara allt som resulterar i ett värde, till exempel strängar, tal, variabler eller funktionsanrop.

Därefter placeras kroppens innehåll i måsvingar. Kroppen innehåller olika `case`-fall. Varje `case` associerar ett värde med en grupp av satser. Om uttrycket matchar värdet i ett `case`, så utförs motsvarande satser.

För varje `case` kan man lägga till nyckelordet `break`. Detta är valfritt. Om `break` används, så avbryts exekveringen av `switch`-blocket när detta nyckelord nås. Utan `break`, så fortsätter exekveringen till nästa `case`-fall, vilket kallas ”fall through”. Om man inte vill dra nytta av detta beteende, så är det bäst att använda `break`.

Det sista nyckelordet att nämna är `default`. Detta `case` matchar om inget av de andra `case`-fallen stämmer med uttryckets värde.

Praktiska exempel

Här följer några exempel som illustrerar hur man använder `switch`-satsen.

#1. Med ”fall through”

I detta exempel demonstrerar vi användningen av en `switch`-sats utan `break` för att visa hur ”fall through” fungerar.

Vi skapar kod för att hantera olika HTTP-statuskoder:

const statusCode = <ange statuskod här>

switch (statusCode) {
    case 200:
        console.log('OK');
    case 301:
        console.log('Omdirigering');
    case 403:
        console.log('Förbjuden');
    case 404:
        console.log('Inte hittad');
    case 500:
        console.log('Internt serverfel')
}

Koden ovan kontrollerar om ett värde motsvarar en specifik statuskod, och skriver sedan ut ett beskrivande meddelande.

Lägg märke till vad som händer när statuskoden sätts till 403.

Efter att `case 403` matchats, exekveras alla efterföljande `case`-fall också. Detta är ”fall through”. Ofta vill man att endast ett fall ska matchas, och det är därför `break`-nyckelordet är så viktigt att använda.

#2. Utan ”fall through”

För att undvika ”fall through” lägger vi till nyckelordet `break` i slutet av varje `case`. Detta exempel illustrerar hur det fungerar:

const statusCode = <ange en statuskod här>

switch (statusCode) {
    case 200:
        console.log('OK');
        break;
    case 301:
        console.log('Omdirigering');
        break;
    case 403:
        console.log('Förbjuden');
        break;
    case 404:
        console.log('Inte hittad');
        break;
    case 500:
        console.log('Internt serverfel')
        break;
}

När man kör koden ovan med statuskoden 403, får man följande resultat:

Nu matchar koden bara ett `case`, vilket eliminerar ”fall through”-effekten.

#3. Användbar ”fall through”

Det är värt att notera att ”fall through” kan vara användbart i vissa situationer. Betrakta följande exempel där vi kontrollerar om en person rör sig horisontellt eller vertikalt baserat på riktningsinmatning.

const direction = '<ange riktning här>'

switch(direction) {
    case 'left':
    case 'right':
        console.log('horisontell rörelse');
        break;
    case 'up':
    case 'down':
        console.log('vertikal rörelse');
        break;
}

Om man anger riktningen till ’left’ och kör koden ovan, så blir resultatet:

Om man anger riktningen till ’right’, så får man samma resultat:

När `case ’left’` matchar, så fortsätter koden till `case ’right’`, där `console.log(’horisontell rörelse’)` körs. Eftersom `break` används, så fortsätter den inte till `case ’up’`. När `case ’right’` matchar, så kör den satserna i det `case`-fallet och bryter sedan exekveringen.

Därmed visas ”horisontell rörelse” när riktningen är antingen ’left’ eller ’right’. ”Fall through” ger dig möjlighet att skapa ”ELLER”-logik i koden.

#4. Matchande intervall

En JavaScript `switch`-sats kontrollerar om värdet i ett `case` är strikt lika med värdet på uttrycket. Ibland kan man vilja kontrollera om ett värde ligger inom ett visst intervall. Att matcha intervall kan vara lite knepigt, men lösningen visas i koden nedan.

I detta exempel implementerar vi ett program som skriver ut ett betyg baserat på ett poängresultat. Om poängen är över 90, så skrivs A+ ut. Om den är över 80 men under 90, så skrivs A ut, och så vidare.

För att åstadkomma detta sätter vi uttrycket till `true`. Värdet på varje `case` definieras som en logisk operation som endast blir sann om poängen faller inom intervallet för det fallet. Till exempel, `case mark >= 90` kommer bara att vara `true` om poängen är större än eller lika med 90. Därmed matchar `case`-fallet uttryckets värde eftersom `true` är lika med `true`.

const mark = <ersätt med en poäng>;

switch (true) {
    case mark >= 50 && mark < 60:
        console.log('D');
        break;
    case mark >= 60 && mark < 70:
        console.log('C');
        break;
    case mark >= 70 && mark < 80:
        console.log('B');
        break;
    case mark >= 80 && mark < 90:
        console.log('A')
        break;
    case mark >= 90:
        console.log('A+')
        break;
    default:
        console.log('<50')
}

Resultatet från koden ovan när poängen är 80:

När poängen är 95:

När poängen är 45:

Lexikalt omfång

Satserna i ett `case`-fall har inte lexikalt omfång. Det betyder att variabler som deklareras i ett `case`-fall är tillgängliga i andra `case`-fall. Detta är viktigt att känna till när man använder switch-block där fler än ett `case`-fall kan matchas. Här är ett exempel som tydliggör detta:

switch (true) {
    case true:
        let num = 10
    case true:
        console.log(num);
}

I koden ovan matchar båda fallen. I det första fallet deklarerar vi variabeln `num`; i det andra fallet använder vi dess värde. Inga fel uppstår, som man kan se på skärmdumpen nedan:

Skillnaden mellan en `switch`-sats och andra villkorliga satser

En `switch`-sats är mest lämplig när man testar för flera tillstånd. En `if`-sats passar bättre när man testar två eller tre villkor. En ternär operator är lämplig när man vill uttrycka en villkorlig sats på en enda rad.

Generellt bör man använda ternära operatorer först för korthetens skull. Om logiken inte kan uttryckas med en ternär operator, så kan man använda en `if`-sats. Om det inte heller är lämpligt, så är `switch`-satsen ett bra val.

Sammanfattning

I denna artikel har vi gått igenom `switch`-satsen, hur man använder den och dess specifika egenskaper. Vi har även diskuterat när den lämpar sig bäst.

För den som vill fördjupa sig i JavaScript finns det många resurser, till exempel JavaScript-fuskblad.