Il fut un temps où j'utilisais et comprenais l'utilisation pratique de let, const et var en JavaScript, mais l'expliquer avec des mots était un défi. Si vous vous trouvez dans une situation similaire, les points clés sur lesquels vous devez vous concentrer sont les différences de portée, de levage, de réinitialisation et de réaffectation.

Portée :

• var a une portée fonctionnelle ou globale si elle est déclarée en dehors de toute fonction.

Exemple avec var (Fonction et Portée Globale)

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 et const ont une portée de bloc, ce qui signifie qu'ils ne sont accessibles que dans le bloc (délimité par {}) dans lequel ils sont déclarés.

Exemple avec let (Block Scope)

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

Exemple avec const (Block Scope)

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

Levage

Le levage, c'est comme configurer un espace de travail avant de commencer une tâche. Imaginez que vous êtes dans une cuisine et que vous vous préparez à préparer un repas. Avant de commencer à cuisiner, vous placez tous vos ingrédients et ustensiles sur le comptoir afin qu'ils soient à portée de main.

En programmation, lorsque vous écrivez du code, le moteur JavaScript parcourt votre code avant de l'exécuter et configure toutes les variables et fonctions en haut de leur portée. Cela signifie que vous pouvez utiliser des fonctions et des variables avant de les déclarer dans votre code.

• Tous les trois (var, let et const) sont effectivement hissés. Cependant, la différence réside dans la manière dont ils sont initialisés pendant le processus de levage.

• var est hissé et initialisé avec undefined.
  

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

• let et const sont hissés mais pas initialisés. Cela signifie qu'ils sont dans une « zone morte temporelle » depuis le début du bloc jusqu'à ce que la déclaration soit rencontrée.

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

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

Réaffectation et réinitialisation :

• var peut être réinitialisé (déclaré à nouveau) et réaffecté (attribué une nouvelle valeur). ### Exemple avec var

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

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

• let ne peut pas être réinitialisé dans la même portée mais peut être réaffecté.

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

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

• const ne peut pas être réaffecté ; il doit être initialisé au moment de la déclaration. Cependant, si le const est un objet ou un tableau, le contenu (propriétés ou éléments) de l'objet ou du tableau peut être modifié. ### Exemple avec const

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

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

Exemple avec un objet 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.

Exemple avec const Array

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.