Variables & Data Types

let & const

In moderne JavaScript gebruik je let en const om variabelen te declareren. Dit zijn de nieuwe en betere manieren vergeleken met var.

const - Voor waarden die niet veranderen

Gebruik const wanneer waarde van variabele niet opnieuw toegewezen moet worden:

const naam = 'Jan';
const leeftijd = 25;
const PI = 3.14159;

console.log(naam); // "Jan"

// Dit geeft ERROR:
naam = 'Piet'; // TypeError: Assignment to constant variable

let - Voor waarden die kunnen veranderen

Gebruik let wanneer je waarde wilt kunnen aanpassen:

let score = 0;
console.log(score); // 0

score = 10;
console.log(score); // 10

score = score + 5;
console.log(score); // 15

const vs let - Wanneer wat gebruiken?

const getallen = [1, 2, 3];
getallen.push(4);        // Werkt! Inhoud verandert
console.log(getallen);   // [1, 2, 3, 4]

getallen = [5, 6, 7];    // ERROR! Variabele hertoewijzen

Best Practice

• Gebruik standaard altijd const
• Gebruik let alleen als waarde écht moet veranderen
• Gebruik nooit meer var in nieuwe code

var (oude manier)

var is de oude manier om variabelen te declareren. In moderne JavaScript gebruik je dit niet meer.

Waarom var niet meer gebruiken?

var naam = 'Jan';
var naam = 'Piet'; // Werkt, maar verwarrend!

naam = 'Klaas';
console.log(naam); // "Klaas"

Voorbeeld waarom var verwarrend is:

// Met var (oude manier):
if (true) {
  var x = 10;
}
console.log(x); // 10 - x is buiten if-block beschikbaar!

// Met let (nieuwe manier):
if (true) {
  let y = 10;
}
console.log(y); // ERROR: y is not defined - zoals verwacht!

string

