Declarando variáveis: var, let e const - qual usar e quando?

No JavaScript, existem três palavras-chave principais para declarar variáveis: var, let e const. Embora todas sirvam para "guardar informações como em caixinhas", elas se comportam de maneiras diferentes, especialmente em relação ao seu escopo (onde a variável é visível e acessível) e se seu valor pode ser reatribuído ou não.

Vamos entender cada uma delas.

1. var (A "vovó" das variáveis)

A palavra-chave var é a forma mais antiga de declarar variáveis em JavaScript. Ela foi a única opção por muitos anos, mas hoje é pouco recomendada para novos códigos devido a algumas características que podem causar confusão e erros.

Características principais do var:

• Escopo de função: Variáveis declaradas com var têm escopo de função. Isso significa que elas são visíveis em toda a função onde foram declaradas, ignorando blocos de código como if ou for.
• Hoisting: Variáveis var são "içadas" (hoisted) para o topo do seu escopo. Isso significa que você pode usar a variável antes mesmo de declará-la, mas ela terá o valor undefined (indefinido) até a linha da declaração. Isso pode levar a comportamentos inesperados.
• Pode ser redeclarada: Você pode declarar a mesma variável var várias vezes no mesmo escopo sem gerar erro, o que pode sobrescrever valores acidentalmente.

Exemplo com var:

function exemploVar() {
    console.log(minhaVariavel); // Saída: undefined (devido ao hoisting)

    var minhaVariavel = "Olá, var!";
    console.log(minhaVariavel); // Saída: Olá, var!

    if (true) {
        var minhaVariavel = "Novo valor de var!"; // Redeclaração e reatribuição
        console.log(minhaVariavel); // Saída: Novo valor de var!
    }

    console.log(minhaVariavel); // Saída: Novo valor de var! (o if não criou um novo escopo)
}

exemploVar();
// console.log(minhaVariavel); // Erro: minhaVariavel is not defined (fora do escopo da função)

Recomendação: Evite usar var em códigos novos. Ele é importante para entender códigos legados, mas let e const são escolhas melhores.

2. let (A "moderna" variável mutável)

Introduzida no ES6 (ECMAScript 2015), let veio para resolver os problemas do var. É a escolha preferida para variáveis cujo valor precisa ser alterado ao longo do tempo.

Características principais do let:

• Escopo de bloco: Variáveis declaradas com let têm escopo de bloco. Isso significa que elas são visíveis apenas dentro do bloco de código (delimitado por {}) onde foram declaradas. Isso torna o código mais previsível.
• Não permite redeclaração: Você não pode declarar a mesma variável let duas vezes no mesmo escopo, o que ajuda a evitar erros acidentais.
• Não sofre hoisting da mesma forma que var: Embora seja "içada", ela não é inicializada com undefined. Tentar usar uma variável let antes de sua declaração resultará em um ReferenceError (erro de referência), o que é um comportamento mais seguro.

Exemplo com let:

function exemploLet() {
    // console.log(minhaVariavelLet); // Erro: ReferenceError (não pode ser usada antes da declaração)

    let minhaVariavelLet = "Olá, let!";
    console.log(minhaVariavelLet); // Saída: Olá, let!

    if (true) {
        let minhaVariavelLet = "Valor dentro do if!"; // É uma NOVA variável, só existe dentro deste bloco
        console.log(minhaVariavelLet); // Saída: Valor dentro do if!
    }

    console.log(minhaVariavelLet); // Saída: Olá, let! (a variável do if não afetou esta)
}

exemploLet();

Recomendação: Use let quando souber que o valor da variável precisará ser modificado.

3. const (A "constante" inalterável)

Também introduzida no ES6, const é usada para declarar variáveis cujo valor não deve ser alterado após a atribuição inicial. Pense nelas como "constantes".

Características principais do const:

• Escopo de bloco: Assim como let, const tem escopo de bloco.
• Não permite redeclaração: Não é possível declarar a mesma variável const duas vezes no mesmo escopo.
• Não pode ser reatribuída: Uma vez que você atribui um valor a uma const, você não pode mudar esse valor. Se tentar, receberá um TypeError.
• Deve ser inicializada: Você precisa atribuir um valor à const no momento da declaração. Não pode declará-la "vazia".

Exemplo com const:

function exemploConst() {
    // const PI; // Erro: Missing initializer in const declaration (precisa ser inicializada)

    const PI = 3.14159;
    console.log(PI); // Saída: 3.14159

    // PI = 3.14; // Erro: TypeError: Assignment to constant variable (não pode ser reatribuída)

    if (true) {
        const NOME = "João"; // É uma NOVA constante, só existe dentro deste bloco
        console.log(NOME); // Saída: João
    }

    // console.log(NOME); // Erro: ReferenceError (NOME não existe fora do bloco if)
}

exemploConst();

Importante sobre const e objetos/arrays:

Quando você declara um objeto ou um array com const, você não pode reatribuir a variável para um novo objeto/array. No entanto, você pode modificar as propriedades do objeto ou os elementos do array.

const pessoa = { nome: "Carlos", idade: 30 };
pessoa.idade = 31; // Isso é permitido! Modificamos uma propriedade do objeto.
console.log(pessoa); // Saída: { nome: "Carlos", idade: 31 }

// pessoa = { nome: "Ana", idade: 25 }; // Erro: TypeError (tentando reatribuir a variável pessoa)

const numeros = [1, 2, 3];
numeros.push(4); // Isso é permitido! Adicionamos um elemento ao array.
console.log(numeros); // Saída: [1, 2, 3, 4]

// numeros = [5, 6]; // Erro: TypeError (tentando reatribuir a variável numeros)

Recomendação: Use const por padrão. Se você descobrir que precisa mudar o valor da variável, então mude para let. Isso ajuda a escrever um código mais seguro e previsível.

Resumo: Qual usar e quando?

• const: Use sempre que o valor da variável não for mudar. É a opção mais segura e deve ser sua primeira escolha.
• let: Use quando souber que o valor da variável precisará ser alterado em algum momento.
• var: Evite usar em códigos novos. Mantenha-o em mente apenas para entender códigos mais antigos.

Ao seguir essas diretrizes, seu código JavaScript será mais robusto, previsível e fácil de manter!