Contexto e escopo no 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.
Curso JavaScript Avançado
Conhecer o cursoEscopo
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:
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.
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.
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.
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.
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 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:
