92

Sempre fico em dúvida nos projetos se coloco var antes de dar um valor a uma variavel ou não pois ambos funcionam (eu acho). Alguém sabe explicar o motivo de usar ou não? Qual a convenção ou boa prática a ser seguida?

É uma pergunta boba eu acho, mas como nunca estudei JavaScript gostaria de saber.

6
  • 6
    Não é uma pergunta boba não, pelo contrário. Na verdade, considerando a frequência com que a gente vê código JavaScript "poluído" com declarações globais de variáveis, é uma pergunta bastante relevante!
    – rsenna
    Commented 29/01/2014 às 13:38
  • @Maniero qual seria o seu critério usado para determinar que essa pergunta não teve atenção suficiente?
    – Costamilam
    Commented 23/07/2018 às 18:58
  • @GuilhermeCostamilam O meu estritamente pessoal. Quem está dando a recompensa pode fazê-lo onde quiser. Não é requisito ter motivo a pessoa gastar sua reputação para destacar algo que acha que deve.
    – Maniero
    Commented 23/07/2018 às 19:03
  • @Maniero apenas estranhei, já tinha visto você oferecer recompensas para recompensar uma resposta existente. Não entendi o motivo dessa, pensei que de repente queria alguma resposta atualizada com const e let, mas não tinha certeza
    – Costamilam
    Commented 23/07/2018 às 19:07
  • @GuilhermeCostamilam essa é sobre o var muito usuário ainda não usa.
    – Maniero
    Commented 23/07/2018 às 19:09

6 Respostas 6

68
+50

AVISO

Esta resposta foi escrita antes de let e const estarem disponíveis em todos os navegadores. O princípio geral da resposta ainda é válido: sempre declare suas variáveis. Porém, atualmente é recomendado utilizar let ou const no lugar de var.

Sempre é recomendado usar a palavra chave var pois torna a variável local, caso contrario ela vira global. Isso evita conflitos, variável corrompida, torna o código menos vulnerável a acesso via barra de endereço.

javascript:count = 0, um código semelhante a essa zerava a contagem do rapishare na hora do fazer o download, porém como tinha uma validação side server ele não deixa baixar o arquivo em um periodo curto

exemplo de variavel exposta: (testei isso no chrome, o firefox acabou mudando bastante a politica de javascript se não me engano apartir da versão 25 então o exemplo não vai funcionar)

Esse código foi retirado de um site real.

<html>
<head>
<script language="JavaScript">
    var xtx=20; // linha original
    function IniciaRegressivo() {
        if (xtx > 0) {
            document.getElementById('botao').innerHTML =
           '<div class="protetor-botao"><a>Aguarde '+ xtx +' segundos</a></div>';
            xtx = xtx - 1;
            setTimeout("IniciaRegressivo();", 1000);
        } else {
            document.getElementById('botao').innerHTML = 
            '<div class="protetor-botao">
            <a href="javascript:download();">Fazer Download</a></div>';
        }
    }
</script>
</head>

<body onload="IniciaRegressivo();">

<div name="botao" id="botao"></div>
</html>

Na barra de endereço do navegador digite esse 'código'(digite pelo menos javascript: e depois cole o resto)

javascript:xtx=0;IniciaRegressivo();

veja o resultado.

Agora modifique a linha:

<script language="JavaScript">
    var xtx=20; // linha original

para:

if(typeof(xtx) == "undefined"){
   xtx = 80; //variavel local da função IniciaRegressivo() certo?
}

de um ctrl+f5 e teste novamente.

2
  • Sua resposta foi realmente muito útil para mim! +1
    – Joao Paulo
    Commented 28/01/2014 às 16:35
  • Me parece também, que variáveis globais no JS não funcionam no IE8...não que ele faça diferença na minha vida...mas... Commented 29/01/2014 às 13:37
36

AVISO

Esta resposta foi escrita antes de let e const estarem disponíveis em todos os navegadores. O princípio geral da resposta ainda é válido: sempre declare suas variáveis. Porém, atualmente é recomendado utilizar let ou const no lugar de var.

O var é fundamental para distinguir variáveis locais de globais. Sem ele, todas as variáveis serão globais – pior, serão globais implícitas, já que o código não deixa claro o escopo.

Isso é sério o suficiente para ser proibido no modo estrito da linguagem:

function teste() {
    "use strict";
    x = 10;
}
teste(); // ReferenceError

