Es gab eine Zeit, in der ich die praktische Verwendung von let, const und var in JavaScript verwendet und verstanden habe, aber es war eine Herausforderung, sie in Worten zu erklären. Wenn Sie sich in einer ähnlichen Situation befinden, sollten Sie sich vor allem auf die Unterschiede in Umfang, Hebung, Neuinitialisierung und Neuzuweisung konzentrieren.

Scoping:

• Var ist funktionsbezogen oder global, wenn sie außerhalb einer Funktion deklariert wird.

Beispiel mit var (Funktion und globaler Geltungsbereich)

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 und const sind blockbezogen, was bedeutet, dass sie nur innerhalb des Blocks (getrennt durch {}) zugänglich sind, in dem sie deklariert sind.

Beispiel mit 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

Beispiel mit 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

Heben

Heben ist wie das Einrichten eines Arbeitsbereichs, bevor Sie mit einer Aufgabe beginnen. Stellen Sie sich vor, Sie stehen in der Küche und bereiten die Zubereitung einer Mahlzeit vor. Bevor Sie mit dem Kochen beginnen, legen Sie alle Zutaten und Werkzeuge auf die Arbeitsfläche, damit sie griffbereit sind.

Wenn Sie beim Programmieren Code schreiben, geht die JavaScript-Engine Ihren Code durch, bevor sie ihn tatsächlich ausführt, und richtet alle Variablen und Funktionen an der Spitze ihres Gültigkeitsbereichs ein. Das bedeutet, dass Sie Funktionen und Variablen verwenden können, bevor Sie sie in Ihrem Code deklariert haben.

• Alle drei (var, let und const) werden tatsächlich gehisst. Der Unterschied liegt jedoch darin, wie sie während des Hebevorgangs initialisiert werden.

• var wird gehisst und mit undefiniert initialisiert.
  

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

• let und const werden angehoben, aber nicht initialisiert. Dies bedeutet, dass sie sich vom Beginn des Blocks bis zum Auftreten der Deklaration in einer „zeitlichen Totzone“ befinden.

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

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

Neuzuweisung und Neuinitialisierung:

• var kann neu initialisiert (erneut deklariert) und neu zugewiesen (ein neuer Wert zugewiesen) werden. ### Beispiel mit var

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

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

• let kann nicht innerhalb desselben Bereichs neu initialisiert, aber neu zugewiesen werden.

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

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

• const kann nicht neu zugewiesen werden; Es muss zum Zeitpunkt der Deklaration initialisiert werden. Wenn die Konstante jedoch ein Objekt oder Array ist, können die Inhalte (Eigenschaften oder Elemente) des Objekts oder Arrays geändert werden. ### Beispiel mit const

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

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

Beispiel mit const-Objekt

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.

Beispiel mit 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.