Este post destina-se a aprofundar alguns dos conceitos mais importantes de javascript para ajudá-lo a escrever um código melhor.

Se você gosta do modo escuro, pode ler este artigo aqui .

A pilha de chamadas é uma estrutura de dados LIFO ( Last In First Out ). Cada vez que uma função é invocada, um contexto de execução é criado e enviado para o topo da pilha de chamadas. Quando a execução termina, o contexto de execução é retirado da pilha de chamadas.

Javascript é uma linguagem de encadeamento único, o que significa que possui uma pilha de chamadas e, portanto, pode fazer apenas uma coisa por vez. Agora, uma coisa importante que quero mencionar rapidamente é que o javascript assíncrono é possível devido a um conjunto de APIs do navegador, como a fila de retorno de chamada. Na verdade, não faz parte da linguagem javascript.

Quando uma função é invocada, o contexto de execução é criado e colocado no topo da pilha de chamadas e, quando a função termina, ela é retirada da pilha.

Cada entrada na pilha de chamadas é chamada de Stack Frame .

Como o contexto de execução é anexado à pilha

Vamos pegar uma função simples:

function foo() {
  bar()
}

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

foo()

      
                

                    
                    
                
            

Vejamos como são esses erros que normalmente encontramos em nosso console quando algo está errado:

function foo() {
  bar()
}

function bar() {
  baz()
}

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

foo()

explodindo a pilha

Isso acontece às vezes com loops ou recursão, e tudo o que isso significa é que a pilha de chamadas estoura. Isso acontece porque um contexto de execução continua sendo anexado e há um limite para isso.

function foo() {
  foo()
}

foo()

Um último exemplo para levar o ponto para casa

Preste atenção em cada quadro de pilha na ilustração abaixo.

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

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

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

foo()