Escopo
Onde cada variável existe de verdade, e por que uma criada dentro de uma função não pode ser usada fora dela. Entender isso evita uma classe inteira de bugs.
Estudar esta lição interativa →Toda variável tem um território onde ela existe, e fora dele é como se ela nunca tivesse sido criada. Esse território é o escopo. A regra central é simples: uma variável criada dentro de um bloco { }, como o corpo de uma função, só existe ali dentro. Quando a função termina, essas variáveis internas somem, e nenhum código de fora consegue enxergá-las.
Isso pode soar como uma limitação, mas é justamente o contrário: é uma das melhores coisas das funções. Cada função vira uma bolha isolada. As variáveis que ela cria não vazam para o resto do programa nem colidem com variáveis de mesmo nome em outros lugares. Você pode ter um i ou um total dentro de dez funções diferentes, e cada um vive na sua própria bolha, sem um atrapalhar o outro.
Existe, porém, uma via de mão única. De dentro de uma função, você consegue enxergar as variáveis criadas fora dela (no escopo que a envolve). O contrário não vale: de fora, você não alcança o que está dentro. A figura resume essa direção:
A via de mão única do escopo: de dentro da função dá para ver o que está fora (o nome), mas de fora não dá para ver o que foi criado dentro (o segredo).
// Escopo: variáveis criadas dentro de {} ficam presas ali dentro.
function teste() {
const secreto = "só existo aqui dentro";
console.log(secreto);
}
teste();
// Aqui fora, 'secreto' não existe. Descomente para ver o erro:
// console.log(secreto);
let contador = 0;
function incrementar() {
contador++; // consegue acessar a variável de fora
}
incrementar();
incrementar();
console.log(contador); // 2Pense num prédio. O saguão é o escopo de fora, e cada apartamento é o corpo de uma função. De dentro do apartamento, você enxerga o saguão pela janela (o de dentro vê o de fora). Mas quem está no saguão não consegue ver o que tem dentro de cada apartamento fechado (o de fora não vê o de dentro). E dois apartamentos diferentes podem ter, cada um, uma "mesa" sem nenhuma confusão, porque cada uma está no seu próprio espaço.
Boa parte dos bugs de iniciante do tipo "por que deu ReferenceError: x is not defined aqui?" é escopo em ação: você tenta usar, do lado de fora, algo que só existe dentro de uma função, e para o lado de fora essa variável não existe (diferente de undefined, que é um valor: uma variável que existe, mas ainda não recebeu nada). Quando esse erro aparecer (e ele vai), sua primeira pergunta deve ser: "essa variável foi criada em qual bloco? Eu estou tentando usá-la de dentro dele ou de fora?".
// Sua vez! Vai funcionar ou dar erro? Preveja antes de rodar.
function guardar() {
const dentro = "valor preso na função";
console.log(dentro); // isto funciona
}
guardar();
// Esta linha tenta usar 'dentro' do lado de fora:
console.log(dentro);Preveja o resultado, depois rode e confira.