Beslissingen nemen met behulp van het switch-statement in Javascript

Shreyas Patil2022-07-19 · 10 min read

Beslissingen nemen met behulp van het switch-statement in Javascript

Introductie

Voorwaardelijke instructies zijn een van de belangrijkste controlestructuren in elke programmeertaal. We gebruiken ze om het gedrag van de uitvoering te bepalen op basis van een bepaalde voorwaarde. In Javascript, kunnen voorwaardelijke blokken worden gebouwd met behulp van if, else if, else, en switch-statements.

Het switch-statement maakt de controlestroom gemakkelijk te lezen door de beslissing te nemen op basis van een aantal mogelijke uitkomsten van de expressie. Afhankelijk van de overeenkomende use case kunnen een of meer codeblokken worden uitgevoerd. Het switch-besturingselement is vergelijkbaar met het else if-statement. Echter, switch is qua syntaxis beter leesbaar. Het is ook ideaal voor scenario's met meerdere mogelijke uitkomsten.

In deze handleiding zullen we ons concentreren op het switch-statement in Javascript en dit implementeren om complexe controlestructuren te bouwen. We zullen ook leren hoe we de break , case-, en default -statements binnen het switch-blok kunnen gebruiken om de controlestroom te sturen.

Het Switch-statement gebruiken

Het switch-statement werkt door de waarde van een variabele te vergelijken met mogelijke expressies. Vervolgens voert het het codeblok uit dat overeenkomt met de uitkomst. De syntaxis van het switch -statement verschilt niet van het if-statement. Kortom, de syntaxis van het switch-statement wordt als volgt geschreven:

switch()
{ }

1 2	switch() { }

Hieronder staat een voorbeeld van het switch-statement. Het heeft twee cases of twee mogelijke uitkomsten, samen met een fallback-optie die wordt gespecificeerd door het default-trefwoord. Deze fallback-optie wordt uitgevoerd wanneer de uitvoering eindigt of wanneer er geen overeenkomende case wordt gevonden:

switch (expression) {
    case x:   
        // voert dit codeblok uit wanneer de expressie overeenkomt met case x
        break;

    case y:
        // voert dit codeblok uit wanneer de expressie overeenkomt met case y
        break;

    default:
        // default-blok
}

switch (expression) {

case x:

// voert dit codeblok uit wanneer de expressie overeenkomt met case x

break;

case y:

// voert dit codeblok uit wanneer de expressie overeenkomt met case y

break;

default:

// default-blok

}

De bovenstaande code wordt als volgt uitgevoerd:

Eerst wordt de expressie geëvalueerd.
Vervolgens wordt het resultaat van de expressie vergeleken met case x. Als de waarde overeenkomt, wordt het codeblok onder case x uitgevoerd.
Als de expressie niet overeenkomt met case x, dan wordt case y vergeleken. Als er een overeenkomst wordt gevonden, dan wordt de code van case y uitgevoerd.
Tot slot, als noch case x noch case y overeenkomt, dan wordt de default-code uitgevoerd en verlaat de besturing het switch -blok.

Werkend voorbeeld

Om het switch-statement te begrijpen, laten we eens kijken naar een werkend voorbeeld. We halen de waarde van de dag van de week op voor de huidige datum, met behulp van de getDay()-methode van het Date-object van Javascript. Deze waarde is een getal, voor zondag tot en met 6 voor zaterdag. We zullen dit evalueren aan de hand van de waarden om te bepalen welke dag van de week het is:

const day = new Date().getDay();

1	const day = new Date().getDay();

Vervolgens sturen we deze waarde naar het switch-statement. Het switch-statement loopt van boven naar beneden om het te vergelijken met cases om te bepalen welke dag van de week het is. Zodra de case is gevonden, zal de break-instructie het switch -blok stoppen met het verder evalueren van statements:

// Stel de huidige dag van de week in op een variabele, waarbij 0 zondag is en 6 zaterdag
const day = new Date().getDay();

switch (day) {
case 0:
    console.log("Het is zondag");
    break;

case 1:
    console.log("Het is maandag!");
    break;

case 2:
    console.log("Het is dinsdag.");
    break;

case 3:
    console.log("Nu al woensdag!");
    break;

case 4:
    console.log("Het is donderdag");
    break;

case 5:
    console.log("Fijne vrijdag!");
    break;

case 6:
    console.log("Het is zaterdag!");
    break;

default:
    console.log("Geen match gevonden")

}

// Stel de huidige dag van de week in op een variabele, waarbij 0 zondag is en 6 zaterdag

const day = new Date().getDay();

switch (day) {

case 0:

console.log("Het is zondag");

break;

case 1:

console.log("Het is maandag!");

break;

case 2:

console.log("Het is dinsdag.");

break;

case 3:

console.log("Nu al woensdag!");

break;

case 4:

console.log("Het is donderdag");

break;

case 5:

console.log("Fijne vrijdag!");

break;

case 6:

console.log("Het is zaterdag!");

break;

default:

console.log("Geen match gevonden")

}

Afhankelijk van de waarde die wordt geretourneerd door de getDate()-methode, wordt deze één voor één getoetst aan de cases, beginnend van bovenaf. De uitvoer zal verschillen afhankelijk van de dag waarop je de code hebt uitgevoerd. Het default-codeblok is zo geplaatst dat we dit scenario kunnen afhandelen als er geen case overeenkomt. In deze code zal default echter nooit worden aangeroepen, aangezien er slechts een beperkt aantal dagen in de week is.

