JavaScript — var vs. let

Die Veröffentlichung von ECMAScript 2015 (ES6) liegt nun zwar schon einige Jahre zurück, trotzdem sieht man noch sehr häufig, dass beim Schreiben von JavaScript-Code Variablen duchgängig mit dem Schlüsselwort var definiert werden. Das ist nun nicht grundsätzlich falsch, aber mit den uns aktuell zur Verfügung stehenden Mitteln nicht ganz optimal.

Ich möchte dies an einem einfachen Beispiel zeigen.

<script>
  for (var i = 0; i < 10; i++) {
    console.log(`In der Schleife: ${i}`);
  }
  console.log(`Nach der Schleife: ${i}`);
</script>

Die Ausgabe dieses JavaScript-Codes in der Console schaut so aus:

In der Schleife: 0
In der Schleife: 1
In der Schleife: 2
In der Schleife: 3
In der Schleife: 4
In der Schleife: 5
In der Schleife: 6
In der Schleife: 7
In der Schleife: 8
In der Schleife: 9
Nach der Schleife: 10

Die für den Schleifendurchlauf mit var definierte Zählervariable i ist in diesem Beispiel innerhalb der Schleife und auch noch danach verfügbar. Doch da die Variable nur für den Schleifendurchlauf benötigt wird und danach nicht mehr, kann man durch die Verwendung des Schlüsselwortes let statt var dieses Beispiel etwas sauberer schreiben.

<script>
  for (let i = 0; i < 10; i++) {
    console.log(`In der Schleife: ${i}`);
  }
  console.log(`Nach der Schleife: ${i}`);
</script>

Die Ausgabe dieses verbesserten JavaScript-Codes schaut in der Console nun so aus:

In der Schleife: 0
In der Schleife: 1
In der Schleife: 2
In der Schleife: 3
In der Schleife: 4
In der Schleife: 5
In der Schleife: 6
In der Schleife: 7
In der Schleife: 8
In der Schleife: 9
Uncaught ReferenceError: i is not defined

Wie man an der letzten Zeile der Ausgabe sieht, ist die Variable i nach der Schleife nicht mehr vorhanden. Dies liegt daran, da sie nur für den Geltungsbereich (scope) der Schleife definiert wurde. Somit bleibt die Variable dort wo so hingehört — in der Schleife.