Was ist der Unterschied zwischen var, let und const?

var hat einen Funktionsbereich, während let und const einen Blockbereich haben. var kann neu deklariert und neu zugewiesen werden, let kann neu zugewiesen, aber nicht im selben Geltungsbereich neu deklariert werden, und const kann weder neu deklariert noch neu zugewiesen werden. Mit var deklarierte Variablen werden gehoben (hoisting) mit einer Initialisierung auf undefined, während let und const ebenfalls gehoben werden, aber in der "temporären toten Zone" verbleiben, bis sie initialisiert werden.

// var hat Funktionsbereich
function beispielVar() {
  if (true) {
    var x = 10;
    console.log(x); // 10
  }
  console.log(x); // 10 (x ist hier sichtbar)
}

// let und const haben Blockbereich
function beispielLetConst() {
  if (true) {
    let y = 20;
    const z = 30;
    console.log(y); // 20
    console.log(z); // 30
  }
  // console.log(y); // Fehler ReferenceError: y ist nicht definiert
  // console.log(z); // Fehler ReferenceError: z ist nicht definiert
}

// var kann neu deklariert und neu zugewiesen werden
var a = 1;
var a = 2; // Neue Deklaration
a = 3; // Neue Zuweisung
console.log(a); // 3

// let kann neu zugewiesen, aber nicht im selben Geltungsbereich neu deklariert werden
let b = 4;
// let b = 5; // Fehler SyntaxError: Bezeichner 'b' wurde bereits deklariert
b = 6; // Neue Zuweisung
console.log(b); // 6

// const kann weder neu zugewiesen noch neu deklariert werden
const c = 7;
// const c = 8; // Fehler SyntaxError: Bezeichner 'c' wurde bereits deklariert
// c = 9; // Fehler TypeError: Zuweisung an Konstante.
console.log(c); // 7 (bei primitiven Typen)

// Hoisting
console.log(hoistedVar); // undefined (var wurde gehoben und auf undefined initialisiert)
var hoistedVar = "Ich bin var";

// console.log(hoistedLet); // Fehler ReferenceError: Zugriff auf 'hoistedLet' vor Initialisierung nicht möglich
// let hoistedLet = "Ich bin let"; // In der temporären toten Zone

Die wichtigsten Unterschiede sind in der Tabelle zusammengefasst:

Eigenschaft	var	let	const
Geltungsbereich	Funktional	Block	Block
Neue Deklaration	Ja	Nein (im selben Geltungsbereich)	Nein
Neue Zuweisung	Ja	Ja	Nein (bei primitiven Typen)
Hoisting	Ja (mit undefined)	Ja (temporale tote Zone)	Ja (temporale tote Zone)
Frühe Initialisierung	Keine Initialisierung erforderlich	Keine Initialisierung erforderlich	Initialisierung erforderlich

Es ist wichtig zu beachten, dass für Objekte und Arrays, die mit const deklariert sind, die Variable selbst nicht auf ein anderes Objekt/Array umgeschrieben werden kann, aber der Inhalt des Objekts/Arrays verändert werden kann.

const meinObjekt = { key: 'value' };
// meinObjekt = { newKey: 'newValue' }; // Fehler TypeError: Zuweisung an Konstante.
meinObjekt.key = 'newValue'; // Möglich
console.log(meinObjekt); // { key: 'newValue' }

const meinArray = [1, 2];
// meinArray = [3, 4]; // Fehler TypeError: Zuweisung an Konstante.
meinArray.push(3); // Möglich
console.log(meinArray); // [ 1, 2, 3 ]