Escopo
O escopo é o que define a acessibilidade a uma variável. Existem dois tipos de escopo em Javascript: Global e Local.
Escopo Local
As funções em Javascript têm o seu próprio escopo. As variáveis criadas dentro de uma função são de escopo local e só podem ser acessadas dentro daquela função.
function criar_nome() {
var nome = 'Maria';
console.log(nome); // O console mostrará 'Maria'
}
criar_nome();
console.log(nome); // Este comando gerará um erro,
// pois aqui não temos acesso às variáveis de escopo local da função criar_nome.
Escopo Global
Varáveis criadas fora de funções são do escopo global e são acessíveis em qualquer lugar do código, até mesmo dentro de funções.
var nome = 'Helena';
function mostrar_nome() {
console.log(nome);
}
mostrar_nome(); // O console mostrará 'Helena'
Variáveis criadas sem a keyword "var" também são do escopo global, mesmo quando criadas dentro de uma função. Isto é algo que deve ser evitado, apenas crie variáveis globais dentro de uma função quando isto for necessário e proposital.
function criar_nome() {
nome = 'Maria';
console.log(nome);
}
criar_nome(); // O console mostrará 'Maria'
console.log(nome); // O console mostrará 'Maria'
Variáveis criadas no escopo global podem também ser acessadas pelo objeto window:
var nome = "Pedro";
console.log(window.nome); // O console mostrará 'Pedro'
// Também pode ser usada a notação de colchetes: window['nome']
Escopo Local em blocos
Até antes do lançamento da versão ES6 (ECMAScript 2015), apenas funções tinham escopo local. Outras estruturas que ficam em blocos (entre chaves), como loops e condicionais, não tinham escopo, portanto qualquer variável criada neste tipo de estrutura era global.
Na versão ES6 foi introduzida a keyword let, que gera uma variável local dentro de qualquer estrutura de bloco.
var x = 0;
if (x == 0) {
let nome = "Mariana";
}
console.log(nome); // Este comando gerará um erro,
// pois a variável nome foi criada no escopo local do bloco.
As variáveis devem ser sempre de escopo local, a não ser que se pretenda, propositalmente, usá-las no escopo global. Isto evita conflitos de nomes de variáveis, o que pode gerar muitas vezes erros difíceis de serem detectados. Portanto, é recomendável o uso da keyword let dentro das estruturas de bloco.
A partir de agora, sempre crie loops for com a keyword let.
var a = "teste";
for (let a = 0; a < 5 ; a++) {
console.log(a);
}
console.log(a); // O console mostrará "teste"
Neste caso, a variável a só é visível dentro deste loop, e caso seja criada outra variável de mesmo nome, não haverá conflito. No exemplo acima, a passagem no loop não alterou a variável global a.
A keyword const
A versão ES6 também introduziu a keyword const, que serve para criar constantes. Elas funcionam como let, com uma diferença, as constantes não podem ter seu valor alterado:
const PI = 3.14159;
PI = 0; // Este comando gerará um erro, pois não se pode alterar o valor de uma constante
No exemplo acima, apesar de não haver problema em usar uma variável normal para guardar o valor de PI (π), por uma questão de organização e clareza do código, é recomendável usar constantes quando se cria uma variável que supostamente não deve ter seu valor alterado, como é o caso.