Veja no Youtube:

Objetivo

1. Entender o que são variáveis e qual o seu propósito

Bora lá

Para que possamos trabalhar com informações precisamos de um local para armazenar elas e elas podem ser qualquer tipo de informação, quando digo isso quero dizer que pode ser Texto, Números, Objetos, Arrays, Booleanos, vamos falar mais sobre eles depois, mas por enquanto vamos entender como isso funciona.

Basicamente temos 3 formas de declarar (criar) uma variável, elas podem conter a nomenclatura de var, const ou let.

Vamos entender o que ela tem a nos oferecer.

Formas de declarar

Var

Usamos para declarar uma variável, opcionalmente, inicializando-a com um valor a qual pode ser reescrita, por exemplo:

var nome = "Diego" // Declarando a variável

console.log(nome)

var nome = "Telles" // Recriando a variável

console.log(nome)

nome = "Diego Telles" // Reatribuindo valor

console.log(nome)

// Output:
// Diego
// Telles
// Diego Telles

No exemplo acima o que eu fiz foi basicamente criar uma variável contendo o meu nome e em seguida usei a mesma variável para editar e colocar meu sobrenome.

Let

Uma variável declarada como let leva em conta, não a função onde foi criada, mas sim o bloco de código de sua origem. Isso significa que se a declararmos dentro de um if(), switch() ou for(), ela será “enxergada” apenas dentro desta parte do código, dentro deste escopo específico (Bloco de código).

function getNome() {

    let nome = 'Diego';

    if (nome === 'Diego') {
        let nome = 'Diego Telles';

        console.log('Dentro do if: ' + nome);
    }
    console.log('Fora do if: ' + nome);
}

getNome()

// Output:
// Dentro do if: Diego Telles
// Fora do if: Diego

Nesse trecho de código eu declarei duas variáveis com a mesma nomenclatura "nome" porém com uma diferença, uma delas está fora do if() e a outra está dentro.

Quando pedimos para executar nossa função ela imprime valores diferentes por estarem em escopos diferentes, blocos de código, a partir disso temos duas saídas diferentes com variáveis de mesmo nome.

Const

Atualmente o grande sucessor do uso do var em nossas aplicações, ela é usada para criar variáveis constantes que não podem ser sobrescritas.

Embora o let garanta o escopo, ainda assim, existe a possibilidade de declararmos uma variável com let e ela ser undefined. Por exemplo:

let nome;
console.log(nome)

// Output: undefined

Para evitar que esse problema de acabar declarando uma variável sem um valor atribuído aconteça usamos a const pois ela exige para que seja criada um valor para ela trazendo o seguinte erro SyntaxError: Missing initializer in const declaration.

Mas agora vamos ao cenário onde eu declarei uma const e em seguida eu quero mudar o valor dela declarando ela novamente e passando um novo valor, vamos ver o que acontece:

const nome = "Diego"

console.log(nome)

const nome = "Telles"

console.log(nome)

//Output:
// const nome = "Telles"
//     ^
// SyntaxError: Identifier 'nome' has already been declared

Feito isso ela nos retorna que nome já foi declarado e não permite que seja criado novamente, mas se quisermos reatribuir um valor para ela será que funciona?

const nome = "Diego"

console.log(nome)

nome = "Telles"

console.log(nome)

//Output:
// Diego
// TypeError: Assignment to constant variable.

Ela também não permite e o erro agora é Atribuição a variável constante **e traz somente o valor do primeiro console.log() causando um erro na hora de reatribuir e parando a execução do script

Conclusão

Podemos trabalhar com tipos diferentes de variáveis porem sempre se atente no objetivo de cada uma delas para sua aplicação e após o lançamento do let no ECMAScript6 o uso do var foi substituído por const ou let por motivos de segurança em recriação ou reatribuição de valores por engano.