Contexto de execução JavaScript \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 15 Horas 14 Min 55 Seg Tempo restante da oferta: 15 14 55 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Contexto de execução JavaScript [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) # Contexto de execução JavaScript Contexto de execução JavaScript é um conceito abstrato que contém informações sobre o ambiente no qual o código atual está sendo executado [ Ariel Sardinha ](https://www.treinaweb.com.br/blog/autor/ariel-sardinha) 4 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/04/contexto-execucao-JS.png) O contexto de execução [JavaScript](https://www.treinaweb.com.br/blog/guia-da-linguagem-javascript "JavaScript") é um ambiente onde o código JavaScript é processado e executado. Ele fornece um espaço para armazenar variáveis, objetos, funções e outras informações pertinentes ao código em execução. Antes de começarmos a explicar é importante entender o conceito de contexto e escopo, que você pode ver neste artigo: [Contexto e Escopo no JavaScript](https://www.treinaweb.com.br/blog/contexto-e-escopo-no-javascript "Contexto e Escopo no JavaScript"). [ ![JavaScript - Programação Assíncrona](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/javascript.svg) Curso JavaScript - Programação Assíncrona Conhecer o curso ](https://www.treinaweb.com.br/curso/javascript-programacao-assincrona) ## Contexto de execução Cada vez que um trecho de código é executado, ele cria contexto de execução. Podemos utilizar o seguinte código para entender como funciona. ```javascript const number = 10; function multiplicador(number){ const result = number * 2; return result; } const name = "Ariel"; ``` [ ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/10/E-BOOK-GRATUITO-COMECANDO-JS.png) ](https://www.treinaweb.com.br/ebook/guia-javascript) A primeira coisa que a engine que estiver interpretando o código, como o [Node.js](https://www.treinaweb.com.br/blog/node-js-por-que-voce-deve-conhecer-essa-tecnologia "Node.js"), é começar a gravar partes do seu código em memória. ![alocamento de memoria](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExOWZjM2M3Y2ZlOWI5Y2VkYWUyODBlNDJhZDU1MGI3YmZjNTRlZmFjMyZjdD1n/tkUyi6Qn6oPcTD5ZUK/giphy.gif) No gif acima, primeiro ele vai guardar em memória o `number` e alocar o valor `3`. Depois ela vai guardar o `multiplicador` e salvar toda a função. Nesse caso, como as funções são valores, ele vai alocar toda a função como valor do `multiplicador` para ser usado mais para frente, não executando a função. Por fim, teremos o `name` com o valor `"Ariel"` salvo. Esse processo faz parte da criação do contexto de execução global. Toda vez que executamos uma função, a engine cria um contexto de execução local. Para entendermos como é criado, vou utilizar o seguinte código como exemplo: ```javascript const number = 10; function multiplicador(numberParam){ const result = numberParam * 2; return result; } const result = multiplicador(number); ``` Veja como vai ficar o processo de alocamento de memória no exemplo abaixo: ![contexto de execução javascript](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExNWNmZGRhZTM5M2M4Y2U0MGVhMzQyNGM4Y2QyMzI0YjIyZjY5YzExNyZjdD1n/BY3eShXf95niN7YOc5/giphy.gif) Primeiro vai ser alocado em memória todos os valores do escopo global, como foi explicado no exemplo anterior. Agora teremos o contexto de execução da função, pois ela foi executada. No contexto de execução local, ou da função multiplicador, a primeira coisa que será guardada em memória é o `numberParam` que irá receber o valor de `10` e depois o `result` que irá receber `20`. Ao final da execução, o garbage collector irá entrar em ação, excluindo da memória o contexto de execução do `multiplicador`. Então, teremos um contexto de execução global, mas podem existir vários contextos de execução da função e/ou funções filha. [ ![Next.js - Aplicações Dinâmicas](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/next-js.svg) Curso Next.js - Aplicações Dinâmicas Conhecer o curso ](https://www.treinaweb.com.br/curso/nextjs-aplicacoes-dinamicas) ## Fases do contexto de execução Todo o processo demonstrado anteriormente passa por duas fases, a de criação e execução. ### Fase de criação Na fase de criação a engine prepara todo ambiente antes de executar o código. Nessa fase envolve as seguintes etapas: - Cria o Variable Object - Cria o Scope Chain - Seta o valor de this Para entendermos o que acontece na fase de criação, do contexto de execução, vou utilizar um Objeto JavaScript como exemplo. Entenda que esse é um exemplo meramente ilustrativo para facilitar o entendimento e não é algo que seja manipulável e palpável. #### Hoisting É interessante saber que é nesta etapa que ocorre o [Hoisting](https://developer.mozilla.org/pt-BR/docs/Glossary/Hoisting "Hoisting") O hoisting é uma maneira que o JavaScript tem de levantar as declarações de variáveis e funções, permitindo o acesso a variáveis e funções antes de sua declaração. #### Criação do contexto de execução O `variableObject` contém os argumentos da função, variáveis internas e a declaração da função. ```javascript const objetoContextoExecucao = { variableObject: {} } ``` Se fossemos fazer uma analogia do `variableObject`, que estamos usando como exemplo, ele teria os valores alocados em memória nos exemplos anteriores, como, por exemplo: ```javascript const number = 10; function multiplicador(numberParam){ const result = numberParam * 2; return result; } const result = multiplicador(number); ``` Com este código, teremos o seguinte cenário do `variableObject`: ```javascript const objetoContextoExecucao = { variableObject: { number: 10, multiplicador: function multiplicador(numberParam){ const result = numberParam * 2; return result; }, result: undefined } } ``` [ ![Desenvolvedor Next.js](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/next-js.svg) Formação Desenvolvedor Next.js Conhecer a formação ](https://www.treinaweb.com.br/formacao/desenvolvedor-nextjs) #### Criação do Scope Chain O `scopeChain` é composto pelo `variableObject` da função e pelos `variableObject` das funções filhas ```javascript const objetoContextoExecucao = { variableObject: {}, scopeChain: [{},{}], this: globalThis } ``` Com isso, o contexto de execução tem o `scopeChain`, que pode ter vários `variableObject`, e mais as propriedades do escopo global. O contexto de execução global e o da função ficarão da seguinte forma: ```javascript // escopo global const global = { variableObject: { number: 10, multiplicador: function multiplicador(numberParam){ const result = numberParam * 2; return result; }, }, scopeChain: [global.variableObject]. this: globalThis } // escopo da função multiplicador const multiplicador = { variableObject: { numberParam: 10, result: 20, }, scopeChain: [ global.variableObject, multiplicador.variableObject, ], this: globalThis } ``` ### Fase de execução A fase da execução é basicamente quando nosso código é executado e as funções são empilhadas na [Call stack](https://developer.mozilla.org/pt-BR/docs/Glossary/Call_stack "Call stack"). Durante essa fase a engine vai executar o código linha por linha e atribuir os valores nas variáveis, chamando as funções até o final da execução do código. ## Conclusão Neste artigo exploramos o conceito de contexto de execução no JavaScript, que é fundamental para entender como o código é executado e gerenciado pela engine Esperamos que este artigo tenha ajudado a esclarecer esse conceito importante e tenho certeza de que o curso de [JavaScript - Orientação a objetos](https://www.treinaweb.com.br/curso/javascript-orientacao-a-objetos "JavaScript - Orientação a objetos") irá ajudá-lo a se tornar um desenvolvedor muito melhor. São **02h49 de video** com muito conteúdo e um total de **16 exercícios**. - [ #JavaScript ](https://www.treinaweb.com.br/blog/tag/javascript) - [ #contexto de execução ](https://www.treinaweb.com.br/blog/tag/contexto-de-execucao) - [ #contexto de execução javascript ](https://www.treinaweb.com.br/blog/tag/contexto-de-execucao-javascript) Autor ![Ariel Sardinha](//secure.gravatar.com/avatar/d0b89ee09026eb2b9e26f286c04eba03?d=mm) ## Ariel Sardinha Professor e desenvolvedor. Formando em engenharia de software e Computação - Licenciatura. É autor de cursos em diversos temas, como, desenvolvimento front-end, Flutter, JavaScript, React,js e Vue.js. Nas horas vagas adora estudar sobre tecnologia, filmes e brincar com a pequena Maria Eduarda. [arielsardinha](https://www.linkedin.com/in/ariel-sardinha/) [Todos os artigos](https://www.treinaweb.com.br/blog/autor/ariel-sardinha) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/05/closure-400x280.jpg) [ Desenvolvimento ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento) 4 anos atrás ## [ O que é Closure ](https://www.treinaweb.com.br/blog/o-que-e-closure) Neste artigo, veremos o que é Closure e por que é tão importante entendê-lo para saber o que acontece por debaixo dos panos na linguagem. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/04/ESCOPO-CONTEXTO-JS-2-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 4 anos atrás ## [ Contexto e Escopo no JavaScript ](https://www.treinaweb.com.br/blog/contexto-e-escopo-no-javascript) O que é contexto e escopo no JavaScript e o que o escopo interfere no contexto. Veremos o que é this e o que o contexto tem haver com ele Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2017/12/13103521/chrome53-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 9 anos atrás ## [ Novidades do Chrome 63 para os desenvolvedores ](https://www.treinaweb.com.br/blog/novidades-do-chrome-63-para-os-desenvolvedores) Veja algumas das novidades presentes no Chrome 63, última versão do navegador a ser lançada em 2017. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/03/01111116/jogo-feito-400x280.png) [ Desenvolvimento de Jogos ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-de-jogos) 9 anos atrás ## [ Como um jogo digital é criado? ](https://www.treinaweb.com.br/blog/como-um-jogo-digital-e-criado) Veja nesse artigo como um jogo digital é criado e os principais conceitos envolvidos. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/05/01125223/react-php-imagem-400x280.png) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 8 anos atrás ## [ Introdução à programação assíncrona em PHP usando o ReactPHP ](https://www.treinaweb.com.br/blog/introducao-a-programacao-assincrona-em-php-usando-o-reactphp) Uma introdução à programação assíncrona com PHP e uso básico dos componentes do ReactPHP. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/03/05155024/php-reflection-400x280.png) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 7 anos atrás ## [ API de Reflexão do PHP ](https://www.treinaweb.com.br/blog/api-de-reflexao-do-php) Veja como usar a API de reflexão do PHP para extrair e até mesmo alterar características internas de classes, interfaces, métodos etc, em tempo de execução. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/06/03131718/DIAGNÓSTICO-400x280.png) [ Infraestrutura e Sistemas Operacionais ](https://www.treinaweb.com.br/blog/categoria/infraestrutura-e-sistemas-operacionais) 8 anos atrás ## [ Diagnosticando uma aplicação no .NET Core 3.0 ](https://www.treinaweb.com.br/blog/diagnosticando-uma-aplicacao-no-net-core-3-0) Conheça as ferramentas dotnet-counters, dotnet-trace e dotnet-dump. E aprenda como elas auxiliam no diagnóstico de uma aplicação .NET Core. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/10/15163425/github-actions-400x280.png) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 7 anos atrás ## [ Integração contínua para aplicações PHP usando Github Actions ](https://www.treinaweb.com.br/blog/integracao-continua-para-aplicacoes-php-usando-github-actions) Veja como usar Github Actions para criar um workflow de análise e teste do seu projeto desenvolvido em PHP Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/06/14170401/COMANDOS-SYMFONY-400x280.png) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 8 anos atrás ## [ Principais comandos do Symfony CLI ](https://www.treinaweb.com.br/blog/principais-comandos-do-symfony-cli) Nesse artigo falaremos sobre o utilitário de linha de comando symfony. Veremos como realizar a criação de projetos, utilizar o servidor de desenvolvimento, executar comandos da aplicação e outros recursos. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/09/04112944/DJANGO-PROJETOS-PYCHARM-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 3 anos atrás ## [ Como criar comandos customizados no Django ](https://www.treinaweb.com.br/blog/como-criar-comandos-customizados-no-django) Aprenda a criar comandos customizados no Django para automatizar tarefas, personalizar funcionalidades e integrar sistemas externos! Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/spring-framework-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 3 anos atrás ## [ Trabalhando com Scheduled Tasks no Spring Boot ](https://www.treinaweb.com.br/blog/trabalhando-com-scheduled-tasks-no-spring-boot) Descubra o poder das Scheduled Tasks no Spring Boot. Aprenda a criar, configurar e aprimorar tarefas agendadas em Java com o Spring Framework. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/05/NEST-JS-UPLOAD-ARQUIVOS-400x280.png) [ Node ](https://www.treinaweb.com.br/blog/categoria/node-js) 3 anos atrás ## [ Cron jobs, timeouts e intervals com NestJS ](https://www.treinaweb.com.br/blog/cron-jobs-timeouts-e-intervals-com-nestjs) Neste artigo vamos utilizar o módulo nativo scheduler do NestJS para trabalhar com tarefas automatizadas com cron jobs, timeouts e intervals Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **15h 14min 55s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58