Declarações de Variáveis em JavaScript: Entendendo var, let e const

O desenvolvimento moderno em JavaScript exige clareza nas declarações de variáveis em JavaScript—no entanto, muitos desenvolvedores ainda têm dificuldades ao escolher entre var, let e const. Entender o escopo de variáveis ES6 não se trata apenas de memorizar regras; trata-se de escrever código que comunica intenção e previne bugs antes que eles aconteçam.

Entendendo as Três Palavras-Chave de Declaração do JavaScript

JavaScript oferece três maneiras de declarar variáveis, cada uma com comportamentos distintos em relação a escopo, hoisting e reatribuição. Sua escolha sinaliza diferentes intenções tanto para o motor JavaScript quanto para outros desenvolvedores que leem seu código.

Escopo de Bloco vs Escopo de Função

A diferença fundamental entre o escopo de variáveis ES6 moderno e os padrões legados está em como as variáveis são contidas:

function processData() {
    if (true) {
        var x = 1;  // Function-scoped
        let y = 2;  // Block-scoped
        const z = 3; // Block-scoped
    }
    console.log(x); // 1 (accessible)
    console.log(y); // ReferenceError
    console.log(z); // ReferenceError
}

Com var, as variáveis “vazam” para fora dos blocos, mas permanecem dentro das funções. Tanto let quanto const respeitam os limites de bloco—qualquer par de chaves cria um novo escopo, incluindo aqueles em loops, condicionais e blocos simples.

A Zona Morta Temporal Explicada

Declarações de variáveis em JavaScript com let e const sofrem hoisting, mas permanecem não inicializadas até que sua declaração seja alcançada. Isso cria a Zona Morta Temporal (TDZ - Temporal Dead Zone):

console.log(myVar);   // undefined (hoisted, initialized)
console.log(myLet);   // ReferenceError (TDZ)
console.log(myConst); // ReferenceError (TDZ)

var myVar = 1;
let myLet = 2;
const myConst = 3;

A TDZ previne os bugs sutis que o comportamento de var frequentemente causava. Você não pode acidentalmente usar uma variável antes de ela ser adequadamente inicializada—o motor lança um erro imediatamente.

Reatribuição vs Mutação

Uma distinção crítica que muitos desenvolvedores perdem: const impede reatribuição, não mutação:

const user = { name: 'Alice' };
user.name = 'Bob';          // Allowed (mutation)
user = { name: 'Charlie' }; // TypeError (reassignment)

const scores = [95, 87];
scores.push(91);            // Allowed
scores = [100, 100];        // TypeError

Para verdadeira imutabilidade, combine const com Object.freeze() ou bibliotecas de dados imutáveis. A palavra-chave de declaração sozinha não torna seus dados imutáveis—ela torna a vinculação (binding) imutável.

Melhores Práticas Modernas para Declarações de Variáveis

As bases de código JavaScript hoje seguem uma hierarquia clara:

1. Use const por padrão: Use para valores que não serão reatribuídos. Isso inclui a maioria das variáveis, mesmo objetos e arrays que você irá mutar.

2. Use let para reatribuição: Contadores de loop, variáveis acumuladoras e valores que genuinamente precisam de nova vinculação.

3. Evite var em código novo: Não há caso de uso moderno onde var forneça benefícios sobre let.

Ferramentas modernas impõem esses padrões. As regras no-var e prefer-const do ESLint capturam violações automaticamente. TypeScript trata as regras de escopo de variáveis ES6 como fundamentais, tornando o escopo de bloco o modelo mental padrão.

Considerações sobre Frameworks

Os hooks do React dependem de declarações de variáveis em JavaScript se comportando de forma previsível:

function Counter() {
    const [count, setCount] = useState(0); // const for the binding
    
    // Wrong: Can't reassign
    // count = count + 1;
    
    // Right: Use the setter
    setCount(count + 1);
}

A Composition API do Vue e outros frameworks modernos seguem padrões similares, onde const domina porque os sistemas de reatividade lidam com atualizações através de métodos, não reatribuição.

Por Que Código Legado Ainda Usa var

Você encontrará var em bases de código mais antigas por razões históricas. Antes do ES6 (2015), era a única opção. A migração requer testes cuidadosos porque:

• Mudar var para let em loops pode corrigir bugs ou introduzi-los, dependendo do comportamento de closure
• Algum código legado deliberadamente explora o hoisting de escopo de função do var
• Ferramentas de build mais antigas podem não transpilar o escopo de variáveis ES6 corretamente

Ao refatorar, use ferramentas automatizadas como jscodeshift com cobertura de testes completa. Não converta manualmente milhares de declarações—deixe as ferramentas lidarem com as mudanças mecânicas enquanto você verifica o comportamento.

Conclusão

Declarações de variáveis em JavaScript em código moderno seguem uma regra simples: use const por padrão, let quando precisar de reatribuição, e nunca var. Isso não é sobre seguir tendências—é sobre escrever código que expressa claramente a intenção e aproveita o escopo de variáveis ES6 para prevenir categorias inteiras de bugs. A Zona Morta Temporal, o escopo de bloco e as regras de reatribuição não são obstáculos—são barreiras de proteção que guiam você em direção a um JavaScript mais sustentável.

Perguntas Frequentes

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.