Call Stack, Execution Context and Heap

Heap

Exemplo do heap da aplicação Google Chat

let num1 = 1
let num2 = num1

num1 += 1

console.log(num2)

1. Quando a variável num1 é iniciada, o JS cria um identificador único e aloca em um endereço na memória (ex. A001), o valor da variável também é armazenado nesse endereço de memória e fica no call stack.

2. Quando especificamos que num2 é igual a num1, significa que num2 será atribuída com o valor de num1, e não seu endereço de memória.

3. Ao alterar o valor de num1 para 2, o JS aloca um novo endereço de memória, e guarda o valor 2 nesse novo endereço (ex: A002). Isso acontece pois tipos primitivos são imutáveis.

Execution Context

• Global Execution Context: é o contexto padrão ou base, o código que não está dentro de qualquer função está nesse contexto. Duas coisas acontecem aqui: a criação do objeto global window (nos browsers); atribui esse objeto global à variável this; aloca memória para as funções e variáveis. Apenas um contexto global pode existir em uma aplicação.

• Functional Execution Context: sempre que uma função é executada, é criado um contexto para essa função

• Eval Function Execution Context: um código executado dentro da função eval() também tem seu próprio contexto. Porém o uso de eval é desestimulado: eval() - JavaScript | MDN (mozilla.org)

ExecutionContext = {
	// Estados obrigatórios:

	CodeEvaluationState: `qualquer estado necessário para executar, suspender e 
		reproduzir o código associado ao contexto atual`,
	Function: `se o contexto atual estiver computando o código de uma função,
		então o valor deste componente é a própria função, caso contrário é null`
	Realm: `agrupa o objeto global, todo o código que está associado ao escopo
		global e outras informações adicionais`,
	ScriptOrModule: `referência ao objeto do módulo ou script que originou a
		execução do código atual, caso não exista referência o valor é null`,

	// Estados adicionais:

	LexicalEnvironment: ``,
	VariableEnvironment: ``,
	PrivateEnvironment: `objeto com os membros privados das classes, null caso
		não existam classes`,
}

EnvironmentRecord

LexicalEnvironment

VariableEnvironment

Creation & Execution Phase

Call Stack

function greeting() {
   // [1] Some code here
   sayHi();
   // [2] Some code here
}
function sayHi() {
   return "Hi!";
}

// Invoke the `greeting` function
greeting();

// [3] Some code here

1. Quando o código acima é carregado no browser, a engine Javascript cria um global execution context.

2. Todas as funções são ignoradas até a invocação da função greeting

3. Cria um contexto de execução e adiciona a função greeting no call stack

Call Stack: greeting

1. Executa todo o código dentro da função greeting até a invocação da função sayHi

2. Cria um contexto de execução e adiciona a função sayHi no call stack

Call Stack: sayHi - greeting

1. Executa todo o código dentro da função sayHi

2. Retorna ao ponto que chamou a função sayHi e continua executando a função greeting

3. Exclui a função sayHi do call stack

Call Stack: greeting

1. Ao término da execução da função greeting, retorna para quem a invocou para continuar executando o código JS

2. Exclui a função greeting do call stack

Call Stack: vazia

Stack Overflow

References