Palavra-chave var no JavaScript

Em JavaScript, a forma como você cria e usa variáveis impacta diretamente o comportamento do código. A palavra-chave var tem sido usada por décadas para declarar variáveis. Desde que o ES6 introduziu let e const, var raramente é a escolha certa em código novo — mas você ainda vai encontrá-la em tutoriais, perguntas de entrevista e projetos legados. Este capítulo explica exatamente como var funciona, por que suas regras de escopo e hoisting surpreendem as pessoas e quando (se é que alguma vez) você deve usá-la hoje.

Esta página abrange: como var tem seu escopo definido, hoisting e a armadilha do undefined, variáveis globais acidentais, redeclaração, o famoso bug de closure em loop e as alternativas mais seguras com let/const.

Introdução à Declaração de Variáveis com var

A palavra-chave var declara uma variável, opcionalmente inicializando-a com um valor. Variáveis declaradas com var têm escopo de função ou escopo global (nunca escopo de bloco), e estão sujeitas ao hoisting, o que pode produzir comportamentos que surpreendem desenvolvedores vindos de outras linguagens. Para o básico sobre declaração de variáveis, veja Variáveis JavaScript.

Escopo de Função

Uma variável declarada com var dentro de uma função é local àquela função e acessível em qualquer lugar dentro dela. Crucialmente, var não respeita os limites de bloco: mesmo quando declarada dentro de um bloco como uma instrução if ou um loop for, a variável "vaza" e fica visível em toda a função que a envolve.

Esta é a maior diferença em relação a let e const: com elas, x só existiria dentro do bloco if, e o console.log lançaria um ReferenceError. Veja Escopo de Variáveis para o quadro completo do escopo de bloco.

Hoisting

Hoisting é o comportamento do JavaScript de tratar declarações como se fossem movidas para o topo do seu escopo de contenção. Para um var, apenas a declaração é içada, não a atribuição — então o nome existe desde o início da função, mas mantém o valor undefined até que a execução chegue à linha que o atribui.

Ler y antes de sua linha var resulta em undefined em vez de um ReferenceError. É isso que torna o hoisting do var sutil: o código parece "funcionar", mas um erro de digitação ou uma atribuição mal posicionada pode silenciosamente ler undefined.

let e const também sofrem hoisting, mas vivem na zona morta temporal até que sua declaração seja executada, então lê-las antes lança um erro em vez de retornar silenciosamente undefined — geralmente o que você realmente quer:

Variáveis Globais e a Palavra-chave var

Quando var é usada fora de qualquer função, ela se torna uma variável global acessível de qualquer lugar. Em navegadores, isso também a anexa como propriedade do objeto global (window), o que let e const não fazem. O risco: dois scripts que declarem var config vão silenciosamente sobrescrever um ao outro.

var globalVar = "I am global";
// In a browser: window.globalVar === "I am global"  → true

let blockGlobal = "scoped";
// window.blockGlobal → undefined (let/const do not become window properties)

Esquecer de declarar uma variável (atribuindo a um nome não declarado no modo não-estrito) também cria um global acidental — mais um motivo para usar "use strict" e preferir let/const.

Limitações do var e Alternativas Modernas

Embora var tenha sido parte fundamental do JavaScript, ela apresenta limitações que levaram à introdução de let e const no ES6 (ECMAScript 2015), oferecendo declarações de variáveis com escopo de bloco.

Confusão de Hoisting e Escopo

O comportamento de hoisting e a natureza de escopo de função do var podem gerar confusão, especialmente em construções de loop ou blocos condicionais, onde variáveis com escopo de bloco são esperadas intuitivamente.

Redeclaração com var e Peculiaridades de Closure em Loop

• Redeclaração: Ao contrário de let e const, var permite redeclarar a mesma variável no mesmo escopo sem erro — então uma declaração duplicada pode silenciosamente sobrescrever uma anterior.
• Closure em Loop: Uma variável de loop com var vive em um único escopo de função compartilhado, então cada closure criada no loop vê a mesma variável. Quando os callbacks são executados, o loop já terminou e a variável contém seu valor final.

O bug de closure em loop é o clássico problema do var. Os três callbacks compartilham um único i:

Substituir var por let resolve o problema: let cria uma nova ligação para cada iteração, então cada closure captura seu próprio valor:

Antes do let, a solução era uma IIFE que capturava o valor por iteração:

Introdução de let e const

Para mitigar os problemas associados ao var, let e const oferecem aos desenvolvedores variáveis com escopo de bloco, reduzindo o risco de erros causados pelo hoisting e tornando o código mais previsível e fácil de depurar.

Boas Práticas para Usar var em JavaScript

Apesar de suas limitações, var continua sendo parte da linguagem JavaScript e ainda pode ser encontrada, especialmente em código legado. Seguir as boas práticas garante que seu uso não prejudique a funcionalidade ou a manutenibilidade do código.

1. Limite o Uso em Código Moderno: Prefira let e const para declarações de variáveis, para aproveitar o escopo de bloco e reduzir possíveis problemas de hoisting.
2. Entenda o Escopo: Ao trabalhar com var, esteja ciente de sua natureza de escopo de função e planeje a estrutura do seu código para evitar variáveis globais não intencionais.
3. Inicialização na Declaração: Inicialize variáveis var no momento da declaração para evitar valores undefined causados pelo hoisting.

Conclusão

A palavra-chave var tem sido por muito tempo um pilar do JavaScript. Entender seu comportamento de escopo e hoisting é fundamental para escrever código confiável. À medida que a linguagem evoluiu, let e const foram introduzidos para resolver as limitações do var, tornando o JavaScript moderno mais previsível. No entanto, entender o var continua sendo essencial para manter bases de código legadas. Seguindo as boas práticas e preferindo declarações com escopo de bloco, os desenvolvedores podem escrever JavaScript mais limpo e fácil de manter.

Prática