Tenha sempre em mente que cada função cria um novo escopo em JavaScript. Portanto, variáveis diferentes mas com o mesmo nome podem existir dentro e fora da função.

Compare:

var x = 10;
function alteraGlobal() {
    x = 20;
}
alteraGlobal();
alert(x); // alerta 20

Versus:

var x = 10;
function alteraLocal() {
    var x = 20;  // este x é outro, local!
}
alteraLocal();
alert(x); // alerta 10

Isso é o básico que se precisa entender sobre escopo e var em JavaScript. Para a sutileza de usar ou não var para criar, propositalmente, uma variável global, veja a resposta do Anthony Accioly.

0
27

AVISO

Esta resposta foi escrita antes de let e const estarem disponíveis em todos os navegadores. O princípio geral da resposta ainda é válido: sempre declare suas variáveis. Porém, atualmente é recomendado utilizar let ou const no lugar de var.

O que diz a documentação?

Como definido pela [documentação da Mozilla](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var):

The scope of a variable declared with var is the enclosing function or, for variables declared outside a function, the global scope (which is bound to the global object). Using var outside a function is optional; assigning a value to an undeclared variable implicitly declares it as a global variable (it is now a property of the global object). The difference is that a declared variable is a non-configurable property of the global object while an undeclared is configurable.

Em tradução livre:

O escopo em que a variável var é declarada com o var é definido a partir do encapsulamento da função em que é declarado ou, para variáveis declarada fora de funções, o escopo global (que é o "limite" do objecto global). Utilizar o var fora de uma função é opcional; atribuir um valor para uma variável não declarada, implicitamente declara a variável como global (passa a ser uma propriedade do objeto global). A diferença é que uma variável declarada é uma propriedade não-configurável do objeto global, enquanto uma variável não-declarada é configurável.

Qual a influência disso?

As implicações podem ser obtidas do exemplo encontrado no mesmo [link da documentação](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var) fornecido anteriormente.
var a = 1;
b = 2;

delete this.a; // Lança um TypeError no "strict mode". Senão falha silenciosamente 
delete this.b;

console.log(a, b); //Lança um ReferenceError. Como a propriedade 'b' não existe no objeto global, b deixa de ser uma variável.

Por isso, é recomendado sempre utilizar o var quando for declarar uma variável interna a uma função, pois atribuir um valor sem declarar a variável dentro de uma função, geralmente pode causar erros e, por esse motivo, o strict mode da ECMAScript 5 lança um erro.

21
+50

AVISO

Esta resposta foi escrita antes de let e const estarem disponíveis em todos os navegadores. O princípio geral da resposta ainda é válido: sempre declare suas variáveis. Porém, atualmente é recomendado utilizar let ou const no lugar de var.

Vou fazer uma transcrição (com leves adaptações em itálico) de uma resposta do usuário kangax no SOE que, na minha opinião, é a melhor referência sobre o assunto que temos (superando a resposta aceita para a pergunta original no SOE).


Existe uma diferença entre declarações com ou sem o uso de var.

var x = 1 declara a variável x no escopo atual (também conhecido como contexto de execução). Se a declaração aparece dentro de uma função - uma variável local é declarada; se aparece no escopo global - uma variável global é declarada.

x = 1, por outro lado, é apenas uma atribuição de propriedade. O interpretador tenta primeiro resolver x contra a cadeia de escopo. Se ele encontra x em qualquer lugar da cadeida de escopo, ele faz uma atribuição; se ele não encontra x, somente então ele cria a propriedade x em um objeto global (que é um objeto no nível superior de uma cadeia de chamada e.g., window).

Agora, perceba que o comando x = 1 não declara uma variável global, ele cria uma propriedade global.

A diferença entre as duas é sútil e pode ser confusa a não ser que você entenda que declarações de variáveis também criam propriedades (apenas em um Variable Object [link meu]) e que toda propriedade em Javascript (bem, ECMAScript) tem certas flags que descrevem suas propriedades - ReadOnly, DontEnum and DontDelete.

Como a declaração de variáveis cria propriedades com a flag DontDelete, a diferença entre var x = 1 e x = 1 (quando executada no escopo global) é que a primeira - declaração de variável - cria uma propriedade não deletável, e a última não. Como consequência, propriedades criadas através dessa atribuição implícita podem ser deletadas do objeto global, enquanto as primeiras - aquelas criadas via declaração da variável - não podem.

