O escopo determina a acessibilidade (visibilidade) das variáveis.
JavaScript tem 3 tipos de escopo:
Escopo do bloco
Escopo da função
Âmbito global
Antes do ES6 (2015), JavaScript tinha apenas Escopo Global e Escopo de Função.
ES6 introduziu duas novas palavras-chave JavaScript importantes: let e const.
Essas duas palavras-chave fornecem Block Scope em JavaScript.
Variáveis declaradas dentro de um bloco {} não podem ser acessadas de fora do bloco:
{
let x = 2;
}
// x can NOT be used hereVariáveis declaradas com a palavra-chave var NÃO podem ter escopo de bloco.
Variáveis declaradas dentro de um bloco { } podem ser acessadas de fora do bloco.
{
var x = 2;
}
// x CAN be used hereVariáveis declaradas dentro de uma função JavaScript tornam-se LOCAL para a função.
// code here can NOT use carName
function myFunction() {
let carName = "Volvo";
// code here CAN use carName
}
// code here can NOT use carNameExperimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Scope</h2>
<p><b>carName</b> is undefined outside myFunction():</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
myFunction();
function myFunction() {
let carName = "Volvo";
document.getElementById("demo1").innerHTML = typeof carName + " " + carName;
}
document.getElementById("demo2").innerHTML = typeof carName;
</script>
</body>
</html>
Variáveis locais têm Escopo da Função:
Eles só podem ser acessados de dentro da função.
Como as variáveis locais só são reconhecidas dentro de suas funções, variáveis com o mesmo nome podem ser utilizadas em funções diferentes.
Variáveis locais são criadas quando uma função é iniciada e excluídas quando a função é concluída.
JavaScript tem escopo de função: cada função cria um novo escopo.
Variáveis definidas dentro de uma função não são acessíveis (visíveis) de fora da função. função.
Variáveis declaradas com var, let e const são bastante semelhante quando declarado dentro de uma função.
Todos eles têm Escopo de Função:
function myFunction() {
var carName = "Volvo";
// Function Scope
}function myFunction() {
let carName = "Volvo"; //
Function Scope
}function myFunction() {
const carName = "Volvo"; //
Function Scope
}Uma variável declarada fora de uma função torna-se GLOBAL.
let carName = "Volvo";
// code here can use carName
function myFunction() {
// code here can also use carName
}Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Scope</h2>
<p>A GLOBAL variable can be accessed from any script or function.</p>
<p id="demo"></p>
<script>
let carName = "Volvo";
myFunction();
function myFunction() {
document.getElementById("demo").innerHTML = "I can display " + carName;
}
</script>
</body>
</html>
Uma variável global tem Escopo Global:
Todos os scripts e funções de uma página web podem acessá-la.
Variáveis declaradas Globalmente (fora de qualquer função) têm Escopo Global.
Variáveis globais podem ser acessadas de qualquer lugar em um programa JavaScript.
Variáveis declaradas com var, let e const são bastante semelhante quando declarado fora de um bloco.
Todos eles têm Escopo Global:
var x = 2;
// Global scope let x = 2; //
Global scope const x = 2; //
Global scopeEm JavaScript, objetos e funções também são variáveis.
O escopo determina a acessibilidade de variáveis, objetos e funções de diferentes partes do código.
Se você atribuir um valor a uma variável que não foi declarada, ela se tornará automaticamente uma variável GLOBAL.
Este exemplo de código irá declarar uma variável global carName, mesmo que o valor é atribuído dentro de uma função.
myFunction();
// code here can use carName
function myFunction() {
carName = "Volvo";
}Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Global Variables</h2>
<p>If you assign a value to a variable that has not been declared, it will automatically become a GLOBAL variable:</p>
<p id="demo"></p>
<script>
myFunction();
// code here can use carName as a global variable
document.getElementById("demo").innerHTML = "I can display " + carName;
function myFunction() {
carName = "Volvo";
}
</script>
</body>
</html>
Todos os navegadores modernos suportam a execução de JavaScript no "Modo Estrito".
Você aprenderá mais sobre como usar o modo estrito em um capítulo posterior deste tutorial.
No "Modo Estrito", as variáveis não declaradas não são automaticamente globais.
Com JavaScript, o escopo global é o ambiente JavaScript.
Em HTML, o escopo global é o objeto window.
Variáveis globais definidas com a palavra-chave var pertencem ao objeto window:
var carName = "Volvo";
// code here
can use window.carNameExperimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Scope</h2>
<p>In HTML, global variables defined with <b>var</b>, will become window variables.</p>
<p id="demo"></p>
<script>
var carName = "Volvo";
// code here can use window.carName
document.getElementById("demo").innerHTML = "I can display " + window.carName;
</script>
</body>
</html>
Variáveis globais definidas com a palavra-chave let não pertencem ao objeto window:
let carName = "Volvo";
// code here can not use window.carNameExperimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Global Variables</h2>
<p>In HTML, global variables defined with <b>let</b>, will not become window variables.</p>
<p id="demo"></p>
<script>
let carName = "Volvo";
// code here can not use window.carName
document.getElementById("demo").innerHTML = "I can not display " + window.carName;
</script>
</body>
</html>
NÃO crie variáveis globais, a menos que você pretenda.
Suas variáveis globais (ou funções) podem sobrescrever variáveis de janela (ou funções).
Qualquer função, incluindo o objeto window, pode substituir seu global variáveis e funções.
O tempo de vida de uma variável JavaScript começa quando ela é declarada.
Variáveis de função (locais) são excluídas quando a função é concluída.
Em um navegador da web, as variáveis globais são excluídas quando você fecha o navegador janela (ou guia).
Argumentos de função (parâmetros) funcionam como variáveis locais dentro de funções.