Vergelijken

Een vergelijking is een vraag met twee mogelijke antwoorden: true of false. Dat antwoord is een boolean, en je kunt hem opslaan en tonen als elke andere waarde:

const leeftijd = 16;
const meerderjarig = leeftijd >= 18;
console.log(meerderjarig);   // false

De vergelijkingsoperatoren:

Operator	Wat het doet
===	Gelijk aan
!==	Niet gelijk aan
>	Groter dan
<	Kleiner dan
>=	Groter of gelijk
<=	Kleiner of gelijk

5 > 3       // true
5 === 5     // true
5 === '5'   // false (number en string zijn niet gelijk)
'a' !== 'b' // true

Voorwaarden combineren met en/of

Soms is één vergelijking niet genoeg. Met && (en) en || (of) combineer je er twee; met ! (niet) draai je een boolean om.

const leeftijd = 15;
const lidVanDeClub = true;

leeftijd >= 12 && leeftijd <= 17   // true: allebei waar (en)
leeftijd < 12 || leeftijd >= 65    // false: geen van beide waar (of)
!lidVanDeClub                      // false: het omgekeerde van true

&& is alleen true als beide kanten waar zijn; || is al true zodra één kant waar is.

Predict

Wat logt dit?

console.log(16 >= 16);
console.log('16' === 16);
console.log(16 >= 12 && 16 <= 15);

Drie regels — welke waarden?

true, false, false. De eerste: 16 is groter of gelijk aan 16. De tweede: een string is nooit strikt gelijk aan een number. De derde: de linkerkant is waar, maar de rechterkant niet (16 is niet kleiner of gelijk aan 15), en && eist allebei.

Probeer en onderzoek

Probeer eerst zelf, klap dan het antwoord uit.

1. Klik op de knop en vul bij de prompt precies 18 in. Doe het daarna nog een keer met 17. Klopt de grens met wat je verwachtte?
   Antwoord

   Bij 18 staat er Meerderjarig: true, bij 17 Meerderjarig: false. >= betekent groter of gelijk, dus 18 zelf hoort er al bij.
2. Verander leeftijd >= 18 in leeftijd === 18, haal Number() weg en vul 18 in. Wat toont de pagina nu, en waarom?
   Antwoord

   Meerderjarig: false, ook al typte je 18. Zonder Number() is leeftijd de string '18', en === vindt een string nooit gelijk aan het number 18.
3. Zet Number() terug en voeg in de functie, onder de andere console.log, de regel console.log(leeftijd === '18'); toe. Vul 18 in. Hoe verklaar je wat de console logt?
   Antwoord

   De console logt false. Door Number() is leeftijd nu het number 18, en dat is niet strikt gelijk aan de string '18'.

Editor laden...

Opdracht 1: Brommer-check

Pas de startcode aan: de check wordt "mag je brommer rijden" (dat mag vanaf 16). Toon Brommer rijden: gevolgd door de boolean.

Editor laden...

Tip

Er veranderen drie dingen: de grenswaarde, de naam van de boolean-variabele en de zin op de pagina.

Antwoord

function check() {
  const leeftijd = Number(prompt('Hoe oud ben je?'));
  const magBrommerRijden = leeftijd >= 16;
  document.getElementById('uitvoer').textContent = 'Brommer rijden: ' + magBrommerRijden;
  console.log('leeftijd is', leeftijd, 'en de check geeft', magBrommerRijden);
}

document.getElementById('knop').addEventListener('click', check);

Opdracht 2: Geheime code

Vraag met een prompt om de geheime code en toon of hij klopt: vergelijk de invoer met 'open sesam' en zet de boolean op de pagina.

Editor laden...

Tip

Strings vergelijk je ook met ===. Hier is Number() juist fout: de code is tekst.

Antwoord

function check() {
  const invoer = prompt('Wat is de geheime code?');
  const klopt = invoer === 'open sesam';
  document.getElementById('uitvoer').textContent = 'Code klopt: ' + klopt;
}

document.getElementById('knop').addEventListener('click', check);

Let op hoofdletters: 'Open Sesam' is een andere string dan 'open sesam', dus de vergelijking geeft dan false.

Opdracht 3: Kortingschecker

Bouw een kortingschecker voor een zwembad: kinderen onder 12 én 65-plussers krijgen korting. Vraag de leeftijd met een prompt en toon Korting: met de boolean. Log ook de twee losse vergelijkingen in de console.

Editor laden...

Tip

"Onder 12 óf 65-plus" is één boolean met || erin. Schrijf een functie checkKorting en koppel hem met addEventListener aan de knop.

Antwoord

function checkKorting() {
  const leeftijd = Number(prompt('Hoe oud ben je?'));
  const korting = leeftijd < 12 || leeftijd >= 65;
  document.getElementById('uitvoer').textContent = 'Korting: ' + korting;
  console.log('onder 12:', leeftijd < 12);
  console.log('65-plus:', leeftijd >= 65);
}

document.getElementById('knop').addEventListener('click', checkKorting);

Er gaat iets mis

== lijkt te werken, maar verrast

console.log('5' == 5);    // true - huh?
console.log('5' === 5);   // false

Naast === bestaat ook ==. Die zet de waarden eerst stiekem om naar hetzelfde type, waardoor een string ineens "gelijk" is aan een number. Dat lijkt handig, maar het verstopt precies de fouten die je met typeof en Number() net hebt leren zien. Gebruik altijd === (en !==): die vergelijkt waarde én type, zonder verrassingen.