Variáveis em JavaScript: var, let e const

📚 Introdução

Em JavaScript, existem três formas de declarar variáveis: var, let e const. Cada uma tem suas características específicas e casos de uso apropriados. Compreender as diferenças entre elas é fundamental para escrever código JavaScript moderno e eficiente.

🔍 var - A Forma Clássica

Características do var:

• Escopo de função ou escopo global
• Hoisting (içamento)
• Pode ser redeclarada
• Pode ser reatribuída

Exemplo Básico:

var nome = "João";
var idade = 25;

console.log(nome); // "João"
console.log(idade); // 25

// Redeclaração permitida
var nome = "Maria";
console.log(nome); // "Maria"

Problema do Escopo:

function exemploVar() {
    if (true) {
        var x = 1;
    }
    console.log(x); // 1 - Acessível fora do bloco if
}

exemploVar();

Hoisting com var:

console.log(minhaVar); // undefined (não erro!)
var minhaVar = "Olá";
console.log(minhaVar); // "Olá"

// É interpretado como:
// var minhaVar; // undefined
// console.log(minhaVar);
// minhaVar = "Olá";
// console.log(minhaVar);

🆕 let - Escopo de Bloco

Características do let:

• Escopo de bloco
• Hoisting (mas com Temporal Dead Zone)
• NÃO pode ser redeclarada no mesmo escopo
• Pode ser reatribuída

Exemplo Básico:

let nome = "Ana";
let idade = 30;

console.log(nome); // "Ana"
console.log(idade); // 30

// Reatribuição permitida
nome = "Carlos";
console.log(nome); // "Carlos"

// Redeclaração não permitida
// let nome = "Pedro"; // SyntaxError!

Escopo de Bloco:

function exemploLet() {
    if (true) {
        let y = 2;
        console.log(y); // 2
    }
    // console.log(y); // ReferenceError: y is not defined
}

exemploLet();

Temporal Dead Zone:

// console.log(minhaLet); // ReferenceError!
let minhaLet = "Oi";
console.log(minhaLet); // "Oi"

🔒 const - Constantes

Características do const:

• Escopo de bloco
• Hoisting (mas com Temporal Dead Zone)
• NÃO pode ser redeclarada
• NÃO pode ser reatribuída (mas objetos são mutáveis)
• DEVE ser inicializada na declaração

Exemplo Básico:

const PI = 3.14159;
const NOME_EMPRESA = "TechCorp";

console.log(PI); // 3.14159
console.log(NOME_EMPRESA); // "TechCorp"

// Reatribuição não permitida
// PI = 3.14; // TypeError!
// NOME_EMPRESA = "OutraCorp"; // TypeError!

const com Objetos:

const pessoa = {
    nome: "João",
    idade: 25
};

// Mutação do objeto é permitida
pessoa.nome = "Maria";
pessoa.cidade = "São Paulo";

console.log(pessoa);
// { nome: "Maria", idade: 25, cidade: "São Paulo" }

// Mas reatribuição não é permitida
// pessoa = {}; // TypeError!

const com Arrays:

const frutas = ["maçã", "banana"];

// Mutação do array é permitida
frutas.push("laranja");
frutas[0] = "uva";

console.log(frutas); // ["uva", "banana", "laranja"]

// Mas reatribuição não é permitida
// frutas = []; // TypeError!

📊 Comparação Resumida

💡 Boas Práticas

1. Use const por padrão:

const config = {
    apiUrl: "https://api.exemplo.com",
    timeout: 5000
};

2. Use let quando precisar reatribuir:

let contador = 0;
for (let i = 0; i < 10; i++) {
    contador += i;
}

3. Evite var em código moderno:

// ❌ Evite
var x = 1;

// ✅ Prefira
const x = 1;
// ou
let x = 1;

🔄 Exemplos Práticos

Loop com diferentes declarações:

// Problema com var
for (var i = 0; i < 3; i++) {
    setTimeout(() => {
        console.log("var:", i); // 3, 3, 3
    }, 100);
}

// Solução com let
for (let j = 0; j < 3; j++) {
    setTimeout(() => {
        console.log("let:", j); // 0, 1, 2
    }, 100);
}

Declaração de constantes:

// Configurações globais
const CONFIG = {
    MAX_USERS: 100,
    API_VERSION: "v1",
    CACHE_TIME: 3600
};

// Funções puras
const somar = (a, b) => a + b;
const multiplicar = (a, b) => a * b;

// Arrays que serão modificados
const usuarios = [];
const logs = [];

🎯 Exercícios Práticos

Exercício 1:

Identifique o que será exibido no console:

var a = 1;
let b = 2;
const c = 3;

if (true) {
    var a = 4;
    let b = 5;
    const c = 6;
    console.log(a, b, c); // ?
}

console.log(a, b, c); // ?

Exercício 2:

Corrija o código para funcionar corretamente:

// ❌ Problemático
for (var i = 0; i < 3; i++) {
    setTimeout(() => console.log(i), 100);
}

// ✅ Corrija aqui

📝 Resumo

• var: Escopo de função, hoisting, pode ser redeclarada - evite em código moderno
• let: Escopo de bloco, ideal para variáveis que mudam de valor
• const: Escopo de bloco, ideal para valores que não serão reatribuídos

Ordem de preferência: const > let > var

🔗 Próximos Passos

Agora que você domina as declarações de variáveis, explore:

• Hoisting em profundidade
• Closures e escopo
• Destructuring com let e const
• Módulos ES6 e suas declarações

---

Continue praticando e experimentando com diferentes cenários para consolidar seu conhecimento! 🚀