Een string is tekst. Je maakt strings met enkele quotes ('), dubbele quotes (") of backticks (`).

String declareren

const naam = 'Jan';           // Enkele quotes
const stad = "Amsterdam";     // Dubbele quotes
const bericht = `Hallo!`;     // Backticks (template literals)

Alle drie werken hetzelfde, maar backticks hebben extra mogelijkheden:

Template Literals (backticks)

const naam = 'Jan';
const leeftijd = 25;

// Oude manier (met + tekens):
const bericht1 = 'Hallo, ik ben ' + naam + ' en ik ben ' + leeftijd + ' jaar oud.';

// Nieuwe manier (met backticks):
const bericht2 = `Hallo, ik ben ${naam} en ik ben ${leeftijd} jaar oud.`;

console.log(bericht2); // "Hallo, ik ben Jan en ik ben 25 jaar oud."

Strings samenvoegen (concatenatie)

const voornaam = 'Jan';
const achternaam = 'Jansen';

// Met + operator:
const volledigeNaam = voornaam + ' ' + achternaam;
console.log(volledigeNaam); // "Jan Jansen"

// Met template literals (beter):
const volledigeNaam2 = `${voornaam} ${achternaam}`;
console.log(volledigeNaam2); // "Jan Jansen"

Handige string methods

const tekst = 'Hallo Wereld';

// Length property:
console.log(tekst.length); // 12

// Naar hoofdletters/kleine letters:
console.log(tekst.toUpperCase()); // "HALLO WERELD"
console.log(tekst.toLowerCase()); // "hallo wereld"

// Check of iets in string zit:
console.log(tekst.includes('Wereld')); // true
console.log(tekst.includes('xyz'));    // false

// Spaties verwijderen aan begin/eind:
const metSpaties = '  hallo  ';
console.log(metSpaties.trim()); // "hallo"

number

Een number is een getal. In JavaScript zijn alle getallen numbers, hele getallen of decimalen.

Numbers declareren

const leeftijd = 25;           // Heel getal
const prijs = 19.99;           // Decimaal getal
const negatief = -10;          // Negatief getal
const groot = 1000000;         // Groot getal
const metUnderscore = 1_000_000; // Leesbaar maken (moderne JS)

Rekenen met numbers

const a = 10;
const b = 3;

console.log(a + b);  // 13  (optellen)
console.log(a - b);  // 7   (aftrekken)
console.log(a * b);  // 30  (vermenigvuldigen)
console.log(a / b);  // 3.333... (delen)
console.log(a % b);  // 1   (modulo - rest van deling)
console.log(a ** b); // 1000 (machtsverheffen)

Verkort rekenen

let score = 10;

score = score + 5;  // Normaal
score += 5;         // Verkort - hetzelfde!

score = score - 3;  // Normaal
score -= 3;         // Verkort

score = score * 2;  // Normaal
score *= 2;         // Verkort

score = score / 2;  // Normaal
score /= 2;         // Verkort

// Extra verkort voor +1 en -1:
score++;  // score = score + 1
score--;  // score = score - 1

Nuttige Number methods

// String naar number:
const tekstGetal = '42';
const getal = Number(tekstGetal);
console.log(getal); // 42 (als number)
console.log(parseInt('42'));    // 42 (hele getallen)
console.log(parseFloat('3.14')); // 3.14 (decimalen)

// Number naar string:
const nummer = 42;
const tekst = nummer.toString();
console.log(tekst); // "42" (als string)

// Afronden:
const decimaal = 3.7;
console.log(Math.round(decimaal)); // 4 (dichtstbijzijnde)
console.log(Math.floor(decimaal)); // 3 (naar beneden)
console.log(Math.ceil(decimaal));  // 4 (naar boven)

// Random getal:
console.log(Math.random()); // Random tussen 0 en 1
console.log(Math.random() * 10); // Random tussen 0 en 10

console.log(0.1 + 0.2); // 0.30000000000000004

// Oplossing: afronden
const resultaat = (0.1 + 0.2).toFixed(2);
console.log(resultaat); // "0.30"

boolean

Een boolean heeft maar twee mogelijke waarden: true (waar) of false (onwaar).

Boolean declareren

const isIngelogd = true;
const heeftAbonnement = false;
const isVolwassen = true;

Vergelijkingsoperatoren (geven boolean terug)

const leeftijd = 25;

console.log(leeftijd > 18);   // true  (groter dan)
console.log(leeftijd < 18);   // false (kleiner dan)
console.log(leeftijd >= 25);  // true  (groter of gelijk)
console.log(leeftijd <= 20);  // false (kleiner of gelijk)
console.log(leeftijd === 25); // true  (gelijk aan)
console.log(leeftijd !== 30); // true  (niet gelijk aan)

// == controleert alleen waarde (slechte praktijk):
console.log(5 == '5');  // true

// === controleert waarde EN type (goede praktijk):
console.log(5 === '5'); // false
console.log(5 === 5);   // true

// Gebruik ALTIJD === en !==

Logische operators

const leeftijd = 25;
const heeftRijbewijs = true;

// && (AND) - beide moeten true zijn:
console.log(leeftijd >= 18 && heeftRijbewijs); // true

// || (OR) - één van beide moet true zijn:
console.log(leeftijd < 18 || heeftRijbewijs); // true

// ! (NOT) - keert waarde om:
console.log(!heeftRijbewijs); // false
console.log(!false);          // true

Booleans in if-statements

const leeftijd = 25;

if (leeftijd >= 18) {
  console.log('Je bent volwassen');
} else {
  console.log('Je bent minderjarig');
}

// Ternary operator (verkorte if/else):
const status = leeftijd >= 18 ? 'volwassen' : 'minderjarig';
console.log(status); // "volwassen"

// Falsy waarden (worden gezien als false):
false, 0, '', null, undefined, NaN

// Truthy waarden (worden gezien als true):
true, 1, 'tekst', [], {}, -1

// Voorbeeld:
if ('') {
  console.log('Dit wordt niet getoond'); // Lege string is falsy
}

if ('Hallo') {
  console.log('Dit wordt WEL getoond'); // String met tekst is truthy
}

undefined & null

Zowel undefined als null betekenen "geen waarde", maar ze hebben verschillende betekenissen.

undefined

undefined betekent dat variabele gedeclareerd is, maar nog geen waarde heeft:

let naam;
console.log(naam); // undefined

const persoon = {
  voornaam: 'Jan'
};
console.log(persoon.achternaam); // undefined (property bestaat niet)

const getallen = [1, 2, 3];
console.log(getallen[10]); // undefined (index bestaat niet)

null

null betekent opzettelijk geen waarde. Je gebruikt het om aan te geven dat iets bewust leeg is:

let gebruiker = null; // Nog geen gebruiker ingelogd

// Later:
gebruiker = {
  naam: 'Jan',
  email: 'jan@email.com'
};

// Uitloggen:
gebruiker = null; // Opzettelijk leeg maken

Verschil tussen undefined en null

Controleren op undefined/null

let naam;

// Check voor undefined:
if (naam === undefined) {
  console.log('Naam is undefined');
}

// Check voor null:
let gebruiker = null;
if (gebruiker === null) {
  console.log('Geen gebruiker ingelogd');
}

// Check voor beide (kort):
if (!naam) {
  console.log('Naam is undefined of null');
}

// Nullish coalescing operator (modern):
const weergaveNaam = naam ?? 'Onbekend';
console.log(weergaveNaam); // "Onbekend" (als naam null of undefined is)