17

Como fazer uma variável global em JavaScript?

Preciso que a variável que foi declarada em uma função funcione em outra função.

Exemplo: JSFiddle

$("#div3").click(function() {
    var fill = "a";
});


$("#div2").click(function() {
alert(fill);
});

Quando eu clicar na #div3 a variável funciona no alert da #div2!

1

3 Respostas 3

36

Você tem certeza que quer fazer isso? Não é uma boa indicação. É sempre preferível achar uma solução para passar eswe valor de alguma outra forma. Pelo menos encapsular em uma função global.

Se quer mesmo, declare ela fora da função e sem o var. Ela estará acessível globalmente. A declaração sem var torna a variável global de forma implícita. Portanto ela até poderia ser declara dentro da função sem o var que seria global do mesmo jeito, mas poderia se tornar mais confuso.

fill = "";

$("#div3").click(function() {
    fill = "a";
});

$("#div2").click(function() {
alert(fill);
});

Se não quiser que ela seja global, mas seja apenas acessível nas duas funções pode usar o var (mais recomendado que deixar global):

var fill;

$("#div3").click(function() {
    fill = "a";
});

$("#div2").click(function() {
alert(fill);
});

Coloquei no GitHub para referência futura.

Dessa forma, em tese, pelo menos o escopo fica mais limitado. A variável fill estará disponível nas duas funções mas não em outros lugares do script. Provavelmente esta forma já resolve o que você quer. Ainda assim não é o mais indicado. prefira sempre passar variáveis por parâmetro.

Porque variáveis globais são ruins

O JavaScript usa escopo léxico para variáveis explicitamente declaradas (com var), ou seja, a visibilidade de uma variável é o local onde ele foi criada. Uma variável não vaza para fora do "aninhamento" que ela foi declarada, mas está presente em todos os aninhamentos internos ao local onde foi criada com a declaração.

Para deixar claro, uma variável declarada explicitamente utiliza o comando var e é recomendado que todas as variáveis sejam declaradas desta forma. A outra forma de declarar uma variável é implicitamente, ou seja, sem comando algum, você atribui um valor para uma variável e se ela não existe, ela é criada, se existe, muda o valor existente. Já deu para perceber como isto pode ser confuso?

O segundo exemplo que eu mostrei é bem melhor porque não sofre deste problema. Embora possa não fazer muita diferença se o local que você está declarando não for uma função. O escopo fora de qualquer função não deixa de ser um escopo global. Então se essas duas funções que você está declarando não estiver dentro de outras funções (ou módulos no EcmaScript 6), colocar o var para a declarar a variável fill terá o mesmo efeito que não usar o comando e deixar implicitamente global. Mas colocar o var é pouquinho melhor porque pelo menos deixa claro a intenção de criar uma variável nova.

A passagem de argumentos através de parâmetros é sempre recomendado para evitar que você acesse dados sem querer, que acesse algo que não era bem o que você queria. E pior, se for uma variável passada por valor, que ela não seja alterada sem ser o seu desejo. Parâmetros que são passados por valor (se for dos numeric ou string, por exemplo) podem ser manipulados dentro de uma função sem risco de mudar a variável que foi usada para passar como argumento na chamada da função. Já os parâmetros por referência (array e object) alteram o valor e as manipulações ocorridas dentro da função permanecem na variável quando ela se encerra.

Se você manipula uma variável herdada por escopo léxico ou declarada implicitamente globais, o valor permanece e pode não ser o que você deseja. Mesmo quando acha que é o que você deseja. Você cria efeitos colaterais e bugs difíceis de serem localizados.

Quando usa um parâmetro podemos dizer que o parâmetro é a declaração da variável e uma declaração de variável deve estar muito próxima do seu uso para evitar confusões. Quando você declara um pouco distante, mesmo que pouco, já começa a confusão. E quanto mais distante mais confuso e mais difícil sincronizar todas as manipulações sem causar problemas.

Você pode criar um escopo artificial mesmo na versão atual. Veja o exemplo final na resposta do mgibsonbr como criar um escopo artificial e limitar o acesso da variável.

Para mais informações veja essa e essa resposta.

4
  • obrigado!!!!!!!
    – Alan PS
    Commented 11/09/2014 às 22:22
  • @bigown, a resposta esta muito boa, mas eu discordo da afirmação no primeiro paragrafo após Porque variáveis globais são ruins. Não sei se seu intuito era disser que uma variável com var não vaza do aninhamento, a frase não me deixou claro isso, mas vaso ela esteja sem o var, então sim, ela vaza ate chegar no aninhamento top.level ou window, assim como disse nesta resposta. Commented 28/10/2015 às 13:12
  • 1
    @GuilhermeLautert coloquei lá mas facilitar mas o parágrafo seguinte explica sobre o que estou falando.
    – Maniero
    Commented 28/10/2015 às 13:23
  • tirou minha duvida.
    – HashMap
    Commented 8/07/2016 às 1:04
23

Em JavaScript, uma variável é global nas seguintes situações:

  1. Ela foi declarada sem usar var:

    fill = ""; // Globalmente acessível
    
  2. Ela foi declarada usando var, mas no top-level (i.e. sem estar dentro de nenhuma função):

    var fill = ""; // Globalmente acessível
    
  3. Ela foi criada atribuindo-se uma propriedade ao objeto global (que no browser é window):

    window.fill = ""; // Globalmente acessível
    
    window["fill"] = ""; // Globalmente acessível
    

Caso contrário ela é local à função em que foi definida. Note que parâmetros de funções funcionam como variáveis locais. Variáveis locais a uma função são acessíveis dentro dela e dentro de qualquer função definida em seu corpo (ver closure).

$(document).ready(function() {
    var fill = ""; // Acessível somente dentro dessa função
});

Não existe escopo de bloco em JavaScript, de modo que variáveis criadas dentro de um bloco serão visíveis no seu escopo mais externo:

function teste() {
    for ( var x = 10 ; x < 20 ; x++ ) { // x é acessível em qualquer lugar dentro da função
        var y = 42; // y é acessível em qualquer lugar dentro da função
    }
}

for ( var x = 10 ; x < 20 ; x++ ) { // x é globalmente acessível
    var y = 42; // y é globalmente acessível
}

Sendo assim, se você quer que sua variável seja acessível em duas funções diferentes, você pode declará-la no seu escopo comum (como sugerido na resposta do Maniero) - tomando o cuidado pra esse escopo não ser o top-level (caso em que a variável se tornaria global com ou sem o var). Alternativamente, se você quiser restringir mais o escopo, você pode criar um closure específico para essas duas funções:

(function() {
    var fill; // Não é acessível fora desse closure

    $("#div3").click(function() {
        fill = "a";
    });

    $("#div2").click(function() {
        alert(fill);
    });
})();
1
  • tirou minha duvida.
    – HashMap
    Commented 8/07/2016 às 1:04
3

Quando preciso usar uma variavel global em JS faço da seguinte forma:

top.fill = "";

$("#div3").click(function() {
    top.fill = "a";
});


$("#div2").click(function() {
    alert(top.fill);
});

Acredito que vc deve ter o resultado esperado.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .