Switch statement

Wat is een switch?

Als je een if-statement hebt met heel veel else-if onderdelen, kan je jouw code korter maken.
Hiervoor gebruiken we een switch, onderaan vind je een voorbeeld van een langere if-statement en een voorbeeld voor een switch.

if-statement


const chosenFruit = 'Apple';
let message = '';
if (chosenFruit === 'Banana') {
  message = "Banananen zijn geel";
} else if (chosenFruit === 'Pear') {
  message = "Peren hebben een rare vorm";
} else if (chosenFruit === 'Orange') {
  message = "Hier kan je prima sinasappelsap van maken";
} else if (chosenFruit === 'Kiwi') {
  message = "Kiwi's komen uit Australie.. (normaal gesproken)";
} else if (chosenFruit === 'Jalapeno') {
  message = "Dat is geen fruit maar wel erg heet!";
} else if (chosenFruit === 'Apple') {
  message = "An apple a day, keeps the docter away";
} else {
  message = "Dat fruit ken ik niet, is het wel gezond?";
}

alert(message);

Switch case


const chosenFruit = 'Apple';
let message = '';
switch (chosenFruit) {
    case 'Banana':
      message = "Banananen zijn geel";
      break;
    case 'Pear':
      message = "Peren hebben een rare vorm";
      break;
    case 'Orange':
      message = "Hier kan je prima sinasappelsap van maken";
      break;
    case 'Kiwi':
      message = "Kiwi's komen uit Australie.. (normaal gesproken)";
      break;
    case 'Jalapeno':
      message = "Dat is geen fruit maar wel erg heet!";
      break;
    case 'Apple':
      message = "An apple a day, keeps the docter away";
      break;
    default:
      message = "Dat fruit ken ik niet, is het wel gezond?";
}
alert(message);

De switch is in dit voorbeeld iets langer dan de if-statement maar je ziet wel dat er veel meer overzicht is. Zo wordt je code duidelijker en praktischer.

case, break en default

Een switch case gebruikt 3 termen die je nog niet kent: case, break en default.

case

Met de case geef je aan waar op getest wordt, dit kan een number, boolean of string (tekst) zijn.
Er zijn ook mogelijkheden om een logische test te doen, maar dit is wat lastiger. Gebruik bij logische (reken) tests daarom gewoon een if-statement.

break

Met de break code geef je aan dat de switch-case moet stoppen. Als je dit niet doet zal de hele switch-case doorlopen worden en als er meerdere matches zijn (in hetvoorbeeld is dit niet het geval) zullen ze allemaal uitgevoerd worden. Een break gebruik je bijna altijd samen met een switch-case.

default

Als laatste kan, maar dit hoeft niet, je een standaard waarde opgeven. Als geen van de case delen klopt (dus er is geen vergelijking), dan zal de default uitgevoerd worden. Omdat default altijd als laatste geplaatst wordt, hoeft deze geen break code te hebben.
Als het gekozen fruit hierboven geen Apple zou zijn maar bijvoorbeeld Chocolate dan zou de alert het bericht tonen met Dat fruit ken ik niet, is het wel gezond?

Jouw JavaScript

Op de MBO-SD Fiddle site kan je meer oefenen met deze stof.

Klik hier voor de MBO-SD Fiddle site