📦 Variabelen en datatypes
⏱ Geschatte leestijd: 20 minuten · 7 stappen
In de vorige les schreef je je eerste JavaScript-code met console.log(). Nu leer je variabelen: de manier waarop je informatie opslaat en hergebruikt in je programma. Ook maak je kennis met de belangrijkste datatypes en template literals.
1
let vs const
Wat betekent dit?
Een variabele is een benoemde opslagplaats voor een waarde. In modern JavaScript gebruik je let en const. Met let kun je de waarde later opnieuw toewijzen, met const niet.
let leeftijd = 17;
leeftijd = 18; // ✓ toegestaan met let
console.log(leeftijd); // 18
const naam = "Sara";
// naam = "Daan"; // ✗ TypeError — const kan niet opnieuw worden toegewezen
console.log(naam); // Sara
🚫 Gebruik nooit var! var heeft functie-scope in plaats van block-scope, wat tot verwarrende bugs leidt. Gebruik altijd const (standaard) en let wanneer je de waarde moet aanpassen.
2 Datatypes: string en number
JavaScript heeft meerdere datatypes — soorten waarden die je kunt opslaan. De meest gebruikte zijn strings en numbers.
// String: tekst tussen aanhalingstekens
const voornaam = "Daan";
const achternaam = 'de Vries'; // enkele of dubbele quotes
// Number: getal zonder aanhalingstekens
const leeftijd = 20;
const prijs = 9.99;
// ⚠️ Opgelet: string + number = string!
console.log("Leeftijd: " + leeftijd); // "Leeftijd: 20"
console.log("5" + 3); // "53" ← string!
console.log(5 + 3); // 8 ← number
💡 Tip: De +-operator met een string doet aaneenschakeling (concatenation), niet optelling. In stap 5 leer je hoe je dit netjes oplost met template literals.
3 Boolean, null en undefined
Drie bijzondere datatypes
Boolean heeft slechts twee mogelijke waarden: true of false. Handig voor aan/uit-condities.
null gebruik je om bewust aan te geven dat er geen waarde is.
undefined krijg je automatisch als een variabele gedeclareerd is maar nog geen waarde heeft.
const isStudent = true;
const heeftRijbewijs = false;
console.log(isStudent); // true
const geselecteerd = null; // bewust leeg
console.log(geselecteerd); // null
let score; // gedeclareerd maar niet toegewezen
console.log(score); // undefined
4
De typeof-operator
Wat betekent dit?
Met typeof kun je opvragen welk datatype een waarde of variabele heeft. Het geeft een string terug zoals "string", "number", "boolean", "undefined" of "object".
console.log(typeof "Hallo"); // "string"
console.log(typeof 42); // "number"
console.log(typeof true); // "boolean"
console.log(typeof undefined); // "undefined"
console.log(typeof null); // "object" ← bekende JavaScript-eigenaardigheid!
const naam = "Sara";
console.log(typeof naam); // "string"
💡 Wist je dat? typeof null geeft "object" terug — dat is een historische bug in JavaScript die om compatibiliteitsredenen nooit is opgelost. Onthoud gewoon dat null geen object is!
5 Template literals
Wat betekent dit?
Template literals zijn strings die je schrijft met backticks (`) in plaats van aanhalingstekens. Met ${'{'}expressie{'}'} kun je variabelen en berekeningen direct in de string invoegen. Ze ondersteunen ook meerdere regels.
const naam = "Sara";
const leeftijd = 20;
// Oude manier (string concatenation)
console.log("Hallo, " + naam + "! Je bent " + leeftijd + " jaar oud.");
// Template literal (aanbevolen)
console.log(`Hallo, ${naam}! Je bent ${leeftijd} jaar oud.`);
// Expressies zijn ook mogelijk
console.log(`Volgend jaar ben je ${leeftijd + 1}.`);
// Meerdere regels
const bericht = `Beste ${naam},
Welkom op het platform!`;
console.log(bericht);
✓ Gebruik altijd template literals wanneer je variabelen in een string wilt invoegen. Ze zijn leesbaarder dan string concatenation met +.
6 Oefening 1: Variabelen en typeof
Opdracht:
Declareer vier variabelen: naam (string), leeftijd (number), isStudent (boolean) en een vierde naar keuze. Log elke variabele samen met typeof.
✓ Minimaal 4 variabelen gedeclareerd met let of const
✓ typeof gebruikt
7 Eindopdracht: Persoonsprofielpagina
Opdracht:
Maak variabelen voor een persoonsprofielprofiel (naam, leeftijd, stad, en minimaal één andere). Log daarna een template literal met een volledige zin, bijvoorbeeld: "Mijn naam is Sara en ik ben 20 jaar oud."
✓ Minimaal 3 variabelen gedeclareerd
✓ Een template literal met backticks (`) en ${'$'}{'{'}...{'}'}
Goed gedaan! Je beheerst nu variabelen en datatypes.
In les 3 leer je condities — zodat je code beslissingen kan nemen.
// ── let vs const ──────────────────────────────────
let score = 0;
score = 10; // ✓ let mag opnieuw toegewezen worden
const naam = "Sara"; // const mag NIET opnieuw worden toegewezen
// ── Datatypes ─────────────────────────────────────
const voornaam = "Daan"; // string
const leeftijd = 20; // number
const isStudent = true; // boolean
const geselecteerd = null; // null (bewust leeg)
let onbekend; // undefined (nog niet toegewezen)
// ── typeof ────────────────────────────────────────
console.log(typeof voornaam); // "string"
console.log(typeof leeftijd); // "number"
console.log(typeof isStudent); // "boolean"
console.log(typeof null); // "object" ← historische bug in JS
// ── Template literals ─────────────────────────────
const stad = "Amsterdam";
console.log(`${naam} woont in ${stad} en is ${leeftijd} jaar oud.`);
console.log(`Volgend jaar is ${naam} ${leeftijd + 1}.`);