O problema com as variáveis globais no Javascript

O Javascript é uma linguagem que muitos vêm como limitada, mas que, na minha opinião, tem seu valor. Por ser um pouco renegada, a maioria não se importa em entender muito bem como ela funciona, só quer saber o básico da sintaxe para fazer o que precisa.

Uma dúvida comum quando se está começando é sobre declaração de variáveis: quando e porque utilizar o var? Vejamos um exemplo:

var numero = 1;

function exibe()
{
    alert(numero);
}

exibe();

Conforme esperado, o valor 1 é exibido, já que a variável numero é global. Para confirmar essa informação, vamos fazer:

var numero = 1;

function exibe()
{
    alert(numero);
}

function altera()
{
    numero = 2;
}

exibe();
altera();
exibe();

Como resultado, são exibidos os valores 1 e 2. Assim, a função altera está modificando o valor da variável global numero.

Afinal, onde o var se encaixa nessa história? O var serve para declarar o escopo da variável. Se uma variável é declarada sem o var, ela é automaticamente global. Quer ver?

function define()
{
    numero = 1;
}

function exibe()
{
    alert(numero);
}

define();
exibe();

O número 1 é exibido. Para confirmar, faça o seguinte:

function define()
{
    var numero = 1;
}

function exibe()
{
    alert(numero);
}

define();
exibe();

Neste caso ocorre o seguinte erro: ReferenceError: numero is not defined. Isto ocorre pois a variável numero pertence ao escopo da função define e, portanto, não pode ser acessada de dentro da função exibe.

Quais são as implicações disso? Considere o seguinte exemplo:

var Cachorro = function(nome)
{
    _nome = nome;

    this.get_nome = function()
    {
        return _nome;
    }

    // (...)
}

var Gato = function(nome)
{
    _nome = nome;

    this.get_nome = function()
    {
        return _nome;
    }

    // (...)
}

rex = new Cachorro('Rex');
mimi = new Gato('Mimi');
alert(rex.get_nome());
alert(mimi.get_nome());

Neste caso, é exibido Mimi duas vezes, ao invés do que esperávamos: Rex e Mimi. Isto acontece pois, ao contrário do que pretendíamos, _nome é uma variável global, e o último valor que é atribuído a ela é ‘Mimi’ (dentro do “construtor” da classe Gato).

Para evitar este tipo de problema, sempre declare suas variáveis no Javascript utilizando o var. O código corrigido ficaria assim:

var Cachorro = function(nome)
{
    var _nome = nome;

    this.get_nome = function()
    {
        return _nome;
    }

    // (...)
}

var Gato = function(nome)
{
    var _nome = nome;

    this.get_nome = function()
    {
        return _nome;
    }

    // (...)
}

var rex = new Cachorro('Rex');
var mimi = new Gato('Mimi');
alert(rex.get_nome());
alert(mimi.get_nome());