Week 3 - If/else en state | JavaScript Cheatsheet

If/else (keuzes maken)#

Wat is if/else?
Met if/else kan je code laten beslissen wat er moet gebeuren. Als een voorwaarde waar is, doe je het ene. Anders doe je iets anders.

Basis voorbeeld:

let leeftijd = 17;
if (leeftijd >= 18) {
console.log("Je mag
stemmen!");
} else {
console.log("Je mag nog niet
stemmen");
}

Wat gebeurt er?

Check: Is leeftijd groter of gelijk aan 18?
Ja? -> Voer code tussen eerste { } uit
Nee? -> Voer code tussen else { } uit

Vergelijk operators#

Operators die je kunt gebruiken:

=== -> is precies gelijk aan
!== -> is niet gelijk aan
> -> groter dan
< -> kleiner dan
>= -> groter dan of gelijk aan
<= -> kleiner dan of gelijk aan

Voorbeelden:

// Boolean controleren
let aanwezigheid = true;
if (aanwezigheid === true) {
console.log("Fijn dat je er
bent!");
} else {
console.log("We missen je op
school");
}

// Stemgerechtigd ja/nee
let leeftijd = 20;
if (leeftijd >= 18) {
alert("Je mag stemmen!");
} else {
alert("Je bent nog te jong om te
stemmen");
}

Let op: Gebruik === (3 is-tekens) in plaats van == (2 is-tekens). Dit voorkomt fouten.

Waarom?

== controleert alleen de waarde
=== controleert waarde EN datatype

Voorbeeld:

"3" == 3 // true (JavaScript maakt automatisch van "3" het getal 3)
"3" === 3 // false (string is niet hetzelfde als number)

Conclusie: Gebruik altijd === omdat het betrouwbaarder is en bugs voorkomt.

State (geheugen in je app)#

Wat is state?
State is een variabele die onthoudt wat er gebeurt in je app. Bijvoorbeeld: hoevaak heb je de knop al geklikt? Die waarde moet ergens worden opgeslagen.

Simpele teller:

// State: onthoud hoeveel keer er geklikt is
let teller = 0;
function klik() {
teller = teller + 1; // of:
teller++;
console.log(teller);
}

Tip: teller++ is hetzelfde als teller = teller + 1

DOM aanpassen met variabele waarde#

Je kunt de waarde van een variabele direct in de HTML zetten:

let score = 42;
let naam = "Lisa";

// Zet de waarde in HTML
document.getElementById("score").innerHTML = score;
document.getElementById("naam").innerHTML = naam;

// Of gecombineerd:
document.getElementById("resultaat").innerHTML = naam + " heeft " + score + " punten!";

Veelgemaakte fouten#

if (leeftijd = 18) -> if (leeftijd === 18) (gebruik === voor vergelijken!)
Vergeten om state variabele buiten functie te zetten -> werkt niet!
if (leeftijd >= 18) zonder { } -> gebruik altijd haakjes!
Vergeten om innerHTML bij te werken -> gebruiker ziet niks