JavaScript Academy · Lezione

Lo stack delle chiamate

Veda come vengono tracciate le chiamate di funzione.

Lo stack delle chiamate è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento JavaScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso JavaScript Academy include 4 lezioni in totale.

Che cos'è lo stack delle chiamate?

Lo stack delle chiamate è il meccanismo con cui JavaScript tiene traccia della funzione attualmente in esecuzione e del punto a cui deve restituire il controllo. Ogni chiamata di funzione viene inserita in cima; quando termina, viene rimossa.

È una struttura LIFO: Last In, First Out.

Inserimento e rimozione dallo stack

Quando si chiama una funzione, viene inserito uno stack frame. Quando la funzione restituisce un risultato, il frame viene rimosso. Osservi l'ordine dei log quando le chiamate sono annidate.

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

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

first();

LIFO in azione

La funzione chiamata più di recente deve terminare prima che quella sottostante possa riprendere. La chiamata interna termina per prima, anche se è iniziata per ultima.

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

Sincrono significa bloccante

JavaScript esegue una sola operazione alla volta su un singolo thread. Finché lo stack contiene frame, non viene eseguito altro. Il codice sincrono blocca l'esecuzione finché non termina.

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

I valori restituiti risalgono lo stack

Quando ogni frame viene rimosso, il suo valore restituito risale fino al chiamante che lo attende più in basso nello stack.

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

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

La ricorsione fa crescere lo stack

Ogni chiamata ricorsiva aggiunge un altro frame. Lo stack cresce fino al raggiungimento del caso base, poi si svuota un frame alla volta.

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

countdown(3);

Stack overflow

Lo stack ha una dimensione finita. Una ricorsione senza caso base continua ad aggiungere frame finché il motore non genera RangeError: Maximum call stack size exceeded.

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

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

L'ordine di esecuzione è prevedibile

Poiché lo stack è rigorosamente LIFO e l'esecuzione è sincrona, l'ordine dei log sincroni è sempre deterministico. È possibile ricostruirlo manualmente.

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

Quando entra in gioco l'asincronia

Lo stack delle chiamate esegue solo codice sincrono. Funzioni come setTimeout delegano il lavoro all'ambiente, che in seguito inserisce le callback nelle code. Queste callback vengono eseguite solo quando lo stack è vuoto.

Questo è il collegamento con l'event loop.

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

Lo stack deve prima svuotarsi

Anche un timer da zero millisecondi attende che tutto il codice sincrono termini. La callback non può essere eseguita finché nello stack rimangono dei frame.

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

Perché lo stack delle chiamate è importante

Comprendere lo stack delle chiamate spiega perché i cicli sincroni lunghi bloccano una pagina, perché la ricorsione può causare un overflow e perché le callback asincrone vengono sempre eseguite per ultime. È la base di tutto ciò che avviene nell'event loop.

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

Verifica rapida

Quale principio di ordinamento segue lo stack delle chiamate?

Riepilogo: lo stack delle chiamate

Ha imparato a conoscere il nucleo dell'esecuzione del motore:

Lo stack delle chiamate tiene traccia delle funzioni in esecuzione secondo l'ordine LIFO.
JavaScript è eseguito su un singolo thread e il codice sincrono blocca l'esecuzione.
La ricorsione fa crescere lo stack e può causare un overflow.
Le callback asincrone attendono che lo stack sia vuoto, introducendo così l'event loop.

Domande Frequenti

La lezione «Lo stack delle chiamate» è gratuita?

Sì — il testo completo di «Lo stack delle chiamate» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso JavaScript Academy, passa a CoddyKit PRO. Il corso JavaScript Academy include 4 lezioni in totale.

Cosa imparerò in «Lo stack delle chiamate»?

Veda come vengono tracciate le chiamate di funzione. Eserciti JavaScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare JavaScript Academy?

Non è richiesta alcuna esperienza precedente. JavaScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «Lo stack delle chiamate»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione JavaScript Academy?

Sì. Ogni lezione JavaScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a JavaScript Academy