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

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

= 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

= 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.");
}

9. Conditionals

9. Conditionals

Lecturer GDM PRO

9. Conditionals

More from Lecturer GDM