Mas isso é apenas teoria e na prática existem ainda mais diferenças entre as duas, devido a vários erros nas implementações (com os do IE).

Espero que tudo faça sentido : )

[Atualização 16/12/2010]

No ES5 (ECMAScript 5; a recentemente padronizada quinta edição da linguagem) há um assim chamado "modo estrito" — um modo opcional da linguagem que altera ligeiramente o comportamento de atribuições não declaradas. Dentro do modo estrito, a atribuição de um identificador não declarado é considerado um ReferenceError. A justificativa para isso é identificar as atribuições acidentais, impedindo a criação de propriedades globais indesejadas. Alguns dos navegadores mais recentes já começaram a suportar o modo estrito. Veja, por exemplo, a tabela de compatibilidade no blog do kangax.

Notas minhas:

  • Já temos o ES6 no forno, previsto para se tornar uma padrão em Dezembro de 2014. Deixei a nota de atualização (datada de 2010) apenas para explicar o comportamento do modo estrito.
  • NO ES5 a noção de Variable Object foi substituída pela de Lexical Environments (não sou corajoso o suficiente para tentar traduzir nenhum dos dois conceitos por pensar em pelo menos 3 traduções diferentes para cada).
1
13

AVISO

Esta resposta foi escrita antes de let e const estarem disponíveis em todos os navegadores. O princípio geral da resposta ainda é válido: sempre declare suas variáveis. Porém, atualmente é recomendado utilizar let ou const no lugar de var.

Creio que a melhor resposta que já vi ate hoje e que seja bem simples esta no próprio SO.

Transcrição

Se você está no escopo global então não há nenhuma diferença.

Se você estiver em uma função, var vai criar uma variável local, a não utilização de var fara com que ele procure a variável pelos escopos a cima dele ate chegar do escopo global, só então, se ele não encontrar a variável era criá-la (no escopo global).

// Estas estão no escopo global
var foo = 1;
bar = 2;

function()
{
    var foo = 1; // Local
    bar = 2;     // Global

    // Execute uma função anonima
    (function()
    {
        var wibble = 1; // Local
        foo = 2; // Herda do escopo acima (criada na função)
        moo = 3; // Global
    }())
}

Se você não está fazendo uma atribuição então você precisa usar o var:

var x; // Declara x

Obs

Todas as respostas a cima estão corretas, apenas salientei esta, pois me parece a mais simples.

10

AVISO

Esta resposta foi escrita antes de let e const estarem disponíveis em todos os navegadores. O princípio geral da resposta ainda é válido: sempre declare suas variáveis. Porém, atualmente é recomendado utilizar let ou const no lugar de var.

Javascript é uma linguagem ampla, porque você pode fazer quase todas as coisas que você quer em uma página da Web, apenas através de criação de funções e encontrar maneiras de fazer.

Posso dizer que o JavaScript não é uma linguagem segura, porque você pode facilmente acessar a maior parte das variáveis ​​e funções, ler e saber como ele funciona, apenas acessando o arquivo *.js, incluído na página.

Meu Pensamento: Alguns modificadores de acesso foram criados para usar em javascript devido a necessidades, porque o JavaScript não "se transporta" à outros lugares (páginas), a menos que você use uma variável de sessão.

E sobre isso, alguns modificadores conhecidos:

private
protected
public

Eu posso te dizer que eu sei que alguns modificadores do javascript têm alguma semelhança com eles, que são:

Local:

var Variavel = 0;

Automaticamente, esta é convertida em uma variável Inteiro(Integer), porque ele está recebendo um valor Inteiro(Integer), e também, esta é uma variável local por causa do modificador var que declara esta variável de uma maneira que você não pode acessar o valor dela, a menos que você esteja dentro da mesma função que essa variável foi declarada.

Exemplo:

Se você declarar estas funções desta forma, com modificadores padrão:

function conflito(){
  i = 2;
  mudarI();
  alert(i);
}
function mudarI(){
  i = 0;
}

Neste caso, o i é a mesma variável para as duas funções.

Então, se você executar conflito() , você vai receber um alerta de que resulta 0.

MAS, se você declarar i usando o modificador var:

function conflito(){
  var i = 2;
  mudarI();
  alert(i);
}
function mudarI(){
  var i = 0;
}

Neste caso, você tem duas variáveis ​​i, porque elas estão restritas ao uso apenas dentro de sua função, por isso, se você executar conflito(); agora, você receberá um alerta com valor de 2.

Variável pertencente ao Método:

