Houve um tempo em que eu usava e entendia o uso prático de let, const e var em JavaScript, mas explicá-lo em palavras era um desafio. Se você se encontrar em uma situação semelhante, os pontos-chave a serem focados são as diferenças de escopo, elevação, reinicialização e reatribuição.

Escopo:

• var tem escopo de função ou escopo global se declarado fora de qualquer função.

Exemplo com var (Função e Escopo Global)

function varExample() {
    if (true) {
        var x = 10; // x is function-scoped
    }
    console.log(x); // Outputs: 10
}
varExample();

if (true) {
    var y = 20; // y is globally scoped because it's outside a function
}
console.log(y); // Outputs: 20

• let e const têm escopo de bloco, o que significa que eles só são acessíveis dentro do bloco (delimitado por {}) em que são declarados.

Exemplo com let (escopo do bloco)

function letExample() {
    if (true) {
        let x = 10; // x is block-scoped
        console.log(x); // Outputs: 10
    }
    console.log(x); // ReferenceError: x is not defined
}
letExample();

if (true) {
    let y = 20; // y is block-scoped
    console.log(y); // Outputs: 20
}
console.log(y); // ReferenceError: y is not defined

Exemplo com const (escopo do bloco)

function constExample() {
    if (true) {
        const x = 10; // x is block-scoped
        console.log(x); // Outputs: 10
    }
    console.log(x); // ReferenceError: x is not defined
}
constExample();

if (true) {
    const y = 20; // y is block-scoped
    console.log(y); // Outputs: 20
}
console.log(y); // ReferenceError: y is not defined

Elevação

Içar é como configurar um espaço de trabalho antes de iniciar uma tarefa. Imagine que você está em uma cozinha, preparando-se para preparar uma refeição. Antes de começar a cozinhar, você coloca todos os ingredientes e utensílios no balcão para que estejam ao seu alcance.

Na programação, quando você escreve código, o mecanismo JavaScript passa por seu código antes de realmente executá-lo e configura todas as variáveis ​​e funções no topo de seu escopo. Isso significa que você pode usar funções e variáveis ​​antes de declará-las em seu código.

• Todos os três (var, let e const) são de fato içados. Porém, a diferença está em como eles são inicializados durante o processo de içamento.

• var é içado e inicializado com indefinido.
  

console.log(myVar); // Outputs: undefined
var myVar = 10;

• let e const são içados, mas não inicializados. Isso significa que eles estão em uma “zona morta temporal” desde o início do bloco até que a declaração seja encontrada.

console.log(myLet);
// ReferenceError: Cannot access 'myLet' before initialization
let myLet = 10;

console.log(myConst); 
// ReferenceError: Cannot access 'myConst' before initialization
const myConst = 20;

Reatribuição e reinicialização:

• var pode ser reinicializado (declarado novamente) e reatribuído (atribuído a um novo valor). ### Exemplo com var

var x = 10;
x = 20; // Reassignment
console.log(x); // Outputs: 20

var x = 30; // Reinitialization
console.log(x); // Outputs: 30

• let não pode ser reinicializado dentro do mesmo escopo, mas pode ser reatribuído.

let y = 10;
y = 20; // Reassignment
console.log(y); // Outputs: 20

let y = 30; // SyntaxError: Identifier 'y' has already been declared

• const não pode ser reatribuído; ele deve ser inicializado no momento da declaração. No entanto, se const for um objeto ou array, o conteúdo (propriedades ou elementos) do objeto ou array poderá ser modificado. ### Exemplo com const

const z = 10;
z = 20; // TypeError: Assignment to constant variable.

const z = 30; // SyntaxError: Identifier 'z' has already been declared

Exemplo com objeto const

const obj = { a: 1 };
obj.a = 2; // Allowed, modifies the property
console.log(obj.a); // Outputs: 2

obj = { a: 3 }; // TypeError: Assignment to constant variable.

Exemplo com matriz const

const arr = [1, 2, 3];
arr[0] = 4; // Allowed, modifies the element
console.log(arr); // Outputs: [4, 2, 3]

arr = [5, 6, 7]; // TypeError: Assignment to constant variable.