Hubo un momento en el que usé y entendí el uso práctico de let, const y var en JavaScript, pero explicarlo con palabras fue un desafío. Si se encuentra en una situación similar, los puntos clave en los que debe centrarse son las diferencias de alcance, elevación, reinicialización y reasignación.

Alcance:

• var tiene un alcance funcional o global si se declara fuera de cualquier función.

Ejemplo con var (Función y Alcance 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 y const tienen un alcance de bloque, lo que significa que solo se puede acceder a ellos dentro del bloque (delimitado por {}) en el que están declarados.

Ejemplo con let (alcance del bloque)

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

Ejemplo con const (alcance del bloque)

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

Izado

Izar es como configurar un espacio de trabajo antes de comenzar una tarea. Imagina que estás en la cocina, preparándote para cocinar. Antes de comenzar a cocinar, coloca todos los ingredientes y herramientas en la encimera para que estén a su alcance.

En programación, cuando escribes código, el motor JavaScript revisa tu código antes de ejecutarlo y configura todas las variables y funciones en la parte superior de su alcance. Esto significa que puedes usar funciones y variables antes de declararlas en tu código.

• Los tres (var, let y const) están efectivamente izados. Sin embargo, la diferencia radica en cómo se inicializan durante el proceso de elevación.

• var se eleva e inicializa con indefinido.
  

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

• let y const se elevan pero no se inicializan. Esto significa que están en una "zona muerta temporal" desde el inicio del bloque hasta que se encuentra la declaración.

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

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

Reasignación y reinicialización:

• var se puede reinicializar (declarar nuevamente) y reasignar (asignar un nuevo valor). ### Ejemplo con var

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

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

• let no se puede reinicializar dentro del mismo alcance, pero se puede reasignar.

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

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

• const no se puede reasignar; debe inicializarse en el momento de la declaración. Sin embargo, si la constante es un objeto o matriz, el contenido (propiedades o elementos) del objeto o matriz se puede modificar. ### Ejemplo con constante

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

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

Ejemplo con objeto constante

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.

Ejemplo con matriz constante

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.