Categorias
JavaScript

Entenda de uma vez por todas a pilha de chamadas (Callstack) do JavaScript

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”.

Gif da execução completa

Confira no GIF acima uma explicação mais visual da ordem em que o programa é executado.

Exemplo detalhado

function bemVindo() {
  // [1]  Código executado antes da função digaOla
  digaOla();
  // [2] *Continua executando
}
function digaOla() {
  return 'Olá!';
}

// chama a função de `bemVindo`
bemVindo();

// [3]  Resto do programa

O código acima será executado na seguinte ordem:

  1. 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.
  2. A Função bemVindo é adicionada a pilha de chamada. Callstack bemVindo ——— main()
  3. O código da função bemVindo() é executado até chegar a função digaOla()
  4. A função digaOla() por sua vez é adicionada no topo pilha de chamada.
Callstack
digaOla
bemVindo
———
main()

5) O Código da função digaOla() é executado até o fim e retorna ‘Olá’.
6) Quando a função digaOla() da o seu retorno ela é removida da pilha de chamadas.

Callstack
bemVindo
———
main()

7) A funcão bemVindo() volta a ser executada apartir da linha de onde o programa tinha parado até fim.
8) 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.

Callstack
main()

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.

Referências

Espero que esse artigo tenha te ajudo, e até a próxima.

Por André D. Oliveira

Formado em Ciência da Computação atualmente trabalho como desenvolvedor backend focado no desenvolvimento de aplicações utilizando arquitetura de serverless.
Curto: Node.js, TypeScript, Serverless Framework e muita coisa do AWS.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *