Variablendeklaration in JavaScript: let und const erklärt

In diesem Tutorial beschäftigen wir uns mit den verschiedenen Methoden zur Variablendeklaration in JavaScript, insbesondere mit den Schlüsselwörtern let und const des ES6-Standards im Vergleich zu var, das bis ES5 die einzige Möglichkeit darstellte, Variablen zu erstellen. Viele Entwickler haben bei der Verwendung von var auf unerwartete Verhaltensweisen gestoßen, die zu Bugs führten. Diese Lektion wird dir helfen, die modernen Methoden zu verstehen und sicherzustellen, dass du Variablen effektiv deklariert und verwendest.

Wichtigste Erkenntnisse

Die neuen Variablendeklarationen let und const bieten Vorteile in Bezug auf den Scope, die Sichtbarkeit und die Sicherheit der Variablennutzung. let erlaubt die Verwendung einer Variablen innerhalb eines Blockscopes, während const eine unveränderliche Zuordnung erzeugt.

Schritt-für-Schritt-Anleitung

Deklaration von Variablen

Um effektiv mit Variablen in JavaScript zu arbeiten, werden wir zuerst die Deklaration von Variablen mithilfe von var, let und const untersuchen. Beginnen wir mit der Datei main.js, die in deinem HTML-Dokument eingebunden ist.

Hier werden wir das Schlüsselwort var nutzen, um eine Variable zu deklarieren. Lass uns eine Variable mit dem Namen W erstellen und einen Initialwert zuweisen.

Verhalten von var

Ein typisches Verhalten von var ist, dass die Variable auch dann sichtbar ist, wenn du sie erst später im Code initialisierst. Lass uns das testen:

Ich werde eine Konsolenausgabe von C vor der Initialisierung anbringen. Erwarte das Ergebnis, wenn ich die Variable C auf 0 setze. In der Ausgabe sollte undefined erscheinen, da der Wert erst nach der Zeile der Zuweisung gesetzt wird.

Einführung von let

Jetzt schauen wir uns let an. Um den Unterschied zu zeigen, ersetze var durch let und initialisiere die Variable C gleich mit let C = 0.

Wenn ich versuche, C vor der Zuweisung zu verwenden, erhalte ich eine Fehlermeldung, dass ich auf eine nicht initialisierte Variable zugreife. Dieses Verhalten sorgt dafür, dass du immer einen Fehler bekommst, wenn du versuchst, auf eine nicht definierte Variable zuzugreifen.

Blockscope mit let

Ein weiterer Vorteil von let ist die Möglichkeit, eine Variable innerhalb eines Blockscopes zu deklarieren. Lass uns dafür ein if-Statement verwenden:

Wenn ich let C = -1 innerhalb des if-Blocks erzeuge, ist diese Variable nur innerhalb dieses Blockscopes sichtbar. Wenn ich versuche, C außerhalb des Blockes zu verwenden, erhalte ich einen Fehler.

Verwendung von const

Nächster Schritt ist die Verwendung von const. Wenn ich const anstelle von let verwenden würde, würde ich eine konstante Variable erzeugen, die nicht mehr verändert werden kann.

Wenn ich versuche, C nach der Zuweisung const C = 0 erneut zuzuweisen, wird mir angezeigt, dass ich nicht einer konstanten Variable einen neuen Wert zuweisen kann.

Unveränderliche Objekte mit const

Wenn wir const verwenden, um ein Objekt zu deklarieren, lässt sich das Objekt selbst weiterhin ändern, allerdings nicht die Referenz. Ich kann dem Objekt Elemente hinzufügen, ohne weitere Probleme.

Best Practices für die Verwendung von let und const

Basierend auf meiner Erfahrung empfehle ich, standardmäßig const zu verwenden, es sei denn, du bist dir sicher, dass der Wert der Variable später geändert werden muss. Diese Praxis führt zu besser lesbarem und wartbarem Code.

Verwende let, wenn es nötig ist, den Wert innerhalb eines Blockscopes zu ändern. Ein Beispiel könnte eine Zählvariable in einer Schleife sein.

Zusammenfassung – Variablendeklaration in JavaScript: let und const versus var

Zusammenfassend haben wir die Unterschiede zwischen var, let und const untersucht. let und const bieten wesentliche Verbesserungen in Bezug auf den Scope sowie die Sicherheit der Variablen. Während var global oder funktionslocal ist, gewährleisten let und const die Sichtbarkeit innerhalb eines Blockscopes. Zudem sorgt const für die Unveränderlichkeit der Zuweisung, was Bugs und unerwartetes Verhalten im Code reduziert.