Angular. Ferdinand Malcher

       4.2Variablen: const, let und var

      Ursprünglich wurden Variablen in JavaScript mit dem Schlüsselwort var eingeleitet. Das funktioniert noch immer, allerdings kamen mit ECMAScript 2015 die neuen Variablenarten let und const hinzu.

       Die schmerzhafte var-heit

      Mit dem Schlüsselwort var eingeleitete Variablen sind jeweils in der Funktion gültig, in der sie auch deklariert wurden – und zwar überall. Variablen mit var »fressen« sich durch alle Blöcke hindurch und sind in der gesamten Funktion und in allen darin verschachtelten Blöcken und Funktionen verfügbar. Das folgende Codebeispiel zeigt zwei Implementierungen, die zum exakt selben Ergebnis führen:

      function foobar(foo) {

      if (foo) {

      var bar = 'angular';

      }

       // bar = 'angular'

      };

      function foobar(foo) {

       var bar;

      if (foo) {

      bar = 'angular';

      }

       // bar = 'angular'

      };

      Es ist egal, ob wir die Variable innerhalb der if-Verzweigung deklarieren oder außerhalb – sie ist überall gültig. Diese Eigenschaft führt in der Praxis schnell zu Kollisionen von Variablen aus verschiedenen Programmteilen. Um das zu verhindern, wurde häufig auf ein Hilfskonstrukt zurückgegriffen: Der Code wird in eine Funktion gekapselt, die sofort ausgeführt wird, eine sogenannte Immediately-Invoked Function Expression (IIFE). Tatsächlich ist dieser Weg alles andere als schön – war aber lange die »schmerzhafte var-heit« im Alltag der Webentwicklung.

       Blockgebundene Variablen mit let

      Mit Einführung von ECMAScript 2015 hielt der Variablentyp let Einzug in die Webentwicklung. Mit let lassen sich blockgebundene Variablen definieren. Sie sind nicht in der gesamten Funktion gültig, sondern lediglich innerhalb des Blocks, in dem sie definiert wurden. Im nachfolgenden Beispiel ist also die Variable i nur innerhalb der for-Schleife gültig – so wie man es von einer Variable auch erwarten mag:

      for (let i = 0; i < 4; i++) {

       // ...

      }

       // i = undefined

       Konstanten mit const

      Variablen, die mit var oder let eingeleitet werden, lassen sich jederzeit überschreiben. Häufig ändert sich der Wert einer Variable allerdings nach der Initialisierung nicht mehr. Für solche Fälle gibt es Konstanten. Sie werden mit dem Schlüsselwort const eingeleitet. Wird eine Konstante einmal festgelegt, so lässt sich der Wert nicht mehr überschreiben. Konstanten müssen deshalb auch immer sofort mit einem Wert initialisiert werden:

      const foo = 'angular';

      // TypeError: Assignment to constant variable.

      foo = 'javascript';

       // SyntaxError: Missing initializer in const declaration

      const bar;

      Vorsicht ist allerdings geboten bei Variablen, die ein Objekt oder Array enthalten. Objekte und Arrays werden in JavaScript nur anhand ihrer Speicherreferenz identifiziert. Das bedeutet, dass eine const-Variable nur die Referenz auf das Objekt konstant speichert, wir den Inhalt aber trotzdem verändern können. Der folgende Code ist gültig:

      const myObject = { title: 'Angular', year: 2016 };

      myObject.year = 2020;

      const myArray = [1, 2, 3];

      myArray.push(4);

      Um gut wartbaren Code zu erhalten, sollten Sie vermeiden, direkt den Wert eines Objekts zu verändern. Ein saubererer Weg ist es, ein Objekt oder Array als unveränderlich (engl. immutable) zu behandeln und bei einer Änderung immer eine Kopie zu erzeugen. Darauf gehen wir gleich im Kontext des Spread-Operators genauer ein.

       const, let, var – wann nutze ich welche?

      Mit drei verschiedenen Variablenarten stellt sich schnell die Frage, wann welche Art eingesetzt werden sollte. Als Faustregel können Sie sich daher Folgendes merken: