Aula 70 — Call Stack e Execution Context

Na aula anterior, entendemos que o JavaScript executa código em fases e que tudo acontece de forma organizada.

Agora vamos responder a uma pergunta essencial:

onde e como o JavaScript controla tudo o que está sendo executado?

Para isso, vamos conhecer dois conceitos fundamentais:

• Execution Context (Contexto de Execução)
• Call Stack (Pilha de chamadas)

🎯 Objetivo da aula

Ao final desta aula, você será capaz de:

• Entender o que é um Execution Context
• Compreender como o Call Stack funciona
• Visualizar a execução de funções passo a passo
• Entender por que erros de stack acontecem
• Preparar o terreno para Event Loop e assincronicidade

O que é um Execution Context?

Sempre que o JavaScript executa código, ele cria um Contexto de Execução.

Um Execution Context é um ambiente onde o código é:

• Analisado
• Preparado
• Executado

Podemos pensar nele como uma “caixa” onde o JavaScript guarda tudo o que precisa para executar aquele trecho de código.

Tipos de Execution Context

Existem três tipos principais:

• Global Execution Context
• Function Execution Context
• Eval Execution Context (raro)

Neste curso, vamos focar nos dois primeiros.

Global Execution Context

Quando um arquivo JavaScript começa a ser executado, o JavaScript cria automaticamente o:

Global Execution Context.

É nele que:

• Variáveis globais são registradas
• Funções globais são registradas
• O código começa a rodar

Function Execution Context

Toda vez que uma função é chamada, o JavaScript cria um novo:

Function Execution Context.

Esse contexto existe apenas enquanto a função está sendo executada.

Exemplo simples

 
  function primeira() 
  { 
    console.log("Dentro da primeira"); 
  }
  function segunda() 
  {
    console.log("Antes da primeira");
    primeira();
    console.log("Depois da primeira");
  }
  segunda();

 
  segunda(); // Saída será: 
  // Antes da primeira // Dentro da primeira // Depois da primeira 

Agora entra o Call Stack

O Call Stack é uma estrutura de dados que o JavaScript usa para:

• Controlar quais funções estão sendo executadas
• Definir quem entra e quem sai da execução

Ele funciona como uma pilha:

• O último a entrar é o primeiro a sair

Passo a passo do Call Stack

Vamos acompanhar o código anterior:

• O contexto global entra na pilha
• segunda() é chamada → entra na pilha
• primeira() é chamada → entra na pilha
• primeira() termina → sai da pilha
• segunda() continua
• segunda() termina → sai da pilha

Visualização mental

Imagine o Call Stack assim:

 | primeira() | | segunda() | | global | 

Sempre o topo da pilha é o que está sendo executado.

Erros de Call Stack

Quando uma função chama a si mesma sem controle, o Call Stack cresce indefinidamente.

 function loop() { loop(); }

loop();

 loop(); // Erro: Maximum call stack size exceeded 

Por que isso é tão importante?

Porque o Call Stack explica:

• Por que o JavaScript é síncrono
• Por que funções bloqueiam a execução
• Por que precisamos de assincronicidade

E isso nos leva diretamente ao próximo conceito.

Na próxima aula, vamos entender como o JavaScript consegue lidar com tarefas assíncronas através do Event Loop.