Diferenças entre var, let e const no Javascript

Diferenças entre var, let e const no Javascript
Photo by Nate Grant / Unsplash

Declarar variáveis é algo muito simples e provavelmente uma das primeiras coisas que você aprendeu ou vai aprender enquanto estuda programação. No Javascript existem três formas de declarar uma variável e é muito importante entender o funcionamento de cada uma para evitar bugs e ainda incrementar o desempenho do seu sistema.

Resumidamente, uma variável é um endereço na memória do computador que guarda um determinado valor. No Javascript a forma como elas são declaradas irá determinar como ela será manipulada pela aplicação e onde ela ficará acessível. Normalmente são associadas a identificadores, que seguem algumas regras simples, o identificadores devem ser únicos, não podem iniciar com números, não podem conter caracteres especiais, com exceção de "_" e não devem conter nenhum tipo de acentuação gráfica.

Vale lembrar também que é uma boa prática escolher nomes que descrevem o conteúdo da variável, mesmo que os nomes sejam longos, afinal  a função autocomplete do seu editor serve para isso. Evite abreviações pois isso facilitará muito o entendimento do seu código.

Var

A principal diferença entre o tipo var e os outros dois é o seu escopo, ou seja o contexto em que a variável estará ou não acessível, seu escopo é global, isso quer dizer que ao declarar uma variável do tipo var seu conteúdo poderá ser acessado de qualquer lugar dentro do código e poderá ser alterado em tempo de execução. Por  esse motivo são poucos os casos onde seu uso é recomendado, pois este comportamento pode trazer efeitos colaterais indesejados.

var name = 'update sem where';
var user;

if (true) {
    console.log(name);
    // irá exibir update sem where no console
    
    user = 'matheus';
    console.log(user);
    // irá exibir matheus no console
    
    user = 'maria';
    console.log(user);
    // irá exibir maria no console
}

Devido ao seu escopo, a  variável estará acessível mesmo se a for declarada dentro de um bloco.

function getName() {
    var name = 'update sem where';
}

console.log(name);
// irá exibir update sem where no console

Let

Declara uma variável local no contexto do bloco atual, podendo ser inicializada com ou sem um valor. O escopo de uma variável do tipo let é o oposto de uma do tipo var, pois ela só poderá ser acessada dentro do seu próprio contexto.

No Javascript blocos internos das funções não têm escopo, apenas funções, por isso uma variável declarada dentro de um uma estrutura condicional ou de repetição ficará acessível em qualquer parte da função ou do script, caso não esteja dentro de uma função.

function getName() {
    if (true) {
        let name = 'update sem where';
    }
    console.log(name);
    // irá exibir update sem where no console
}

console.log(name);
// irá exibir undefined no console

Este comportamento se chama hoisting, é como se todas as declarações de variáveis e funções fossem movidas para o início do código antes que algum trecho seja executado. Mas na realidade, elas são colocadas em memória durante a fase de compilação.

Esta peculiaridade do Javascript permite que utilizemos variáveis e funções antes mesmo de serem declaradas sem que ocorram erros. Vale lembrar que apenas as declarações serão elevadas, então se ela for utilizada antes da sua inicialização o valor ainda será undefined.

É uma boa prática declarar todas as suas variáveis no início do arquivo ou da função, mesmo que isso não seja obrigatório para os tipos var e let, porém, variáveis não declaradas só passarão a existir dentro da aplicação quando um valor for atribuído a elas, e atribuir valor a uma variável que não  foi inicializada fará que ela faça parte do objeto global window;

Const

Como o nome sugere, a declaração const cria uma referência a um valor fixo, por isso não permite inicialização sem um valor. Isso não significa que esse valor é imutável, apenas que o identificador da constante não pode ser alterado. Se o conteúdo do identificador for um objeto, isso significa que o conteúdo do objeto poderá ser alterado.

    const example = {};
    // Atribuir o valor inicial da constante
    
    example = [];
    // Tentar alterar seu valor irá gerar um erro
    
     const person = {
        name: "Matheus",
        age: 22,
        gender: "M"
    }
    
    person.age = 23;
    
    console.log(person);
    // Irá exibir { name: "Matheus", age: 23, gender: "M" } no console

Em alguns casos é recomendado que se utilize o nome da constante em letras maiúsculas e no padrão snake case onde as palavras são separadas por "_", vale lembrar que isto é uma convenção, ou seja, não é obrigatório e não irá gerar erros mas é visto como uma boa prática para facilitar a leitura do seu código.

    const MY_CONST = 3.14;
    // Exemplo de variável no padrão snake case
    
    const ANOTHER_CONST;
    // Irá gerar um erro por não ter sido inicializada

Espero que eu tenha conseguido explicar sobre as principais características de cada tipo de declaração, de qualquer forma vou deixar um breve resumo para facilitar o entendimento e até servir para consultas futuras.

Fonte: http://www.constletvar.com/