Dominando os fundamentos do JavaScript

Entender os conceitos principais que governam o comportamento da linguagem é crucial para se tornar um programador proficiente. Vamos aprofundar nos exemplos para solidificar nosso entendimento.

Contexto de Execução:

Sempre que uma função é invocada ou um script é executado, um Contexto de Execução é criado. O Contexto de Execução consiste em: Variable Environment, Scope Chain e uma referência para a palavra chave 'this'. O Variable Environment contém todas as variáveis e funções declaradas dentro do escopo atual, e a Scope Chain fornece acesso às variáveis nos ambientes lexicais externos.

var greeting = "Hello";

function greet(name) {
  var message = greeting + ", " + name + "!";
  return message;
}

greet("Alice"); // Output: "Hello, Alice!"

Quando a função de 'greet' é executada, um novo Contexto de Execução é criado e seu Ambiente de Variável(Variable Environment) conterá nome, mensagem e uma referência à variável de saudação do ambiente externo.

Global Environment e Global Object:

O Global Environment é o ambiente lexical mais externo em um programa JavaScript, representando o escopo global. Inclui todas as variáveis e funções globais.
No navegador, o Objeto Global(Global Object) é o objeto window, enquanto no Node.js é o objeto global.

Creation Phase and Hoisting:

Durante a fase de criação(creation phase), a memória é alocada para variáveis e funções, e as declarações de funções e variáveis são colocadas no topo de seu escopo.

console.log(hoistedVar); // Output: undefined
var hoistedVar = 42;

Neste exemplo, embora tentemos acessar hoistedVar antes de sua declaração, o JavaScript eleva a declaração e define seu valor inicial como undefined.

Em JavaScript, undefined é um valor primitivo que representa uma variável não inicializada.

Execution Context:

Após a Fase de Criação(creation phase), o código entra na Fase de Contexto de Execução, onde é executado linha por linha.

Execution Stack:

Execution Stack (ou Pilha de Execuções) é um mecanismo que acompanha a execução de funções. Quando uma função é invocada, ela é adicionada à pilha e, quando retorna, é removida da pilha.

function first() {
  console.log("First function");
  second();
}

function second() {
  console.log("Second function");
}

first();

A execução de first() adicionará first() à pilha, que por sua vez chama second() e o adiciona à pilha. Quando second() termina a execução, ele é removido da pilha, seguido por first().

Scope Chain

Todo contexto de execução tem uma referência ao seu ambiente externo.
O que é ambiente externo?
No caso da função 'b', seu ambiente externo é
Execução do Contexto Global(Global Context Execution).
Ambiente Lexical(Lexical Environment)?
Significa onde algo está escrito, fisicamente, no código.
Determina certas coisas, como o motor JavaScript decidirá e interpretará onde as coisas vivem, e onde as coisas vão ficar na memória, e como eles vão se conectar uns aos outros. As referências ao ambiente externo são o Scope Chain.

Scope

O escopo(scope) define a acessibilidade das variáveis em seu código. Ele determina onde as variáveis podem ser acessadas ou referenciadas.

function exampleScope() {
  var x = 10; // Local scope variable
  if (true) {
    var y = 20; // Function scope variable
    console.log(x + y);
  }
  console.log(x + y); // y is accessible here too
}

exampleScope();

Neste exemplo, x tem um escopo local dentro da função exampleScope e y tem um escopo de função dentro do bloco if.

Conclusão

Compreender o funcionamento interno do JavaScript, é vital para se tornar um desenvolvedor competente em JavaScript. De posse desse conhecimento, você saberá escrever um código limpo, eficiente e livre de bugs, tornando-o um desenvolvedor JavaScript mais confiante e capaz.