De break-instructie zorgt ervoor dat zodra de case is gematcht, er geen verdere cases worden gematcht en de besturing uit de switch-instructie komt. Dit maakt het programma efficiënter en sneller.

Testen tegen bereiken in Switch

Tot nu toe hebben we gekeken naar zeer eenvoudige use cases. Maar er kunnen momenten zijn waarop het nodig is om te testen tegen een bereik van waarden in plaats van een enkele waarde. Dit kunnen we doen door onze expressie in te stellen op true en een bewerking uit te voeren binnen elke case-instructie.

Laten we deze use case demonstreren aan de hand van een voorbeeld. We nemen een getal en zetten dit vervolgens om in een cijfer met behulp van de onderstaande categorisering:

Een cijfer van 90 en hoger is een A
Een cijfer van 80 tot 89 is een B
Een cijfer van 70 tot 79 is een C
Een cijfer van 60 tot 69 is een D
Een cijfer van 59 of lager is een F

We zullen deze instructies schrijven als switch-instructies. Hieronder staat de code hiervoor:

// Cijfer van de student
const grade = 87;

switch (true) {

    // Als de score 90 of hoger is
    case grade >= 90:
    console.log("A");
    break;

    // Als de score 80 of hoger is
    case grade >= 80:
    console.log("B");
    break;

    // Als de score 70 of hoger is
    case grade >= 70:
    console.log("C");
    break;

    // Als de score 60 of hoger is
    case grade >= 60:
    console.log("D");
    break;

    // Alles van 59 of lager is onvoldoende
    default:
    console.log("F");
}

// Cijfer van de student

const grade = 87;

switch (true) {

// Als de score 90 of hoger is

case grade >= 90:

console.log("A");

break;

// Als de score 80 of hoger is

case grade >= 80:

console.log("B");

break;

// Als de score 70 of hoger is

case grade >= 70:

console.log("C");

break;

// Als de score 60 of hoger is

case grade >= 60:

console.log("D");

break;

// Alles van 59 of lager is onvoldoende

default:

console.log("F");

}

In tegenstelling tot de bovenstaande codevoorbeelden hebben we hier de expressie tussen haakjes ingesteld als true. Daarom zal de case-instructie die overeenkomt met de waarde true, worden uitgevoerd. Net als de else if-instructie, zal de eerste instructie die overeenkomt met de opgegeven waarde worden uitgevoerd. Hier zal de uitvoer B, ondanks het feit dat zelfs C en D ook overeenkomen met de expressie.

Meerdere cases

Als u meer dan één case met hetzelfde codeblok wilt hebben, is dat ook mogelijk. Dit is analoog aan de of-voorwaarde in de if-instructie. In dergelijke scenario's kunnen we meer dan één case specificeren voor elk codeblok.

Om dit concept te illustreren, geven we een voorbeeld met de maanden van het jaar. We zullen deze maanden indelen in de seizoenen van een jaar. Eerst gebruiken we de nieuwe Date()-methode om een getal te vinden dat overeenkomt met de huidige maand, en passen dat toe op de variabele month. De Date().getMonth()-methode retourneert een getal van 0 tot 11, waarbij 0 januari is en 11 gekoppeld is aan december.

We zullen categoriseren met behulp van de onderstaande specificatie:

Winter: januari, februari en maart
Lente: april, mei en juni
Zomer: juli, augustus en september
Herfst: oktober, november en december

Dit is hoe de code eruit zal zien:

const month = new Date().getMonth();

switch (month) {

    // januari, februari, maart
    case 0:
    case 1:
    case 2:
        console.log("Winter");
        break;

    // april, mei, juni
    case 3:
    case 4:
    case 5:
        console.log("Lente");
        break;
    
    // juli, augustus, september
    case 6:
    case 7:
    case 8:
        console.log("Zomer");
        break;
    
    // oktober, november, december
    case 9:
    case 10:
    case 11:
        console.log("Herfst");
        break;
    
    default:
        console.log("Er is iets misgegaan.");
}

const month = new Date().getMonth();

switch (month) {

// januari, februari, maart

case 0:

case 1:

case 2:

console.log("Winter");

break;

// april, mei, juni

case 3:

case 4:

case 5:

console.log("Lente");

break;

// juli, augustus, september

case 6:

case 7:

case 8:

console.log("Zomer");

break;

// oktober, november, december

case 9:

case 10:

case 11:

console.log("Herfst");

break;

default:

console.log("Er is iets misgegaan.");

}

Wanneer de bovenstaande code wordt uitgevoerd, zal, afhankelijk van de maand, de naam van het seizoen op de console worden weergegeven.

Conclusie

In deze handleiding hebben we gedemonstreerd hoe u de switch-instructie gebruikt in JavaScript-applicaties. We hebben ook de switch-instructie toegepast op een bereik en meerdere cases, samen met het trefwoord default. Als u meer wilt leren over JavaScript, kunt u de volgende handleidingen bekijken:

Veel computerplezier!

Shreyas Patil

Auteur · CloudSigma

Preslav Dobrev is een creatief ontwerper bij CloudSigma, met de nadruk op een consistente bedrijfsidentiteit door middel van traditionele en innovatieve marketingkanalen. Hij is bedreven in het samenvoegen van artistieke visie met strategische marketing om impactvolle merkverhalen te creëren.

Beslissingen nemen met behulp van het switch-statement in Javascript

Introductie

Het Switch-statement gebruiken

Werkend voorbeeld

Testen tegen bereiken in Switch

Meerdere cases

Conclusie

Shreyas Patil

Reacties