Contexto e Escopo no JavaScript \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 14 Horas 49 Min 25 Seg Tempo restante da oferta: 14 49 25 [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 e Escopo no JavaScript [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) # 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 [ Ariel Sardinha ](https://www.treinaweb.com.br/blog/autor/ariel-sardinha) 4 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/04/ESCOPO-CONTEXTO-JS-2.png) Contexto e escopo no [JavaScript](https://www.treinaweb.com.br/blog/guia-da-linguagem-javascript "JavaScript") são coisas diferentes, mas elas trabalham em conjunto. Podemos resumir que contexto é o valor de `this`, e escopo é o limite onde as expressões e os valores são acessíveis. Neste artigo, vamos abordar os detalhes do escopo e contexto no JavaScript e como o escopo interfere no contexto. [ ![Dart - Fundamentos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/dart.svg) Curso Dart - Fundamentos Conhecer o curso ](https://www.treinaweb.com.br/curso/dart-fundamentos) ## Escopo O escopo em JavaScript se refere à visibilidade de variáveis e funções dentro de um programa. Quando uma variável ou função é declarada em um determinado escopo, ela só pode ser acessada dentro daquele escopo ou de escopos internos a ele. Podemos determinar que no JavaScript tem dois tipos de escopo, o global e local. O escopo global é o escopo mais amplo em um programa JavaScript, e inclui todas as variáveis e funções que são definidas fora de qualquer função ou bloco de código. Essas variáveis e funções podem ser acessadas em qualquer lugar do código, mas isso pode criar problemas de segurança e colisões de nomes, que podem ser difíceis de detectar. Por esse motivo, é uma boa prática definir escopos locais sempre que possível. Isso pode ser feito por meio de funções, que criam um escopo local para as variáveis declaradas dentro delas. Variáveis declaradas dentro de uma função são chamadas de variáveis locais, e só podem ser acessadas dentro dessa função ou em escopos internos a ela. Por exemplo, considere o seguinte código: ```javascript let variavelGlobal = 10; function foo() { let variavelLocal = 20; console.log(variavelGlobal); // 10 console.log(variavelLocal); // 20 } foo(); console.log(variavelGlobal); // 10 console.log(variavelLocal); // ReferenceError: variavelLocal is not defined ``` Nesse código, a variável `variavelGlobal` é definida fora da função `foo`, o que a torna uma variável global. A função `foo` define uma variável local `variavelLocal`, que só pode ser acessada dentro da função. [ ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/10/E-BOOK-GRATUITO-COMECANDO-JS.png) ](https://www.treinaweb.com.br/ebook/guia-javascript) ## Contexto Enquanto o contexto refere-se ao valor de `this`, o escopo define o limite no qual as variáveis e funções são acessíveis. O escopo pode afetar o contexto, uma vez que o valor de `this` pode ser alterado dependendo do escopo em que uma função é executada. #### Contexto global No contexto de execução global, `this` refere-se ao objeto global. No navegador o `this` aponta para o objeto `window`. ```javascript console.log(this.document === document); // true console.log(this === window); // true ``` #### Contexto local Dentro de uma função, o valor de `this` depende de como a função é chamada. Em uma chamada de função simples o `this` não é definido pela chamada. Por padrão, `this` será o objeto global. ```javascript function myFunction(){ return this; } // No navegador myFunction() === window; // true ``` Já em uma função construtora o `this` se refere ao próprio objeto ou ao objeto da instância. ```javascript function myFunction(){ return this; } // No navegador new myFunction() === window; // false ``` ## Conclusão É possível concluir que, apesar de serem conceitos diferentes, o contexto e o escopo no JavaScript, estão interligados. Enquanto o escopo se refere à visibilidade, o contexto se refere ao valor de `this` Com esse conhecimento, os desenvolvedores podem escrever códigos mais eficientes e evitar problemas com variáveis globais, colisões de nomes e outros problemas relacionados ao escopo e contexto. Sei que você gostou deste artigo e tenho certeza de que a formação para [Desenvolvedor React Funcional](https://www.treinaweb.com.br/formacao/desenvolvedor-react-funcional "Desenvolvedor React Funcional") irá ajudá-lo a se tornar um desenvolvedor muito melhor. São **14h17 de video** com muito conteúdo e um total de **59 exercícios**. Veja quais são os cursos que fazem parte desta formação: - [React - Fundamentos](https://www.treinaweb.com.br/curso/react-fundamentos "React - Fundamentos") - [React - Dominando Componentes Funcionais](https://www.treinaweb.com.br/curso/react-dominando-componentes-funcionais "React - Dominando Componentes Funcionais") - [React - Despertando o Poder dos Hooks](https://www.treinaweb.com.br/curso/react-despertando-o-poder-dos-hooks "React - Despertando o Poder dos Hooks") - [React - Conhecendo o React Router](https://www.treinaweb.com.br/direto-ao-ponto/react-conhecendo-o-react-router "React - Conhecendo o React Router") - [React - Estilização com Emotion (Styled Components)](https://www.treinaweb.com.br/direto-ao-ponto/react-estilizacao-com-emotion-styled-components "React - Estilização com Emotion (Styled Components)") - [React - Boas práticas](https://www.treinaweb.com.br/curso/react-boas-praticas "React - Boas práticas") - [ #JavaScript ](https://www.treinaweb.com.br/blog/tag/javascript) - [ #contexto ](https://www.treinaweb.com.br/blog/tag/contexto) - [ #escopo ](https://www.treinaweb.com.br/blog/tag/escopo) - [ #contexto e escopo ](https://www.treinaweb.com.br/blog/tag/contexto-e-escopo) - [ #contexto javascript ](https://www.treinaweb.com.br/blog/tag/contexto-javascript) - [ #escopo javascript ](https://www.treinaweb.com.br/blog/tag/escopo-javascript) - [ #contexto e escopo javascript ](https://www.treinaweb.com.br/blog/tag/contexto-e-escopo-javascript) - [ #Scope ](https://www.treinaweb.com.br/blog/tag/scope) - [ #Context ](https://www.treinaweb.com.br/blog/tag/context) 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/04/contexto-execucao-JS-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 4 anos atrás ## [ Contexto de execução JavaScript ](https://www.treinaweb.com.br/blog/contexto-de-execucao-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 Ler artigo - ![](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/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/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/2020/11/arquitetura-da-informacao-um-breve-overview-400x280.png) [ Acessibilidade e User Experience (UX) ](https://www.treinaweb.com.br/blog/categoria/acessibilidade-e-user-experience-ux) 6 anos atrás ## [ Arquitetura da informação - um breve overview ](https://www.treinaweb.com.br/blog/arquitetura-da-informacao-um-breve-overview) Confira neste artigo o que é Arquitetura da Informação, seus conceitos fundamentais e qual a importância de ter essa estruturação. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/08/01172547/NET-CORE-3-400x280.png) [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) 7 anos atrás ## [ .NET Core 3.0 - Criando tarefas de segundo plano com Worker Service ](https://www.treinaweb.com.br/blog/net-core-3-0-criando-tarefas-de-segundo-plano-com-worker-service) Você já quis criar tarefas em segundo plano com o .NET Core? Na versão 3.0 foi introduzido o template Worker Service que facilita a criação deste tipo de aplicação. Caso tenha passado por uma situação assim, neste artigo mostramos como você pode aproveitar este novo recurso do .NET Core 3.0. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/08/27124433/lambda-400x280.png) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 8 anos atrás ## [ Closures e funções anônimas no PHP ](https://www.treinaweb.com.br/blog/closures-e-funcoes-anonimas-no-php) Conheça mais sobre as funções anônimas, como se comportam no PHP e em qual momento se tornam closures. Além disso, entenda como funcionam os métodos bind(), call() e bindTo() da classe especial Closure. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/07/31174205/vulnerabilidade-redirecionamento-400x280.png) [ Segurança da Informação ](https://www.treinaweb.com.br/blog/categoria/seguranca-da-informacao) 8 anos atrás ## [ Open Redirect - Vulnerabilidade de redirecionamento aberto ](https://www.treinaweb.com.br/blog/open-redirect-vulnerabilidade-de-redirecionamento-aberto) Saiba o que é a vulnerabilidade de redirecionamento aberto (Open Redirect) e ações que podem ser desempenhadas para mitigá-la. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/container-400x280.jpg) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 10 anos atrás ## [ Container de injeção de dependência (DI Container) ](https://www.treinaweb.com.br/blog/container-de-injecao-de-dependencia-di-container) Injetar dependências pode se tornar uma tarefa tediosa quando se têm muitas classes envolvidas. Um container de injeção de dependência resolve grande parte desse problema. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/07/DICA-CODIGO-PHP-400x280.jpg) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 3 anos atrás ## [ Dica de Código: Arrow Functions no PHP ](https://www.treinaweb.com.br/blog/dica-de-codigo-arrow-functions-no-php) Aprenda a usar Arrow Functions no PHP para tornar seu código mais conciso e poderoso. Confira exemplos práticos e dicas essenciais. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/TRATAMENTO-ERROS-ASP-NET-CORE-C-SHARP-400x280.png) [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) 6 anos atrás ## [ Tratando erros em uma API ASP.NET Core com Middleware ](https://www.treinaweb.com.br/blog/tratando-erros-em-uma-api-asp-net-core-com-middleware) Tratamento de erros é uma parte importante de qualquer aplicação. No ASP.NET Core, isso pode ser facilitado com o uso de Middlewares. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2017/11/22143638/CURSO-A-DISTANCIA-400x280.png) [ Estudos ](https://www.treinaweb.com.br/blog/categoria/estudos) 9 anos atrás ## [ Por que fazer um curso de tecnologia a distância? ](https://www.treinaweb.com.br/blog/por-que-fazer-um-curso-de-tecnologia-a-distancia) Reunimos neste artigo tudo o que você precisa saber sobre cursos de tecnologia a distância. 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 **14h 49min 25s** - 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