Les 3: Condities

Home ›JavaScript-track ›Les 3

🔀 Condities

⏱ Geschatte leestijd: 20 minuten · 7 stappen

Tot nu toe voert je code altijd dezelfde stappen uit. Met condities kun je code beslissingen laten nemen: voer dit uit als de conditie waar is, anders dat. Dit is een van de fundamenten van programmeren.

1 `if` en `else`

Wat betekent dit?

Een if-statement voert code uit alleen als de conditie tussen de haakjes true is. Het else-blok wordt uitgevoerd als de conditie false is. Gebruik altijd accolades { } om het blok af te bakenen.

if en else

const leeftijd = 17;

if (leeftijd >= 18) {
  console.log("Je bent volwassen.");
} else {
  console.log("Je bent nog minderjarig.");
}
// → "Je bent nog minderjarig."

Stroomdiagram:

leeftijd >= 18 → waar → "Je bent volwassen."

leeftijd >= 18 → onwaar → "Je bent nog minderjarig."

2 `else if` — meerdere condities

Met else if kun je meerdere condities na elkaar controleren. Zodra één conditie waar is, worden de rest overgeslagen.

else if keten

const cijfer = 7.5;

if (cijfer >= 9) {
  console.log("Uitstekend!");
} else if (cijfer >= 7) {
  console.log("Goed!");
} else if (cijfer >= 5.5) {
  console.log("Voldoende.");
} else {
  console.log("Onvoldoende.");
}
// → "Goed!"

💡 Tip: Zet de meest specifieke condities bovenaan. Als je eerst cijfer >= 5.5 zou zetten, zou ook een 9 al als "Voldoende" worden gelabeld.

3 Vergelijkingsoperatoren

Gebruik altijd === (niet ==)

JavaScript heeft twee soorten gelijkheidsoperatoren. === vergelijkt zowel de waarde als het datatype (strict equality). == doet type coercion: het probeert de typen eerst gelijk te maken, wat tot verrassingen leidt.

Vergelijkingsoperatoren

// ⚠️ == doet type coercion — vermijd dit!
console.log("5" == 5);   // true  ← gevaarlijk
console.log("5" === 5);  // false ← correct

// Gebruik altijd ===
console.log(10 === 10);  // true
console.log(10 !== 5);   // true
console.log(10 > 5);     // true
console.log(10 < 5);     // false
console.log(10 >= 10);   // true
console.log(10 <= 9);    // false

Operator	Betekenis	Voorbeeld
===	Strikt gelijk (waarde + type)	5 === 5 → true
!==	Strikt ongelijk	5 !== 3 → true
<	Kleiner dan	3 < 5 → true
>	Groter dan	7 > 5 → true
<=	Kleiner dan of gelijk aan	5 <= 5 → true
>=	Groter dan of gelijk aan	5 >= 5 → true

4 Logische operatoren: `&&`, `||`, `!`

Combineer condities

Met logische operatoren combineer je meerdere condities. && (EN) is alleen true als beide condities true zijn. || (OF) is true als minstens één conditie true is. ! (NIET) keert een boolean om.

Logische operatoren

const leeftijd = 20;
const heeftRijbewijs = true;

// && (EN): beide moeten true zijn
if (leeftijd >= 18 && heeftRijbewijs) {
  console.log("Mag autorijden.");
}

// || (OF): minstens één moet true zijn
const isWeekend = false;
const isVrij = true;
if (isWeekend || isVrij) {
  console.log("Geen school!");
}

// ! (NIET): keert true/false om
console.log(!true);   // false
console.log(!false);  // true

5 Ternary operator

Wat betekent dit?

De ternary operator is een verkorte schrijfwijze voor een eenvoudig if/else. De syntax is: conditie ? waardeAlsTrue : waardeAlsFalse. Gebruik hem voor korte, eenvoudige keuzes — niet voor complexe logica.

Ternary operator

const leeftijd = 20;

// Normaal if/else
let toegang;
if (leeftijd >= 18) {
  toegang = "Toegestaan";
} else {
  toegang = "Verboden";
}

// Hetzelfde met ternary operator (één regel)
const toegang2 = leeftijd >= 18 ? "Toegestaan" : "Verboden";

console.log(toegang);   // "Toegestaan"
console.log(toegang2);  // "Toegestaan"

// Handig in template literals
console.log(`Status: ${leeftijd >= 18 ? "volwassene" : "minderjarig"}`);

6 Oefening 1: Leeftijdscategorisering

Opdracht:

Schrijf een functie categoriseer(leeftijd) die een categorie teruggeeft: "kind" (jonger dan 12), "tiener" (12–17), "volwassene" (18–64), "senior" (65 of ouder). Log het resultaat voor de waarden 8, 15, 30 en 70.

✓ Een if-statement aanwezig

✓ Minstens één else if

✓ Vergelijkingsoperatoren gebruikt

editor

function categoriseer(leeftijd) {
  // Schrijf hier je if/else if/else logica
}

console.log(categoriseer(8));
console.log(categoriseer(15));
console.log(categoriseer(30));
console.log(categoriseer(70));

Console output

7 Eindopdracht: FizzBuzz

Het klassieke programmeerprobleem:

Log voor de getallen 1 tot en met 20:

✓ "FizzBuzz" als het deelbaar is door zowel 3 als 5

✓ "Fizz" als het deelbaar is door 3

✓ "Buzz" als het deelbaar is door 5

✓ Anders: het getal zelf

Hint: gebruik de modulo-operator % om te controleren of een getal deelbaar is. n % 3 === 0 betekent: n is deelbaar door 3.

editor

// FizzBuzz: getallen 1 t/m 20
// Tip: controleer FizzBuzz (deelbaar door 3 EN 5) als eerste!

Console output

📄 Volledig voorbeeld: condities.js

// ── if / else if / else ───────────────────────────
const cijfer = 7.5;
if (cijfer >= 9)       { console.log("Uitstekend!"); }
else if (cijfer >= 7)  { console.log("Goed!"); }
else if (cijfer >= 5.5){ console.log("Voldoende."); }
else                   { console.log("Onvoldoende."); }

// ── Vergelijkingsoperatoren ───────────────────────
console.log("5" === 5);  // false — gebruik altijd ===
console.log("5" == 5);   // true  — gevaarlijk!

// ── Logische operatoren ───────────────────────────
const oud = 20;
const rijbewijs = true;
if (oud >= 18 && rijbewijs) { console.log("Mag rijden"); }
if (oud < 16 || !rijbewijs) { console.log("Mag niet rijden"); }

// ── Ternary operator ──────────────────────────────
const status = oud >= 18 ? "volwassene" : "minderjarig";
console.log(`Status: ${status}`);

// ── FizzBuzz ──────────────────────────────────────
for (let i = 1; i <= 20; i++) {
  if (i % 3 === 0 && i % 5 === 0) console.log("FizzBuzz");
  else if (i % 3 === 0)           console.log("Fizz");
  else if (i % 5 === 0)           console.log("Buzz");
  else                            console.log(i);
}

← Les 2 Les 4 →