Javascript Variablen mit let

const oder let für die Deklaration von Variablen?

Für die Deklaration von Variablen stellt JavaScript zwei Optionen, nämlich let und const zur Verfügung. const steht dabei für »unveränderliche Variable«. Für den Anfang erscheint const wenig intuitiv, denn Variablen sind ja der Platzhalter für variable Werte.

const wird für unveränderliche Variablen eingesetzt. Klar und einfach ist z.B.

const PI = 3.14159;

Der Wert primitiver Datentypen mit const (number, string und boolean) kann nach der Deklaration nicht geändert werden, aber die Eigenschaften von Objekten und auch von Arrays sehr wohl. Referenzen / Verweise auf Arrays, Listen und Objekte werden meist mit const als unveränderliche Variable angelegt, auch wenn sich einzelne Werte im Array ändern können.

const arr = ["🍒", "🍋", "🍓", "🍑"];
arr.push("🍍");

const fruits = document.querySelectorAll("img");
for (let i=0; i<fruits.length; i++) {
	fruits[i].classList.add("foo");
}

Die Deklaration von Variablen als const bringt ein Stückchen zusätzlicher Sicherheit: Was mit const festgelegt wurde, liefert einen Syntaxfehler, wenn die Variable versehentlich neu initialisiert – überschrieben – wird. Und das passiert gerade bei Arrays, NodeLists und Objekten schnell, insbesondere, wenn Scripte von Dritten z.B. aus Plugins hinzukommen.

const cat = {
   farbe: "black",
   rasse: "Kartäuser",
   alter: 4
}

cat.farbe = "beige";

// Neue Eigenschaften können hinzugefügt werden
cat.owner = "Emma";

cat = {
	farbe: "rot",
	rasse: "Hauskatze",
	alter: 2
}

Aber der Versuch, der Variablen cat ein neues Objekt zuzuweisen, endet mit einem Syntaxfehler.

cat = {		// TypeError: Attempted to assign to readonly property.
	farbe: "rot",
	rasse: "Hauskatze",
	alter: 2
}

Wann werden Variablen vorzugsweise mit const deklariert?

Variablendeklarationen mit let sind omnipräsent, weil sie in Schleifen, Iterationen und Funktion als Variablen gebraucht werden. Natürlich ist es am Anfang auch einfacher, mit let zu arbeiten, weil let flexibler ist und sowohl für variable als auch für unveränderliche Variablen funktioniert.

let x = 1; 
while (x < 5) {
	…
    x = x + 1;
}

for (let i=0; i<fotos.length; i++ ) {
	fotos[i].className.add("poster");
}

Bei den wichtigen Datenstrukturen des Scripts sollte man so oft wie möglich const verwendet werden.

const arr = ["Blaubeeren", "Himbeeren", "", "Holunderbeeren"];
for (const elem of arr) {
	console.log (elem);
}

Bei jeder Vereinbarung einer Variable sollte man sich fragen, ob sich der Wert der Variablen ändern wird: Wenn nicht, ist const angebracht. let wird nur bei Bedarf verwendet: in Schleifen, bei Zählern oder temporäre Flags. const schützt vor unbeabsichtigtem Überschreiben, so dass viele Fehler vermieden werden.

Block-Scope

Scope ist die Bezeichnung für die Umgebung, in der eine Variable gilt. Vor ES6 bildeten Javascript-Funktionen den einzigen Scope. Darum sehen wir rund um den Quelltext von Libraries – z.B. jQuery – Self Executing Functions oder selbst ausführenden Funktionen.

(function () {
	// script code
} () );

Mit ECMAScript 6 sind Variablen, die mit let oder const definiert wurden, nur innerhalb ihres Blocks in geschweiften Klammern bekannt, und können außerhalb ihres Geltungsbereichs nicht durch Variablen mit demselben Namen überschrieben werden.

{ 
	let x = 1; 
	console.log(x); 	// 1
	{ 
		let x = 2; 		// 2
		console.log(x) 
	}; 
	console.log(x);		// 1
}

Ob das immer gut lesbar ist, ist eine andere Frage … .

Hoisting oder Anheben

Anheben oder Hoisting bedeutet, dass Variablen automatisch im Hintergrund an den Anfang ihres Scopes gehoben werden, Funktionen automatisch vor ihren ersten Aufruf, damit sie beim Aufruf definiert sind.

// So stand es im Script
foo ();

function foo () {
   var bar = 2; 
   if (bar > 1 | midi) {
      bar nat = bar * 10;
   }
   var midi = (nat * 2) + 2;
   console.log (midi);
}

// So wirkte Hoisting
function foo () {
   var bar, midi, nat; 
   bar = 2;
   if (bar > 1 | midi) {
      bar nat = bar * 10;
   }
   midi = (nat * 2) + 2;
   console.log (midi);
}

foo ();

Mit ECMAScript 6 werden Variablen mit let / const nicht mehr automatisch an den Anfang des Blocks gehoben, wohl aber Funktionen.

console.log(b); // ReferenceError
let b = 10;

Wird eine Variable vor ihrer Definition angesprochen, gibt's einen ReferenceError. Bevor eine Variable definiert wird, liegt sie in einem temporalen schwarzen Loch.

Aber Funktionsaufruf vor Deklaration der Funktion funktioniert.

foo(); 

function foo() {
  console.log("Hallo ECMAScript!");
}