Questo post ha lo scopo di approfondire alcuni dei concetti javascript più importanti per aiutarti a scrivere codice migliore.

Se ti piace la modalità oscura, puoi leggere questo articolo qui .

Lo stack di chiamate è una struttura dati LIFO ( Last In First Out ). Ogni volta che viene richiamata una funzione, viene creato un contesto di esecuzione che viene spinto in cima allo stack di chiamate. Al termine dell'esecuzione, il contesto di esecuzione viene estratto dallo stack di chiamate.

Javascript è un linguaggio a thread singolo, il che significa che ha uno stack di chiamate e quindi può fare solo una cosa alla volta. Ora una cosa importante che voglio menzionare rapidamente è che javascript asincrono è possibile grazie a un set di API del browser come la coda di richiamata. In realtà non fa parte del linguaggio javascript.

Quando viene richiamata una funzione, il contesto di esecuzione viene creato e messo in cima allo stack delle chiamate e quando la funzione termina, viene estratta dallo stack.

Ogni voce nello stack di chiamate è chiamata Stack Frame .

Modalità di aggiunta del contesto di esecuzione allo stack

Prendiamo una semplice funzione:

function foo() {
  bar()
}

function bar() {
  console.log('bar')
}

foo()

      
                

                    
                    
                
            

Vediamo come appaiono quegli errori che di solito incontriamo nella nostra console quando qualcosa non va:

function foo() {
  bar()
}

function bar() {
  baz()
}

function baz() {
  throw new Error('this is an error')
}

foo()

Soffiare la pila

Ciò accade a volte con loop o ricorsione e tutto ciò significa che lo stack di chiamate va in overflow. Ciò accade perché un contesto di esecuzione continua ad essere aggiunto e c'è un limite a questo.

function foo() {
  foo()
}

foo()

Un ultimo esempio per portare a casa il punto

Prestare attenzione a ciascun frame dello stack nell'illustrazione sottostante.

function foo() {
  console.log('hi')
  bar()
  console.log('bye')
}

function bar() {
  console.log('bar')
  baz()
}

function baz() {
  console.log('baz')
}

foo()