Variabelen: let, const, var en scope
Declareer variabelen met let, const en var. Leer blockscope en functiescope kennen en waarom const voor de meeste waarden de voorkeur heeft.
Variabelen: let, const, var en scope is een gratis Frontend Academy-les op CoddyKit. Dit is les 1 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Frontend Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Frontend Academy bevat in totaal 4 lessen.
Waarom variabelen?
Variabelen slaan waarden op, zodat je ze opnieuw kunt gebruiken, bijwerken en betekenisvolle namen kunt geven. JavaScript heeft drie manieren om variabelen te declareren: var (oud), let (modern, opnieuw toewijsbaar) en const (modern, constante binding).
const — De standaardkeuze
Declareer met const wanneer je de variabele niet opnieuw toewijst. Dit maakt je bedoeling duidelijk en voorkomt onbedoelde hertoewijzing. Let op: const voorkomt opnieuw binden, maar maakt objecten of arrays niet onveranderlijk.
const name = 'Alice'; // can't reassign
const PI = 3.14159;
const user = { age: 25 }; // object is mutable
user.age = 26; // OK — property change, not rebinding
// user = {}; // Error — can't reassign constlet — Wanneer je opnieuw moet toewijzen
Gebruik let wanneer de waarde verandert: voor lustellers, opgetelde totalen en statusvariabelen. let heeft blokbereik — het bestaat alleen binnen het dichtstbijzijnde omringende { }.
let score = 0;
score = score + 10; // OK
for (let i = 0; i < 3; i++) {
console.log(i); // 0, 1, 2
}
// console.log(i); // ReferenceError — i is out of scopevar — De verouderde declaratie
var heeft functiebereik (geen blokbereik) en wordt naar het begin van zijn functie gehesen. Dit veroorzaakt subtiele fouten. Vermijd var in moderne JavaScript; geef de voorkeur aan const en let.
function example() {
if (true) {
var x = 5; // function-scoped, not block-scoped
}
console.log(x); // 5 — still accessible here!
}Bereik: waar variabelen leven
Globaal bereik: gedeclareerd buiten elke functie of elk blok en overal toegankelijk. Functiebereik: gedeclareerd binnen een functie en alleen binnen die functie toegankelijk. Blokbereik: let/const binnen { } en alleen binnen dat blok toegankelijk.
Omhoog halen
Omhoog halen verplaatst declaraties tijdens het compileren naar het begin van hun bereik. var-declaraties worden omhoog gehaald en geïnitialiseerd met undefined. let en const worden wel omhoog gehaald, maar niet geïnitialiseerd — als je ze vóór de declaratie benadert, ontstaat er een fout in de tijdelijke dode zone.
Variabelen benoemen
Gebruik beschrijvende namen. Gebruik camelCase voor variabelen en functies (userName), UPPER_SNAKE_CASE voor constanten (MAX_RETRIES) en PascalCase voor klassen (UserProfile). Vermijd enkele letters, behalve in lussen (i, j).
Meerdere variabelen declareren
Je kunt meerdere variabelen in één instructie declareren, maar meestal is één declaratie per variabele duidelijker. Vermijd de vorm met komma's, omdat die het bereik en de typen minder duidelijk kan maken.
// Less clear:
let a = 1, b = 2, c = 3;
// Preferred:
const MAX = 10;
let count = 0;
const label = 'Score';De tijdelijke dode zone (TDZ)
Als je een let- of const-variabele vóór de declaratie in de code benadert, ontstaat er een ReferenceError. Deze zone tussen het begin van het blok en de declaratie heet de TDZ.
console.log(value); // ReferenceError: Cannot access 'value' before initialization
const value = 42;const met arrays en objecten
const voorkomt dat je de variabele opnieuw toewijst, maar de waarde waarnaar wordt verwezen kan nog steeds worden gewijzigd. Gebruik Object.freeze() voor een oppervlakkig onveranderlijk object of onveranderlijke patronen voor diepe onveranderlijkheid.
const items = [1, 2, 3];
items.push(4); // OK — mutates the array
items = []; // Error — can't reassign const
const config = Object.freeze({ maxAge: 30 });
config.maxAge = 99; // Silently fails in non-strict modeWaarom const verkiezen boven let?
Als je standaard const gebruikt, is code gemakkelijker te begrijpen: je weet dat de variabele niet ergens anders opnieuw wordt toegewezen. Gebruik pas let wanneer je de variabele echt opnieuw moet toewijzen. Deze gewoonte vermindert fouten en verbetert de leesbaarheid.
Korte controle
Wat is het belangrijkste verschil tussen let en var?
Samenvatting: variabelen en bereik
Geef de voorkeur aan const voor waarden die niet opnieuw worden toegewezen. Gebruik let voor veranderlijke waarden. Vermijd var. Met blokbereik (let/const) blijven variabelen binnen hun blok. Bij het omhoog halen wordt var geïnitialiseerd met undefined; let/const veroorzaken een TDZ-fout als je ze te vroeg benadert.
Leer HTML met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 41
- Lessen
- 163
Veelgestelde vragen
Is de les “Variabelen: let, const, var en scope” gratis?
Ja — de volledige tekst van “Variabelen: let, const, var en scope” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Frontend Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Frontend Academy bevat in totaal 4 lessen.
Wat leer ik in “Variabelen: let, const, var en scope”?
Declareer variabelen met let, const en var. Leer blockscope en functiescope kennen en waarom const voor de meeste waarden de voorkeur heeft. Je oefent met Frontend Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Frontend Academy te beginnen?
Ervaring vooraf is niet nodig. Frontend Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.
Hoe lang duurt de les “Variabelen: let, const, var en scope”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Frontend Academy?
Ja. Elke les over Frontend Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Variabelen: let, const, var en scope
- Datatypen: string, number, boolean, null en undefined
- Functies: declaraties, expressies en arrow functions
- Control flow: if, else, switch, for en while