Voorwaarden in JavaScript: if, else if en switch gebruiken

Met voorwaarden voer je in JavaScript code uit op basis van een specifieke conditie. Zo bouw je complexere programma’s die beslissingen nemen aan de hand van de binnenkomende data. In dit hoofdstuk kijken we naar de instructies if en switch, de twee stuurinstructies die je in JavaScript het vaakst gebruikt.

De if-instructie

Met de if-instructie voer je in JavaScript code alleen uit als aan een bepaalde voorwaarde is voldaan. Zo ziet dat eruit:

let a = 5;

if (a > 10) {
  console.log('a est supérieur à 10');
}

In dit voorbeeld draait de code tussen de accolades alleen als de voorwaarde ‘a > 10’ waar is. Is de voorwaarde onwaar, dan wordt die code overgeslagen en gaat het programma verder met de volgende instructie.

Met else voer je code uit wanneer er juist niet aan de voorwaarde is voldaan:

let a = 5;

if (a > 10) {
  console.log('a est supérieur à 10');
} else {
  console.log('a est inférieur ou égal à 10');
}

Is de voorwaarde ‘a > 10’ waar, dan verschijnt het bericht ‘a est supérieur à 10’. Is ze onwaar, dan verschijnt in plaats daarvan ‘a est inférieur ou égal à 10’.

Met de instructie else if controleer je meerdere voorwaarden na elkaar:

let a = 5;

if (a > 10) {
  console.log('a est supérieur à 10');
} else if (a == 10) {
  console.log('a est égal à 10');
} else {
  console.log('a est inférieur à 10');
}

Is de eerste voorwaarde ‘a > 10’ waar, dan verschijnt ‘a est supérieur à 10’. Is de eerste onwaar en de tweede voorwaarde ‘a == 10’ waar, dan verschijnt ‘a est égal à 10’. Wordt aan geen van beide voorwaarden voldaan, dan verschijnt ‘a est inférieur à 10’.

De switch-instructie

Met de switch-instructie voer je in JavaScript code uit op basis van de waarde van een variabele. Dat komt van pas zodra je voor één variabele meerdere mogelijke waarden moet afvangen. Zo ziet dat eruit:

let a = 'rouge';

switch (a) {
  case 'bleu':
    console.log('a est bleu');
    break;
  case 'vert':
    console.log('a est vert');
    break;
  case 'rouge':
    console.log('a est rouge');
    break;
  default:
    console.log("a n'est ni bleu, ni vert, ni rouge");
}

De waarde van de variabele ‘a’ wordt met elke ‘case’ in de switch vergeleken. Komt de waarde van ‘a’ met een van de ‘case’-takken overeen, dan draait de bijbehorende code. Past geen enkele ‘case’ bij de waarde van ‘a’, dan draait de code onder ‘default’.

let a = 'jaune';

switch (a) {
  case 'bleu':
  case 'vert':
  case 'rouge':
    console.log('a est une couleur primaire');
    break;
  case 'jaune':
  case 'orange':
  case 'violet':
    console.log('a est une couleur secondaire');
    break;
  default:
    console.log("a n'est ni une couleur primaire, ni une couleur secondaire");
}

Is de waarde van ‘a’ ‘bleu’, ‘vert’ of ‘rouge’, dan verschijnt het bericht ‘a est une couleur primaire’. Is de waarde van ‘a’ ‘jaune’, ‘orange’ of ‘violet’, dan verschijnt ‘a est une couleur secondaire’. Past geen enkele ‘case’ bij de waarde van ‘a’, dan verschijnt ‘a n’est ni une couleur primaire, ni une couleur secondaire’:

Conclusie

In dit hoofdstuk heb je gezien hoe je met de instructies if en switch code uitvoert op basis van een voorwaarde of een specifieke waarde. Die instructies heb je nodig om complexere programma’s in JavaScript te bouwen. Oefen er gerust mee om je JavaScript verder aan te scherpen.