1 June 2019 /33 Conceitos
Entender os conceitos básicos de uma linguagem de programação é essencial para qualquer dev que deseja de fato dominar a mesma, no mundo do JavaScript um dos conceitos mais básicos e importantes é o callstack (pilha de chamadas) que basicamente define em qual ordem as funções do seu programa serão executadas, neste artigo você irá aprender tudo que precisa para entender de uma vez por todas esse conceito.
Este é o primeiro artigo da série 33 conceitos de JavaScript que todo desenvolvedor deveria conhecer, baseado neste projeto.
O que é a pilha de chamadas
A pilha de chamadas é maneira como o compilador do JavaScript organiza as múltiplas funções que serão executadas em um programa, sempre que uma função é chamada ela é adicionada ao topo da pilha e executada na ordem LIFO(Last In, First Out) que no português signifca último a chegar primeiro a sair, uma vez que a função é totalmente executada ele é removida da pilha e o código continua a ser executado de onde parou antes de chamar a função.
Se uma pilha de chamadas fica muito grande (isso acontece facilmente se fizer uma função recursiva errada.) o compilador gera o erro "stack overflow".
Confira no GIF acima uma explicação mais visual da ordem em que o programa é executado.
// [1]  Código executado antes da função digaOla
// [2] *Continua executando
return 'Olá!';
// chama a função de `bemVindo`
// [3]  Resto do programa
O código acima será executado na seguinte ordem:
O contexto global (execution context) é criado ( para ilustrar vou chamar o contexto global de main() na pilha de chamadas, mas observe que esse nome não foi declarado no código poderia ser qualquer coisa), e as funções são salvas na memória, o runtime do js avalia o programa até chegar a chamada da função bemVindo.
A Função bemVindo é adicionada a pilha de chamada.
O código da função bemVindo() é executado até chegar a função digaOla()
A função digaOla() por sua vez é adicionada no topo pilha de chamada.
digaOla
O Código da função digaOla() é executado até o fim e retorna 'Olá'.
Quando a função digaOla() da o seu retorno ela é removida da pilha de chamadas.
A funcão bemVindo() volta a ser executada apartir da linha de onde o programa tinha parado até fim.
Por fim função bemVindo() retorna undefined e é removida da pilhas chamadas e o contexto global volta ao topo do callstack que chamamos no caso aqui chamamos de main(),vale lembrar que toda função no JavaScript tem um retorno implicito (undefined ou this) caso o return não seja especificado.
De maneira resumida começamos com uma pilha vazia, e as funções do programa são adicionadas a pilha de chamadas conforme elas são chamadas no código, a execução acontece na ordem LIFO ( Last In, First Out), ou seja a última função adiciona a pilha é sempre a primeira a ser executada.
Callstack - MDN web docs : https://developer.mozilla.org/en-US/docs/Glossary/Call_stack
Understanding Javascript Function Executions — Call Stack, Event Loop , Tasks & more : https://medium.com/@gaurav.pandvia/understanding-javascript-function-executions-tasks-event-loop-call-stack-more-part-1-5683dea1f5ec
Espero que esse artigo tenha te ajudo, e até a próxima.
André Dutra De Oliveira
Fullstack developer, atualmente trabalhando na Avec Brasil no desenvolvimento de microservices utilizando Node.js, TypeScript, Nestjs, Docker entre outras coisas.