De call stack
Bekijk hoe functieaanroepen worden bijgehouden.
De call stack is een gratis JavaScript Academy-les op CoddyKit. Dit is les 1 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject JavaScript Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus JavaScript Academy bevat in totaal 4 lessen.
Wat is de aanroepstack?
De aanroepstack houdt bij welke functie momenteel wordt uitgevoerd en waarnaar moet worden teruggekeerd. Elke functieaanroep wordt boven op de stack geplaatst; zodra de functie klaar is, wordt de aanroep weer verwijderd.
Het is een LIFO-structuur: laatst erin, eerst eruit.
Op de stack plaatsen en verwijderen
Wanneer je een functie aanroept, wordt er een stackframe op de stack geplaatst. Wanneer de functie een waarde retourneert, wordt het frame verwijderd. Let op de volgorde van de logberichten wanneer aanroepen genest zijn.
function first() {
console.log('first start');
second();
console.log('first end');
}
function second() {
console.log('second');
}
first();LIFO in actie
De meest recent aangeroepen functie moet klaar zijn voordat de functie eronder verdergaat. De binnenste aanroep wordt als eerste voltooid, ook al is die als laatste gestart.
function a() {
console.log('enter a');
b();
console.log('exit a');
}
function b() {
console.log('enter b');
c();
console.log('exit b');
}
function c() {
console.log('c runs');
}
a();Synchroon betekent blokkerend
JavaScript voert op één thread één ding tegelijk uit. Zolang er frames op de stack staan, wordt er niets anders uitgevoerd. Synchrone code blokkeert totdat ze klaar is.
console.log('start');
function busy() {
let sum = 0;
for (let i = 0; i < 1000; i++) sum += i;
return sum;
}
console.log(busy());
console.log('end');Retourwaarden stromen omlaag
Wanneer elk frame wordt verwijderd, stroomt de retourwaarde terug naar de aanroeper die eronder op de stack wacht.
function square(n) {
return n * n;
}
function sumOfSquares(a, b) {
return square(a) + square(b);
}
console.log(sumOfSquares(3, 4));Recursie laat de stack groeien
Elke recursieve aanroep voegt een nieuw frame toe. De stack groeit totdat het basisgeval wordt bereikt en wordt daarna frame voor frame afgebouwd.
function countdown(n) {
if (n === 0) {
console.log('liftoff');
return;
}
console.log(n);
countdown(n - 1);
}
countdown(3);Stackoverloop
De stack heeft een eindige grootte. Recursie zonder basisgeval blijft frames toevoegen totdat de engine RangeError: Maximum call stack size exceeded genereert.
function endless(n) {
return endless(n + 1);
}
try {
endless(1);
} catch (e) {
console.log(e.name);
}De uitvoeringsvolgorde is voorspelbaar
Omdat de stack strikt volgens LIFO werkt en synchroon is, is de volgorde van synchrone logberichten altijd deterministisch. Je kunt die met de hand volgen.
function outer() {
console.log(1);
inner();
console.log(3);
}
function inner() {
console.log(2);
}
outer();
console.log(4);Waar asynchroniciteit begint
De aanroepstack voert alleen synchrone code uit. Functies zoals setTimeout geven werk door aan de omgeving, die later terugbelfuncties in wachtrijen plaatst. Deze functies worden pas uitgevoerd wanneer de stack leeg is.
Dit vormt de brug naar de eventlus.
console.log('A');
setTimeout(() => console.log('B (later)'), 0);
console.log('C');De stack moet eerst leeg zijn
Zelfs een timer van nul milliseconden wacht totdat alle synchrone code is voltooid. De terugbelfunctie kan niet worden uitgevoerd zolang er frames op de stack staan.
console.log('sync 1');
setTimeout(() => console.log('timeout'), 0);
console.log('sync 2');
console.log('sync 3');Waarom de aanroepstack belangrijk is
Als je de aanroepstack begrijpt, snap je waarom lange synchrone lussen een pagina laten vastlopen, waarom recursie kan overlopen en waarom asynchrone terugbelfuncties altijd als laatste worden uitgevoerd. Dit vormt de basis voor alles in de eventlus.
function compute() {
return [1, 2, 3].reduce((a, b) => a + b, 0);
}
console.log('before');
console.log(compute());
console.log('after');Korte controle
Welk ordeningsprincipe volgt de aanroepstack?
Samenvatting: de aanroepstack
Je hebt de uitvoeringskern van de engine geleerd:
- De aanroepstack houdt uitgevoerde functies bij in LIFO-volgorde.
- JavaScript gebruikt één thread en synchrone code blokkeert.
- Recursie laat de stack groeien en kan een overloop veroorzaken.
- Asynchrone terugbelfuncties wachten totdat de stack leeg is, wat ons naar de eventlus leidt.
Leer JavaScript 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
- 59
- Lessen
- 200
Veelgestelde vragen
Is de les “De call stack” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad JavaScript Academy, waaronder “De call stack”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus JavaScript Academy bevat in totaal 4 lessen.
Wat leer ik in “De call stack”?
Bekijk hoe functieaanroepen worden bijgehouden. Je oefent met JavaScript 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 JavaScript Academy te beginnen?
Ervaring vooraf is niet nodig. JavaScript 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 “De call stack”?
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 JavaScript Academy?
Ja. Elke les over JavaScript 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.