5.1 Âmbito Global
Âmbitos de visibilidade (scopes) determinam a acessibilidade das variáveis e funções em diferentes partes do programa. No JavaScript existem três tipos principais de âmbitos de visibilidade: global, local e de bloco. Entender esses âmbitos é importante para gerenciar dados de forma eficiente e evitar erros no código.
Âmbito global inclui todas as variáveis e funções declaradas fora de funções ou blocos de código. Essas variáveis e funções estão disponíveis em qualquer lugar no código.
Exemplo 1: Declaração de variáveis globais
var globalVar = 'I am a global variable';
function showGlobalVar() {
console.log(globalVar); // Acesso à variável global
}
showGlobalVar(); // Vai imprimir: I am a global variable
console.log(globalVar); // Acesso à variável globalExemplo 2: Funções globais
Neste exemplo, a variável globalVar e a função globalFunction() são declaradas no âmbito global e estão disponíveis em qualquer lugar no código.
function globalFunction() {
return 'I am a global function';
}
console.log(globalFunction()); // Vai imprimir: I am a global function5.2 Âmbito Local
Âmbito local inclui variáveis e funções declaradas dentro de uma função. Essas variáveis e funções estão disponíveis apenas dentro dessa função e não fora dela.
Exemplo 3: Declaração de variáveis locais
Neste exemplo, a variável localVar é declarada dentro da função localScopeExample() e não está disponível fora dessa função:
function localScopeExample() {
var localVar = 'I am a local variable';
console.log(localVar); // Acesso à variável local
}
localScopeExample(); // Vai imprimir: I am a local variable
console.log(localVar); // Erro: localVar is not definedExemplo 4: Funções locais
Neste exemplo, a função innerFunction() é declarada dentro da função outerFunction() e não está disponível fora de outerFunction():
function outerFunction() {
function innerFunction() {
return 'I am a local function';
}
console.log(innerFunction()); // Acesso à função local
}
outerFunction(); // Vai imprimir: I am a local function
console.log(innerFunction()); // Erro: innerFunction is not defined5.3 Âmbito de Bloco
Âmbito de bloco inclui variáveis declaradas com let e const dentro de um bloco de código, delimitado por chaves {}. Essas variáveis estão disponíveis apenas dentro desse bloco e não fora dele.
Exemplo 5: Declaração de variáveis com let
Neste exemplo, a variável blockVar é declarada dentro do bloco if e não está disponível fora dele:
if (true) {
let blockVar = 'I am a block-scoped variable';
console.log(blockVar); // Acesso à variável de bloco
}
console.log(blockVar); // Erro: blockVar is not definedExemplo 6: Declaração de variáveis com const
Neste exemplo, a variável i é declarada dentro do bloco for e não está disponível fora dele:
for (const i = 0; i < 3; i++) {
console.log(i); // Acesso à variável de bloco
}
console.log(i); // Erro: i is not definedCaracterísticas do Âmbito de Bloco
Exemplo 7: Blocos Aninhados
Neste exemplo, a variável innerVar está disponível apenas dentro do bloco interno, enquanto a variável outerVar está disponível tanto no bloco externo quanto no interno:
if (true) {
let outerVar = 'I am in the outer block';
if (true) {
let innerVar = 'I am in the inner block';
console.log(outerVar); // Acesso à variável do bloco externo
console.log(innerVar); // Acesso à variável do bloco interno
}
console.log(outerVar); // Acesso à variável do bloco externo
console.log(innerVar); // Erro: innerVar is not defined
}5.4 Interação entre Diferentes Âmbitos de Visibilidade
Exemplo 8: Interação entre âmbitos global e local
Neste exemplo a função scopeExample() tem acesso à variável global globalVar e à sua variável local localVar:
var globalVar = 'I am a global variable';
function scopeExample() {
var localVar = 'I am a local variable';
console.log(globalVar); // Acesso à variável global
console.log(localVar); // Acesso à variável local
}
scopeExample(); // Vai imprimir: I am a global variable
// I am a local variable
console.log(globalVar); // Acesso à variável global
console.log(localVar); // Erro: localVar is not definedExemplo 9: Âmbitos de visibilidade com função arrow
Neste exemplo, a função arrow arrowFunction() tem acesso à variável global globalVar e à sua variável local localVar:
let globalVar = 'I am a global variable';
const arrowFunction = () => {
let localVar = 'I am a local variable in arrow function';
console.log(globalVar); // Acesso à variável global
console.log(localVar); // Acesso à variável local
};
arrowFunction(); // Vai imprimir: I am a global variable
// I am a local variable in arrow function
console.log(globalVar); // Acesso à variável global
console.log(localVar); // Erro: localVar is not defined