Duvida

Bom dia, Stephany! Tudo bem?

Vou tentar ser bem objetivo ao responder essa pergunta, pois elas se entrelaçam. Caso, ainda fique dúvidas não hesite em me responder e eu voltarei aqui no tópico.

Resposta:

'let' e 'var' são palavras-chave usadas para declarar variáveis, mas elas têm diferenças importantes no que diz respeito ao escopo (Que pode ser Local ou Global).

**1.1:Comportamento Dentro de uma função: **

Quando temos essa variável dentro de uma função ela terá um escopo de função, ou seja, independente do bloco em que ela estiver ela existe no escopo global da função. Uma vez que eu declaro a variável 'var' dentro de uma função ela existe para todos!

Ex: Aqui você pode perceber que eu declarei ela dentro do If, contudo ela fora do if também existe. Isso é um pouco do Escopo Global, ele tem uma atuação global dentro da função.

function exemploVar() {
    if (true) {
        var x = 10;
        console.log(x);  // 10
    }
    console.log(x);  // 10
}

1.2:Comportamento Dentro de uma função: ** (Se a varivável declarada como 'var' for declarada fora de uma função, ela realmente terá um escopo global, ou seja, independente do bloco ela será conhecida pelo código)

Para te explicar melhor isso: é importante falar que a declaração var sofre com o comportamento do "hoisting" do Java Script e é crucial entender como funciona esse "hoisting" (Não se assusta, é fácil!)

Hoisting: Hoisting é um comportamento em JavaScript em que declarações de variáveis e funções são movidas para o topo de seus escopos durante a fase de compilação. Isso significa que você pode usar uma variável ou função antes de declará-la no código, apesar de a declaração real estar posterior no código fonte.

Como você escreve o código:

console.log(x);  // Undefined
var x = 5;
console.log(x);  // 5

Como o JS se comportou:

var x;  // Declaração é elevada para o topo
console.log(x);  // Undefined
x = 5;  // Atribuição permanece no mesmo lugar
console.log(x);  // 5 

Ou seja, essa questão do hoisting causa uma pequena imprevisibilidade no código, pois mesmo você ter declardo que x=5, o Java Script compilou o 5 antes de tudo e ele até ser declarado, era uma variável existente, contudo, undefined. Gerou um comportamento que você não queria.

2. 'let':

2.1:Comportamento Dentro de uma função:

Variáveis declaradas com let têm escopo de bloco, sendo visíveis apenas dentro do bloco em que são declaradas. Ou seja, caso você declare a variável let dentro de um bloco if, ela só existirá naquele bloco.

function exemploLet() {
    if (true) {
        let y = 20;
        console.log(y);  // 20
    }
    console.log(y);  // Erro: y não está definido neste ponto
}

2.2:Comportamento fora de uma função:

O let não sofre o problema do "hoisting" da mesma forma que o var. A variável let não é elevada para o topo do bloco, e acessar uma variável let antes de sua declaração resultará em um erro. (PREVISIBILIDADE AO CÓDIGO)

console.log(x);  // Erro: x não está definido neste ponto
let x = 10;
console.log(x);  // 10

Stephany, espero que você tenha entendido os conceitos. e como falei anteriormente, fico a disposição para trocarmos mais ideias!