Conditionals

Wat zijn conditionals?

Conditionals

  • helpen beslissingen te maken 
  • houden rekening met verschillende situaties en scenario's

Vb: Als het regent, dan haal ik mijn paraplu boven ☔️

Conditionals

  • maken code dynamisch en interactief
  • voeren bepaalde stukken code enkel uit als aan een specifieke voorwaarde wordt voldaan 
if (true) {
  // doe iets
}

if...else

if-statements

Bestaan uit:

  • een voorwaarde tussen haakjes ()
  • code tussen accolades {} die wordt uitgevoerd als aan de voorwaarde voldaan is.
if (true) {
  // doe iets
}

condition

if-statements

Als een if-statement maar één codeblok heeft, kun je {} weglaten:

if (true) console.log("Ik heb geen accolades");

💡 Let op: Voor meerdere regels zijn accolades {} wél nodig!

else

Gebruik else {} om een alternatieve actie te bepalen.

if (true) {
  // doe iets
} else {
  // doe iets anders
}

else-if statements

Gebruik else if () {} om meerdere mogelijkheden na elkaar te testen.

if (age >= 18) {
  // doe iets
} else if (age >= 16) {
  // doe iets anders
} else {
  // doe nog iets anders
}

Conditions

Conditions

  • kunnen simpele booleans zijn
const isRaining = true;
if (isRaining) {
    console.log("Haal je paraplu boven!☔️");
}
const isRaining = false;
if (!isRaining) {
    console.log("De zon schijnt!!🌞");
}
  • kunnen omgekeerde waarde checken met ! (not)

Conditions

const leeftijd = 18;

if (leeftijd >= 18) {
    console.log("Je mag stemmen!");
}
  • kunnen een of meerdere vergelijkingen bevatten
if (isNaN("hello")) console.log("Geen getal!"); 

if (typeof 42 === "number") console.log("Getal!");
  • kunnen functies bevatten

Vergelijkingen

  • Comparison operators geven true of false terug
  • Je kan ze gebruiken in je condition
Operator Beschrijving Voorbeeld Resultaat
=== Is gelijk 3 === "drie" false
!== Is niet gelijk 6 !== 4 true
< Is kleiner dan 4 < 5 true
> Is groter dan 4 > 5 false
<= Is kleiner dan OF gelijk aan 4 <= 4 true
>= Is groter dan OF gelijk aan 5 >= 4 true

Waarom === ?

= waarde toe te wijzen aan een variabele:

const x = 5;

== vergelijkt waarden, maar zet types om:

console.log(5 == "5");	// true! (typecoercion)

=== vergelijkt waarden & types:

console.log(5 === "5");	// false

Condities combineren

&& (EN-operator)

= Alle voorwaarden moeten waar zijn om het hele statement als true te evalueren

let leeftijd = 20;
let heeftTicket = true;

if (leeftijd >= 18 && heeftTicket) {
    console.log("Welkom in de Charla!");
}

Condities combineren

|| (OF-operator)

= Minstens één voorwaarde moet waar zijn om het hele statement als true te evalueren

let isWeekend = true;
let heeftVrijeDag = false;

if (isWeekend || heeftVrijeDag) {
    console.log("Uitslapeuuhhhh");
}

Truthy & Falsy

= Sommige waarden gedragen zich als true of false in een conditioneel statement

// 0 is falsy
if (0) {
    console.log("Dit wordt niet uitgevoerd.");
}
// Een string is truthy
if ("false") {
    console.log("Deze string is truthy!");
}

Truthy & Falsy

  • Waarden die in een if-statement als false worden beschouwd:
    • false
    • 0 (het getal nul)
    • "" (een lege string)
    • null
    • undefined
    • NaN (Not a Number)

Truthy & Falsy

  • Alles wat niet falsy is, wordt automatisch als true beschouwd.
  • Enkele voorbeelden:
    • Elk getal behalve 0 (bijv. 1, -42, 3.14)
    • Niet-lege strings ("Vibe", "false", "0")
    • Arrays

Ternary Operator

Ternary Operator

  • = kortere if-else statement
conditie ? expressie1 : expressie2;

Waarde indien true

Waarde indien false

Ternary Operator

  • Handig om code in te korten
let drankje;

if (leeftijd >= 16) {
  drankje = "🍻";
} else {
  drankje = "🥛";
}
const drankje = (leeftijd >= 16) ? "🍻" : "🥛";

Switch statement

Switch statement

  • = alternatief voor meerdere if-else-voorwaarden
  • vergelijkt een waarde met verschillende vaste opties (cases)
  • Voorziet een default waarde
switch (variable) {
  case value1:
    // code indien variable === value1
    break;
    
  default:
    // code in alle andere gevallen
}

Voorbeeld switch

const dag = "maandag";

switch (dag) {
  case "maandag":
    console.log("Begin van de week!");
    break;
    
  case "vrijdag":
    console.log("Bijna weekend!");
    break;
    
  default:
    console.log("Een gewone dag.");
}