this.Variable = "a";

Esta variável é automaticamente um String, porque ele está recebendo um valor String, Provavelmente você já sabe o que este modificador faz, mas, vou tentar explicar com o meu ponto de vista, isto é, esta variável está vindo da SuperClass ou seja, que pode ser chamado de uma classe , ou em outras palavras , a classe "pai".

Um exemplo:

function TClass()
{
  this.getVar = function()
  {
    try
    {
      return "test";
    }
    catch(err)
    {
      return false;
    }
  }
  this.alertVar = function()
  {
    try
    {
      alert(this.getVar());
    }
    catch(err)
    {
      alert('erro');
    }
  }
}
var $Class = new TClass();

Como você pode ver acima , eu criei uma classe TClass e algumas variáveis ​​que contêm funções dentro (javascript closure) e adicionei o modificador nelas. Para torná-las vinculadas ao TClass e, como você vê na função alertVar(), se executar alert(this.getVar()), ele executa a função que é do TClass neste contexto.

E esta parte:

var $Class = new TClass();

Eu estou criando a classe como você provavelmente já sabe, para ter acesso a seus métodos, fazendo isso é possível executar, para testar:

$Class.alertVar();

Resultando um alert contendo "test", como você pode ver :

alert contendo teste

Note que você não pode acessar os métodos TClass de outra forma, você só pode acessá-lo se criar a instância da classe e acessar por ela.

Espero que você tenha entendido a usabilidade deste modificador.

Variáveis Globais:

window.Variable = true;

Automaticamente o javascript declara esta variável como um boolean, porque ele está recebendo um valor booleano. O modificador window, como ele mesmo diz, você pode acessá-lo no momento que você está na janela(window), porque variáveis JavaScript ​​quando declaradas, elas vão para o DOM da janela, veja o que é DOM:

DOM(Document Object Model): O DOM, é uma multi-plataforma que representa a forma como estão organizados as marcações(markup's) HTML, XHTML, e XML lido pelo navegador que você está usando. Em outras palavras, se você acessar o DOM você pode ver cada Propriedade, todas as variáveis​​, ou qualquer coisa que está declarada no navegador no momento.

Diferente de outras variáveis​​, as variáveis ​​da janela pode ter atribuído um outro valor e acessar o valor atual, não importando de onde você esteja acessando, dentro de uma função ou não, dentro de um arquivo *.js ou não.

Exemplo de Global(window):

Execute no evento onLoad de uma página um código que declara uma variável de janela(window), ou declare usando console do navegador mesmo:

window.Variable = true;

Em seguida, adicione um arquivo JS que contém esta função, ou declare apenas por executar o código no console do navegador:

function testGlobalVar(){
  if (Variable)
    alert("funciona!");
}

Quando você executa testGlobalVar() você receberá o alerta, mas é só porque você declarou como 'janela(window)' em caso contrário, não vai executar.

Modificador padrão do Javascript:

Variavel = 0.5;

Automaticamente esta variável é declarada como Float porque está recebendo um valor Float. Eu não sei se você já sabe, mas variáveis javascript ​​declaradas como de costume (sem modificadores), tem um modificador de padrão que faz com que a variável fique semelhante a variáveis ​​da janela , mas você não pode acessá-la de qualquer lugar que esteja, mas na maioria dos casos, você pode acessá-la, particularmente, eu não sei todos os casos que você não pode acessá-la, mas eu sei que você não pode quando você carregou um arquivo *.js e foi declarado dentro dele. Só se você executar uma função que a declara, para ela ir para o DOM e depois disso tentar acessar.

Todavia, eu vejo que você quer saber sobre o var em questão, mas eu te dei uma explicação geral de todos os modificadores que conheço(acredito que são todos), para seu conhecimento fique mais amplo e você tenha um entendimento melhor sobre o modificador em questão.

Espero que você entenda o que estou dizendo .

Ah, e se você ficou confuso quando viu uma função dentro de uma variável , estude Javascript Closures, você vai entender depois de um tempo :).

2
  • 1
    Muito bom. Esse conteúdo me agregou bastante!
    – Joao Paulo
    Commented 30/01/2014 às 12:54
  • Posso estar enganado, mas o JavaScript só possui um tipo numérico (Nunber), tanto para valores inteiros como decimais, sendo assim, 1 ===1.0 é verdadeiro
    – Costamilam
    Commented 27/04/2018 às 20:08

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 .