Pilha de Chamadas JavaScript: Call Stack
Aqui você aprenderá sobre a Pilha de Chamadas (Call Stack) que é um mecanismo para rastrear as chamadas de função.
English version: https://www.javascripttutorial.net/javascript-call-stack/
Introdução à Pilha de Chamadas JavaScript
O motor JavaScript usa uma Pilha de Chamadas (em inglês Call Stack) para gerenciar contextos de execuções, sendo o contexto de execução global e os contextos de execução de funções.
Para entender os contextos de execuções, veja esse tutorial:
A Pilha de Chamadas funciona com base no princípio LIFO (last-in-first-out), ou seja, "o último a entrar é o primeiro a sair".
Quando você executa um script, o motor JavaScript cria um contexto de execução global e coloca no topo de pilha de chamadas.
Sempre que uma função é chamada, o motor JavaScript cria um Contexto de Execução de Função para essa função, colocando-o no topo da pilha de chamadas e começa a executar a função.
Se uma função chamar outra função, o motor JavaScript criará um novo Contexto de Execução de Função para essa nova e o colocará no topo da pilha de chamadas.
Quando a função atual é concluída, o motor JavaScript a tira da pilha de chamadas e retorna a execução de onde parou na última listagem de código.
O script irá parar quando a pilha de chamadas estiver vazia.
Exemplo de Pilha de Chamadas JavaScript
Veja o seguinte script:
Quando o script é executado, o motor JavaScript coloca o Contexto de Execução Global (denominado main() ou global()) na pilha de chamadas.
O Contexto de Execução Global entra na fase de criação e passa para a fase de execução.
O motor JavaScript executa a chamada da a função average(10, 20), cria um Contexto de Execução de Função para a função average() e a coloca no topo da pilha de chamadas:
O motor JavaScript começa a executar a average() pois é ela que está no topo da pilha de chamadas.
A função average() chama a função add(a, b). Nesse ponto, o motor JavaScript cria outro Contexto de Execução de Função para a função add() e o coloca no topo da pilha de chamadas:
O motor JavaScript executa a função add() e a tira da pilha de chamadas:
Nesse ponto, a função average() está no topo da pilha de chamadas, o motor JavaScript a executa e a tira da pilha de chamadas:
Agora a pilha de chamadas está vazia, então o script interrompe a execução:
A imgem a seguir ilustra o status geral da Pilha de Chamadas em todas as etapas:
Estouro de Pilha: Stack Overflow
A Pilha de Chamadas tem um tamanho fixo, dependendo da implementação do ambiente de host, seja no navegador ou no Node.js.
Se o número de contextos de execução exceder o tamanho da pilha, ocorrerá um Estouro de Pilha (Stack Overflow).
Por exemplo, quando você executa uma função recursiva que não tem uma condição de saída, isso resultará em um erro de Estouro de Pilha:
JavaScript Assíncrono
JavaScript é uma linguagem de programação de thread único. O motor JavaScript possui apenas uma pilha de chamadas, de modo que só pode fazer uma coisa por vez.
Ao executar um script, o motor JavaScript executa o código de cima para baixo, linha por linha. Em outras palavras, JavaScript é síncrono.
Assíncrono é o oposto de síncrono, o que significa que ocorrem coisas ao mesmo tempo. Então como o JavaScript consegue carregar tarefas assíncronas, como Callbacks (retornos de chamadas), Promises e async/await? é aqui que o Event Loop (Repetição Infinita de Eventos) entra em cena, que abordaremos no próximo tutorial:
Neste tutorial você aprendeu sobre a pilha de chamadas do JavaScript que ajuda a controlar os contextos de execução ou chamadas de funções.
Veja o índice de todos os tutoriais JavaScript
Confira uma série de outros tutoriais JavaScript que eu escrevi, clicando no link abaixo: