DEV Community

Cover image for Dominando os fundamentos do JavaScript
Diego Dmitry
Diego Dmitry

Posted on

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!"
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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();

Enter fullscreen mode Exit fullscreen mode

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();

Enter fullscreen mode Exit fullscreen mode

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.

Retry later

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more