if-statements

Er is een video beschikbaar bij deze les.

Toon de video

Basis van een if-statement

We gebruiken een if-statement om te kijken of iets waar, of niet waar is.
In onderstaande voorbeeld devlareren we een variabele myNumber met de waarde 15.
In de if-statement kijken we vervolgens of de waarde van myNumber groter is dan 17.

const myNumber = 15;
if (myNumber > 17) {
    alert('Het getal is groter dan 17');
}

De code die tussen de ronde haken staat wordt berekend/ bekeken, als de bewering/ berekning waar is (TRUE) dan wordt de code die tussen de accolades/ curley braces komt { } uitgevoerd. Omdat de variable in dit geval niet groter is dan 17 wordt de alert-box niet getoond. De conditie tussen de ronde haken is NIET WAAR of terwijl FALSE.

Operators

Je hebt al gezien dat we kunnen kijken of een variabele groter is dan een andere variabele. Het teken welke we daar gebruiken > noemen we de OPERATOR.
Er zijn meerdere operators:

IF - ELSE

Soms wil je iets uitvoeren als de (CONDITIE) waar is en als het niet waar is wil je iets anders uit laten voeren. Bekijk onderstaande code.

const myNumber = 18;
if (myNumber > 17) {
    alert('Het getal is groter dan 17');
} else {
    alert('Het getal is kleiner of gelijk aan 17');
}

Als je deze code uitvoert zal je een popup/ alert-box krijgen met de melding dat het getal niet groter is dan 17. Dit is natuurlijk correct.

IF - ELSE IF - ELSE

Soms wil je meerdere dingen controleren, bij leeftijden kan dat zijn of iemand jonger is dan 16 of tussen de 16 en 18 of juist ouder dan 18. In dat geval gebruik je een tweede 'if' statement. Dit is dan de else if.

const myAge = 19;
if (myAge < 16) {
    alert('Je bent onder de 16');
} else if (myAge >= 16 && myAge < 18) {
    alert('Je bent 16 of ouder maar jonger dan 18');
} else {
    alert('Je bent ouder dan 18');
}

Er is nu een else if toegevoegd. Je kan oneindig veel else-ifs toevoegen aan een if-statement maar bij meerdere else-ifs in een if-statement is het wellicht handiger om te kijken naar een switch-case.

AND en OR in een if-statement

In de opgave hierboven zie je dat in de tweede statement (myAge >= 16 && myAge < 18) twee keer een vergelijking staat. Door de && tekens koppel je twee of meerdere vergelijkingen aan elkaar.

&& - allen moeten waar zijn

Bij && moeten zowel de bewering links als rechts van de code waar zijn om het totaal waar te krijgen:
(14 > 13 && 2 > 1)
Bovenstaande is waar, immers is 14 groter dan 13 EN (&&) 2 is groter dan 1.
(450 > 120 && 750 > 980)
Bovenstaande geeft uiteindelijk false (niet waar) terug. Dit komt omdat het eerste stuk true (waar) geeft 450 > 120 450 is immers groter dan 120. Maar het tweede deel is niet waar 750 > 980 750 is NIET groter dan 980. Om dat een van de twee delen false is, is de hele bewering niet waar omdat de dubbele && aangeeft dat en links EN rechts waar moeten zijn.

|| - Een van de vergelijkingen moet waar zijn

Bij || moet een van de beweringen links of rechts van de || (OR) waar zijn. Laten we de code van hierboven nog eens bekijken
(14 > 13 || 2 > 1)
We hadden al geconstateerd dat 14 groter is dan 13. Omdat dit al waar is, is de tweede vergelijking niet van toepassing.
(450 > 120 || > 980)
Nu geeft bovenstaande code true (waar) terug. Bij een OR (||) moet een van de twee waar zijn. Omdat de eerste waar is, is het al goed. De tweede bewering wordt genegeerd. Als de eerste niet waar is, dan wordt er wel naar de tweede gekeken.

const myAge = 19;
if (myAge < 16) {
    alert('Je bent onder de 16');
} else if (myAge >= 16 && myAge < 18) {
    alert('Je bent 16 of ouder maar jonger dan 18');
} else {
    alert('Je bent ouder dan 18');
}

Er is nu een else if toegevoegd. Je kan oneindig veel else-ifs toevoegen aan een if-statement maar bij meerdere else-ifs in een if-statement is het wellicht handiger om te kijken naar een switch-case.