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. 🎸😎
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!
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
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 🤖
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:
- Fase de Criação de Memória
- 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.
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:
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.
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.
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.
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.
Agora seguirá um procedimento semelhante para a linha número 7 ou variável square4, conforme mostrado abaixo.
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
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:
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.
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.
Top comments (0)