1
2
3
4
5
6
7
8
9
10
11
12

var x = 1;
 
function fn1() {
    var x = 2;
    alert(x);
}
function fn2() {
    alert(x);
}
 
fn1();
fn2();

O resultado é: 2 e depois 1. Neste exemplo, uma outra variável x (que por acaso tem o mesmo nome) foi definida dentro da função fn1. Por isso, ao executarmos a função fn2 o valor original da variável declarada na linha 1 permanece.

Para que o resultado fosse 2 e 2:

1
2
3
4
5
6
7
8
9
10
11
12

var x = 1;
 
function fn1() {
    x = 2; // atribuição de valor sem var
    alert(x);
}
function fn2() {
    alert(x);
}
 
fn1();
fn2();

A modificação da linha 4 altera o valor da variável declarada na linha 1 e temos, consequentemente, o mesmo resultado nos dois alerts (trata-se da mesma variável com o mesmo nome).

Note que na linha 1 dos dois exemplos a variável foi declarada utilizando-se var. Entretanto, a remoção de var não implica em nenhuma mudança de comportamento. Isso acontece porque neste caso a declaração ocorre no escopo mais “exterior” do nosso código. Com ou sem var ela pode ser considerada global.

E porque isso é importante?

O uso de variáveis globais é uma péssima prática. A variável pode ser utilizada e modificada por qualquer parte do código. Isso é fonte de inúmeros bugs. A não ser que seja realmente necessário, sempre declare as variáveis como locais. É possível (e recomendável) declarar várias variáveis locais de uma vez:

1
2
3
4
5
6

    var x = 1, y, z; // boa prática
 
    var x = 1; // não tão boa
    var y;
    var z;
}