Ga naar hoofdinhoud

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:

OperatorWat 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 het zelf.​

Editor laden...

Investigate​

Experimenteer in het veld hierboven:

  • Vul bij de prompt precies 18 in. En daarna 17. Klopt de grens met wat je verwachtte?
  • Verander leeftijd >= 18 in leeftijd === 18, haal Number() weg en vul 18 in. Wat toont de pagina nu, en waarom?
  • Log console.log(leeftijd === '18') erbij (mét Number() er weer omheen) en vul 18 in. Verklaar de uitkomst.

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.