JavaScript Academy · leksjon

Kallstakken

Se hvordan funksjonskall spores.

Leksjon 1 av 413 trinn

Kallstakken er en gratis leksjon i JavaScript Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i JavaScript Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i JavaScript Academy inneholder totalt 4 leksjoner.

Hva er kallstakken?

Kallstakken er måten JavaScript holder oversikt over hvilken funksjon som kjører, og hvor den skal returnere. Hvert funksjonskall legges øverst; når det er ferdig, tas det av igjen.

Det er en LIFO-struktur: Last In, First Out.

Legge på og ta av stakken

Når De kaller en funksjon, legges en stack frame på stakken. Når funksjonen returnerer, tas rammen av. Følg med på rekkefølgen til loggene når kallene nøstes.

function first() {
  console.log('first start');
  second();
  console.log('first end');
}

function second() {
  console.log('second');
}

first();

LIFO i praksis

Funksjonen som sist ble kalt, må bli ferdig før funksjonen under den kan fortsette. Det indre kallet fullføres først, selv om det startet sist.

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();

Synkront betyr blokkerende

JavaScript kjører én ting om gangen i én tråd. Så lenge stakken inneholder rammer, kjører ingenting annet. Synkron kode blokkerer til den er ferdig.

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');

Returverdier flyter nedover

Når hver ramme tas av, flyter returverdien tilbake til kallet som venter under den på stakken.

function square(n) {
  return n * n;
}
function sumOfSquares(a, b) {
  return square(a) + square(b);
}

console.log(sumOfSquares(3, 4));

Rekursjon vokser stakken

Hvert rekursive kall legger til en ny ramme. Stakken vokser til basistilfellet nås, og deretter avvikles rammene én etter én.

function countdown(n) {
  if (n === 0) {
    console.log('liftoff');
    return;
  }
  console.log(n);
  countdown(n - 1);
}

countdown(3);

Stack overflow

Stakken har begrenset størrelse. Rekursjon uten et basistilfelle fortsetter å legge til rammer til motoren kaster RangeError: Maximum call stack size exceeded.

function endless(n) {
  return endless(n + 1);
}

try {
  endless(1);
} catch (e) {
  console.log(e.name);
}

Kjørerekkefølgen er forutsigbar

Fordi stakken følger LIFO strengt, og koden er synkron, er rekkefølgen på synkrone logger alltid deterministisk. De kan følge den trinn for trinn for hånd.

function outer() {
  console.log(1);
  inner();
  console.log(3);
}
function inner() {
  console.log(2);
}
outer();
console.log(4);

Når asynkronitet kommer inn

Kallstakken kjører bare synkron kode. Funksjoner som setTimeout overlater arbeidet til miljøet, som senere plasserer callback-funksjoner i køer. Disse callback-funksjonene kjører først når stakken er tom.

Dette er forbindelsen til event loop.

console.log('A');
setTimeout(() => console.log('B (later)'), 0);
console.log('C');

Stakken må tømmes først

Selv en tidtaker på null millisekunder venter til all synkron kode er ferdig. Callback-funksjonen kan ikke kjøre så lenge det finnes rammer på stakken.

console.log('sync 1');
setTimeout(() => console.log('timeout'), 0);
console.log('sync 2');
console.log('sync 3');

Hvorfor kallstakken er viktig

Hvis De forstår kallstakken, forstår De hvorfor lange synkrone løkker fryser en side, hvorfor rekursjon kan føre til stack overflow, og hvorfor asynkrone callback-funksjoner alltid kjører til slutt. Den er grunnlaget for alt i event loop.

function compute() {
  return [1, 2, 3].reduce((a, b) => a + b, 0);
}
console.log('before');
console.log(compute());
console.log('after');

Kort kontroll

Hvilket ordensprinsipp følger kallstakken?

Oppsummering: kallstakken

De har lært om motorens kjerne for kjøring:

  • Kallstakken holder oversikt over kjørende funksjoner i LIFO-rekkefølge.
  • JavaScript er entrådet, og synkron kode blokkerer.
  • Rekursjon vokser stakken og kan føre til stack overflow.
  • Asynkrone callback-funksjoner venter til stakken er tom, noe som leder oss til event loop.
Gratis å komme i gang

Lær deg JavaScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs
59
Leksjoner
200

Ofte stilte spørsmål

Er leksjonen «Kallstakken» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien JavaScript Academy, inkludert «Kallstakken», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i JavaScript Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Kallstakken»?

Se hvordan funksjonskall spores. Du øver på JavaScript Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med JavaScript Academy?

Ingen tidligere erfaring er nødvendig. JavaScript Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.

Hvor lang tid tar leksjonen «Kallstakken»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne JavaScript Academy-leksjonen?

Ja. Alle JavaScript Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

  1. Kallstakken
  2. Macrotasks og oppgavekøen
  3. Microtasks og Promises
  4. queueMicrotask og rekkefølge
← Tilbake til JavaScript Academy