Variablen deklarieren mit let und const in JavaScript

/ JavaScript Basics / Von

JavaScript hat in den letzten Jahren eine beeindruckende Entwicklung durchgemacht. Mit der Einführung von ES6 (ECMAScript 2015) wurden neue Möglichkeiten zur Variablendeklaration geschaffen, die die Art und Weise, wie wir JavaScript-Code schreiben, grundlegend verändert haben. In diesem Beitrag wollen wir uns genauer mit let und const beschäftigen und herausfinden, warum diese Schlüsselwörter das alte var in den Schatten stellen und eigentlich überflüssig machen.

Das Ende von var: Willkommen let und const

Bevor wir uns mit den neuen Schlüsselwörtern beschäftigen, werfen wir einen kurzen Blick auf var. Variablen, die mit var deklariert wurden, haben einen sogenannten Funktionsscope. Das bedeutet, dass sie innerhalb der gesamten Funktion sichtbar sind, in der sie deklariert wurden, unabhängig davon, wo in der Funktion sie tatsächlich verwendet werden. Dies bedeutet auch, dass die Variable, die mit var deklariert wurde, auch schon vor der Deklaration verwendet werden kann, in diesem Fall ist sie einfach nur undefined, aber ein Zugriff verursacht keine Exception.

Dieses Verhalten hat oft zu unbeabsichtigten Seiteneffekten und Fehlern geführt. Um diese Probleme zu beheben, wurden let und const eingeführt.

let: Die flexible Variable

Mit let deklarierte Variablen haben einen Blockscope. Das heißt, sie sind nur innerhalb des Blocks (z.B. einer if-Anweisung, einer for-Schleife, einer Funktion oder einfach nur geschweiften Klammern) sichtbar, in dem sie deklariert wurden. Dies verhindert Probleme, die mit var verbunden sind.

  • Scope-Leak: let- und const-Variablen haben Block-Scope und sind nur im Block, in dem sie deklariert sind, gültig.
  • Hoisting: let-Variablen werden nicht gehostet. Das bedeutet, dass sie erst ab dem Zeitpunkt ihrer Deklaration im Code zugänglich sind.

JavaScript

if (true) {
    let x = 10;
    console.log(x); // 10
}
console.log(x); // ReferenceError: x is not defined

Würde x mit var deklariert sein, gäbe es keinen Fehler und die Ausgabe wäre zweimal 10.

const: Die unveränderliche Konstante

const-Variablen sind, wie der Name schon sagt, konstant. Sie können nach ihrer Initialisierung nicht mehr neu zugewiesen werden.

  • Unveränderlichkeit: Der Wert einer const-Variable bleibt über den gesamten Lebenszyklus erhalten.
  • Referenztyp: Bei Objekten und Arrays bezieht sich die Unveränderlichkeit auf die Referenz. Das bedeutet, dass du die Eigenschaften eines Objekts oder die Elemente eines Arrays ändern kannst, aber nicht die Referenz selbst.

JavaScript

const PI = 3.14159;
// PI = 3.14; // TypeError: Assignment to constant variable.

const person = { name: 'Max' };
person.name = 'Peter'; // erlaubt
person = { age: 30 }; // TypeError: Assignment to constant variable.

Wann welches Schlüsselwort verwenden?

  • const: Immer dann, wenn du einen Wert definierst, der sich im Laufe des Programms nicht ändern soll (z.B. Konstanten wie PI, aber auch Rückgabewerte von Funktionen oder Objekt- und Array-Variablen, die nicht auf ein neues Objekt/Array gesetzt werden).
  • let: Für Variablen, deren Wert sich ändern kann, aber innerhalb eines bestimmten Blocks definiert sein soll.

Best Practices

  • Bevorzuge const: Immer wenn möglich, solltest du const verwenden, um unbeabsichtigte Änderungen zu verhindern. Die JS-Runtime kann außerdem Optimierungen leichter vornehmen, da bekannt ist, dass sich Wert und Typ nicht ändern können.
  • Veränderbar als Ausnahme: Nur wenn der Wert bzw. die Referenz sich wirklich ändern können muss, sollte let verwendet werden.
  • Vermeide var: In modernen JavaScript-Projekten sollte var grundsätzlich vermieden werden.

Fazit

let und const sind mächtige Werkzeuge, die die Art und Weise, wie wir JavaScript-Code schreiben, grundlegend verbessert haben. Durch die Einführung von Blockscope und Unveränderlichkeit führen sie zu saubererem, sichererem und weniger fehleranfälligem Code.

Schau Dir die genaue Dokumentation zu let und const in der MDN an: https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Statements/let