Conditionals

Wat zijn conditionals?

Met conditionals laat je code beslissingen nemen. Op basis van een voorwaarde wordt één stuk code wél uitgevoerd, en een ander stuk niet.

if / else

De eenvoudigste conditional: als de voorwaarde waar is, wordt het eerste blok uitgevoerd. Anders het tweede.

const leeftijd = 20;

if (leeftijd >= 18) {
  console.log('Je bent volwassen');
} else {
  console.log('Je bent minderjarig');
}

Alleen een if (zonder else)

const score = 85;

if (score >= 70) {
  console.log('Geslaagd!');
}
// Als score lager is, gebeurt er niets

Meerdere voorwaarden combineren

const heeftTicket = true;
const leeftijd = 16;

// && = beide voorwaarden moeten waar zijn
if (heeftTicket && leeftijd >= 18) {
  console.log('Welkom!');
} else {
  console.log('Toegang geweigerd');
}

// || = één van beide moet waar zijn
if (heeftTicket || leeftijd >= 18) {
  console.log('Misschien toegang...');
}

else if

Als je meerdere opties hebt, kun je else if gebruiken om extra voorwaarden toe te voegen.

const score = 72;

if (score >= 90) {
  console.log('Uitstekend');
} else if (score >= 75) {
  console.log('Goed');
} else if (score >= 55) {
  console.log('Voldoende');
} else {
  console.log('Onvoldoende');
}

Praktisch voorbeeld

function getKortingLabel(percentage) {
  if (percentage >= 50) {
    return 'Mega sale!';
  } else if (percentage >= 25) {
    return 'Grote korting';
  } else if (percentage > 0) {
    return 'Aanbieding';
  } else {
    return 'Geen korting';
  }
}

console.log(getKortingLabel(60)); // "Mega sale!"
console.log(getKortingLabel(10)); // "Aanbieding"
console.log(getKortingLabel(0));  // "Geen korting"

switch

Een switch is handig als je één variabele vergelijkt met meerdere vaste waarden.

const dag = 'maandag';

switch (dag) {
  case 'maandag':
    console.log('Start van de week');
    break;
  case 'vrijdag':
    console.log('Bijna weekend!');
    break;
  case 'zaterdag':
  case 'zondag':
    console.log('Weekend!');
    break;
  default:
    console.log('Doordeweekse dag');
}

const kleur = 'rood';

switch (kleur) {
  case 'rood':
    console.log('Stop');
    // geen break → valt door!
  case 'oranje':
    console.log('Let op');
    break;
}

Switch vs if/else

Ternary operator

De ternary operator is een verkorte if/else op één regel. Handig voor eenvoudige keuzes.

// Gewone if/else:
let label;
if (leeftijd >= 18) {
  label = 'Volwassen';
} else {
  label = 'Minderjarig';
}

// Ternary (zelfde resultaat):
const label = leeftijd >= 18 ? 'Volwassen' : 'Minderjarig';

Ternary in template literals

const punten = 42;
const bericht = `Je hebt ${punten >= 50 ? 'gehaald' : 'niet gehaald'}!`;
console.log(bericht); // "Je hebt niet gehaald!"

Ternary in JSX / HTML rendering

const isIngelogd = true;

const welkomTekst = isIngelogd
  ? 'Welkom terug!'
  : 'Log in om verder te gaan';

document.querySelector('#bericht').textContent = welkomTekst;

Logische operators als shortcuts

De logische operators && en || kun je ook gebruiken als verkorte conditionals.

&& (AND) als guard

// Voert het tweede deel alleen uit als het eerste waar is
const isIngelogd = true;

isIngelogd && console.log('Welkom!'); // "Welkom!"

// Handig voor conditioneel tonen in UI:
const gebruiker = { naam: 'Jan' };
const html = gebruiker && `
${gebruiker.naam}
`;

|| (OR) als fallback

// Geeft het eerste truthy waarde terug
const naam = '';
const weergaveNaam = naam || 'Anoniem';
console.log(weergaveNaam); // "Anoniem" (want naam is lege string = falsy)

const gebruikersnaam = 'jan123';
const display = gebruikersnaam || 'Gast';
console.log(display); // "jan123"

Nullish coalescing (??)

De ?? operator geeft een fallback terug, maar alleen als de waarde null of undefined is (niet bij 0 of '').

Verschil met ||

const score = 0;

// || ziet 0 als falsy → geeft fallback
console.log(score || 'Geen score'); // "Geen score" (ongewenst!)

// ?? ziet 0 als geldig → geeft 0 terug
console.log(score ?? 'Geen score'); // 0 (correct)

Praktisch voorbeeld

function toonGebruiker(gebruiker) {
  const naam = gebruiker.naam ?? 'Onbekend';
  const leeftijd = gebruiker.leeftijd ?? 'Niet opgegeven';
  const score = gebruiker.score ?? 0; // 0 is een geldige score

  console.log(`${naam}, ${leeftijd}, score: ${score}`);
}

toonGebruiker({ naam: 'Jan', score: 0 });
// "Jan, Niet opgegeven, score: 0"

Optional chaining (?.) in combinatie

const gebruiker = null;

// Zonder optional chaining: ERROR
console.log(gebruiker.naam); // TypeError!

// Met optional chaining: veilig
console.log(gebruiker?.naam);          // undefined
console.log(gebruiker?.naam ?? 'Gast'); // "Gast"

Samenvatting