Escopos de variáveis ​​JavaScript

Resumo : neste tutorial, você aprenderá sobre o escopo da variável JavaScript que determina a visibilidade e acessibilidade das variáveis.

O que é escopo variável

O escopo determina a visibilidade e acessibilidade de uma variável . JavaScript tem três escopos:

• O escopo global
• Escopo local
• Escopo do bloco (iniciado no ES6)

O escopo global

Quando o mecanismo JavaScript executa um script, ele cria um contexto de execução global.

Além disso, também atribui variáveis ​​que você declara fora das funções ao contexto de execução global . Essas variáveis ​​estão no escopo global. Elas também são conhecidas como variáveis ​​globais.

Veja o exemplo a seguir:

var message = 'Hi';Linguagem de código:  JavaScript  ( javascript )

A variável messagetem escopo global. Ele pode ser acessível em qualquer lugar do script.

Escopo local

As variáveis ​​que você declara dentro de uma função são locais para a função. Elas são chamadas de variáveis ​​locais. Por exemplo:

var message = 'Hi';

function say() {
    var message = 'Hello';
    console.log(message);
}

say();
console.log(message);
Linguagem de código:  JavaScript  ( javascript )

Saída:

Hello
Hi

Quando o mecanismo JavaScript executa a say()função, ele cria um contexto de execução da função. A variável messagedeclarada dentro da say()função está vinculada ao contexto de execução da função, não ao contexto de execução global.

Cadeia de escopo

Considere o seguinte exemplo:

var message = 'Hi';

function say() {
    console.log(message);
}

say();
Linguagem de código:  JavaScript  ( javascript )

Saída:

Hi

Neste exemplo, referenciamos a variável messagedentro da say()função. Nos bastidores, o JavaScript executa o seguinte:

• Procure a variável messageno contexto atual (contexto de execução da função) da say()função. Não consegue encontrar nenhum.
• Encontre a variável messageno contexto de execução externo que é o contexto de execução global. Ele encontra a variável message.

A maneira como o JavaScript resolve uma variável é olhando para ela em seu escopo atual; se não conseguir encontrar a variável, ele sobe para o escopo externo, que é chamado de cadeia de escopo.

Mais exemplo de cadeia de escopo

Considere o seguinte exemplo:

var y = 20;

function bar() {
    var y = 200;

    function baz() {  
        console.log(y);
    }

    baz();
}

bar();
Linguagem de código:  JavaScript  ( javascript )

Saída:

200

Neste exemplo:

• Primeiro, o mecanismo JavaScript encontra a variável y no escopo da baz()função. Não consegue encontrar nenhum. Então isso sai desse escopo.
• Então, o mecanismo JavaScript encontra a variável y na bar()função. Ele pode encontrar a variável y no escopo da bar()função para interromper a pesquisa.

Vazamentos de variáveis ​​globais: a parte estranha do JavaScript

Veja o exemplo a seguir:

function getCounter() {
    counter = 10;
    return counter;
}

console.log(getCounter());Linguagem de código:  JavaScript  ( javascript )

Saída:

10

Neste exemplo, atribuímos 10 à countervariável sem a palavra-chave var, letou conste depois a retornamos.

Fora da função, chamamos a getCounter()função e mostramos o resultado no console.

Esse problema é conhecido como vazamento das variáveis ​​globais.

Nos bastidores, o mecanismo JavaScript primeiro procura a countervariável no escopo local da getCounter()função. Como não há palavra-chave var, letou const, a countervariável não está disponível no escopo local. Não foi criado.

Em seguida, o mecanismo JavaScript segue a cadeia de escopo e procura a countervariável no escopo global. O escopo global também não possui a countervariável, então o mecanismo JavaScript cria a countervariável no escopo global.

Para corrigir esse comportamento “estranho”, você usa o 'use strict'no topo do script ou no topo da função:

'use strict'

function getCounter() {
    counter = 10;
    return counter;
}

console.log(getCounter());Linguagem de código:  JavaScript  ( javascript )

Agora, o código gera um erro:

ReferenceError: counter is not definedLinguagem de código:  JavaScript  ( javascript )

O seguinte mostra como usar o 'use strict'na função:

function getCounter() {
    'use strict'
    counter = 10;
    return counter;
}

console.log(getCounter());Linguagem de código:  JavaScript  ( javascript )

Escopo do bloco

ES6 fornece as palavras-chave lete constque permitem declarar variáveis ​​no escopo do bloco.

Geralmente, sempre que você vê chaves {}, é um bloco. Pode ser a área dentro das condições if, else, switchou for, do whilee whileloops.

Veja o exemplo a seguir:

function say(message) {
    if(!message) {
        let greeting = 'Hello'; // block scope
        console.log(greeting);
    }
    // say it again ?
    console.log(greeting); // ReferenceError
}

say();Linguagem de código:  JavaScript  ( javascript )

Neste exemplo, referenciamos a variável greetingfora do ifbloco que resulta em erro.

Neste tutorial, você aprendeu sobre os escopos de variáveis ​​JavaScript, incluindo escopo de função, escopo global e escopo de bloco.