Como funciona o JavaScript: um guia visual🔥 🤖
Tags: javascript, programming, tutorial, braziliandevs
Published: 2023-01-06 11:57:06

JavaScript é uma das linguagens mais amadas e odiadas do mundo. É amado porque é potente. Você pode criar uma aplicação de pilha completa apenas aprendendo JavaScript e nada mais. Também é odiado porque se comporta de maneiras inesperadas e pertubadoras, o que, se você não investir na compreensão da linguagem, pode fazer com que você odeie.

Este artigo explicará como o JavaScript executa o código no navegador e aprenderemos isso por meio de gifs animados 😆. Depois de ler este artigo, você estará um passo mais perto de se tornar um desenvolvedor rockstar. 🎸😎

![Gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/unv6mm8nwtl01gjx88fq.gif)

## Contexto de execução

> _Tudo em JavaScript acontece dentro de um Contexto de Execução._

Quero que todos se lembrem dessa declaração, pois ela é essencial. Você pode assumir que esse contexto de execução é um grande contêiner, invocado quando o navegador deseja executar algum código JavaScript.

Neste contêiner, há dois componentes:

#### 1. Componente de memória

#### 2. Componente de código

O Componente de memória também é conhecido como ambiente variável. Neste componente de memória, variáveis e funções são armazenadas como pares chave-valor.

O componente de código é um local no contêiner onde o código é executado uma linha por vez. Esse componente de código também tem um nome sofisticado, chamado **"Thread of Execution"**. Eu acho que soa legal!


![Imagem de execução](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a69329bamzv2i83n7cl6.png)

**JavaScript é uma linguagem síncrona de thread único**. É porque ele só pode executar um comando por vez e em uma ordem específica.

### Execução do código

```jsx
var a = 2; 
var b = 4; 

var sum = a + b; 

console.log(sum);
```

Vamos dar um exemplo simples.

Neste exemplo simples, inicializamos duas variáveis, `a` e `b` e armazenamos 2 e 4, respectivamente.

Em seguida, adicionamos o valor de `a` e `b` e o armazenamento na variável `sum`.

Vamos ver como o JavaScript irá executar o código no navegador 🤖


![Execução do código](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w9jvotx7jgmzn5mw25qr.gif)

O navegador cria um contexto de execução global com dois componentes, ou seja, memória e componentes de código.

O navegador executará o código JavaScript em duas fases:

1. Fase de Criação de Memória
2. Fase de Execucação do Código

Na fase de criação da memória, o JavaScript examinará todo o código e alocará a memória para todas as variáveis e funções do código. Para variáveis, o JavaScript armazenará undefined na fase de criação da memória e, para funções, manterá todo o código da função, que veremos no exemplo a seguir.

![Imagem da execução da memória](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8t1o5f4gpg57kydvi48d.gif)

Agora, na segunda fase, ou seja, execução do código, começa a percorrer todo o código linha por linha.

Ao encontrar `var a = 2`, atribui `2` a variável `a` na memória. Até agora, o valor de `a` era undefined.

Da mesma forma, faz a mesma coisa para a variável `b`. Atribui 4 a `b`. Em seguida, ele calcula e armazena o valor da soma na memória, que é 6. Agora, na última etapa, imprime o valor da soma no console e destrói o contexto de execução global quando nosso código é finalizado.

### Como as funções são chamadas no contexto de execução?

As funções em JavaScript, quando comparadas com outras linguagens de programação, funcionam de maneira diferente.

Vamos dar um exemplo simples:

```jsx
var n = 2;

function square(num) {
 var ans = num * num;
 return ans;
}

var square2 = square(n);
var square4 = square(4);
```

O exemplo acima tem uma função que recebe um argumento do tipo número e retorna o quadrado do número.

O JavaScript criará um contexto de execução global e alocará memória para todas as variáveis ​​e funções na primeira fase quando executarmos o código, conforme mostrado abaixo.

Para funções, armazenará toda a função na memória.


![Image de contexto de execução](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m63avcebk4s9s7gsvric.gif)

Aqui vem a parte interessante: quando o JavaScript executa funções, ele cria um contexto de execução dentro do contexto de execução global.

Ao encontrar `var a = 2`, atribui 2 a `n` na memória. A linha número 2 é uma função e, como a função recebeu memória na fase de execução da memória, ela pulará diretamente para a linha número 6.

A variável `square2` invocará a função `square` e o JavaScript criará um novo contexto de execução.


![Image de contexto de execução](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fkr8yzygv3hg12d59q5l.gif)

Este novo contexto de execução da função `square`, atribuirá memória a todas as variáveis ​​presentes na função na fase de criação da memória.


![Image de contexto de execução](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/84tkkk30p19ugx3bimk9.gif)

Depois de atribuir memória a todas as variáveis ​​dentro da função, ela executará o código linha por linha. Ele obterá o valor de `num`, que é igual a 2 para a primeira variável e então calculará `ans`. Depois de calculado `ans`, ele retornará o valor que será atribuído a `square2`.

Depois que a função retornar o valor, ela destruirá seu contexto de execução ao concluir o trabalho.


![Image de contexto de execução](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3o4co7ozw416l96i94mq.gif)

Agora seguirá um procedimento semelhante para a linha número 7 ou variável `square4`, conforme mostrado abaixo.

![Image de contexto de execução](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0b7xgn34om2l5o3gftpt.gif)

Depois que todo o código for executado, o contexto de execução global também será destruído e é assim que o JavaScript executará o código nos bastidores.

## Pilha de Chamadas

![Image Pilha de Chamadas](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/us2ukpw76hlsawcj67hm.png)

Quando uma função é chamada em JavaScript, o JavaScript cria um contexto de execução. O contexto de execução ficará complicado conforme aninhamos funções dentro de uma função.

O JavaScript gerencia a criação e exclusão do contexto de execução do código com a ajuda do Pilha de Chamada..

Uma pilha (às vezes chamada de “push-down stack”) é uma coleção ordenada de itens onde a adição de novos itens e a remoção de itens existentes sempre ocorre na mesma extremidade, por exemplo, pilha de livros.

Pilha de Chamada é um mecanismo para rastrear seu lugar em um script que chama várias funções.

Vamos dar um exemplo:

```jsx
function a() {
    function insideA() {
        return true;
    }
    insideA();
}
a();
```

Estamos criando uma função `a`, que chama outra função `insideA` que retorna `true`. Sei que o código é burro e não faz nada, mas nos ajudará a entender como o JavaScript lida com as funções callback.


![Image callback](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ozcge2nufddcnydnz9te.gif)

O JavaScript criará um contexto de execução global. O contexto de execução global atribuirá memória à função `a` e invocará a função `a` na fase de execução do código.

Um contexto de execução é criado para a função `a`, que é colocado acima do contexto de execução global na pilha de chamadas.

A função a atribuirá memória e invocará a função `insideA`. Um contexto de execução é criado para a função `insideA` e colocado acima da pilha de chamadas da função `a`.

Agora, esta função `insideA` retornará `true` e será removida da pilha de chamadas.

Como não há código dentro da função `a`, o contexto de execução será removido da pilha de chamadas.

Por fim, o contexto de execução global também é removido da pilha de chamadas.


## Obrigado por ler!

Espero que este artigo tenha ajudado você a entender melhor como o JavaScript funciona.