Javascript const – konstante unveränderliche Variablen

Block Scope – Gültigkeitsbereich

Die Deklaration einer Variablen mit const bringt genauso wie let einen Block Scope mit. Diese Variablen gelten nur innerhalb des Blocks, in dem sie deklariert werden.

let color = "blue";
{
	const color = "red";
   
	// Innerhalb des Blocks in { } hat color den Wert red
	document.querySelector("h1").style.color = color;
}

console.log (color); // color liefert wieder blue

Die Deklaration einer Variablen mit const muss immer direkt einen Wert angeben. Das geht also nicht:

const color;
color = "blue";

const verhindert also jede erneute Zuweisung eines Werts. Das trifft auf die meisten Variablen zu.

const PI = 3.1415;
PI = 3.14;     // erzeugt einen Fehler
PI = PI * 2;   // erzeugt einen Fehler

const ist doch nicht einfach konstant

const definiert keinen konstanten Wert, sondern eine unveränderliche Referenz auf einen Wert. Der Wert primitiver Datentypen (number, string und boolean) kann nach der Deklaration nicht geändert werden, aber die Eigenschaften von Objekten und auch von Arrays sehr wohl.

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

cat.farbe = "beige";

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

oder im DOM der Webseite

const slideshow = document.querySelectorAll("img.slideshow");
slideshow [ i ].classList.add("last");

Genauso können sich die Werte von Elementen eines konstanten Arrays ändern:

const colors = ["Rot", "Grün", "Pink"];
colors.push ("Gelb", "Flieder");
console.log (colors);

["Blau", "Grün", "Pink", "Gelb", "Flieder"]

Aber dem Objekt kann kein neuer Wert zugewiesen werden:

const slideshow = document.querySelectorAll("img.slideshow");
slideshow = document.querySelectorAll("figure.slideshow");

Dynamische Zuweisungen

Es kommt vor, dass der Wert, der einer Variablen zugewiesen wird, dynamisch durch den Programmablauf bestimmt ist. Wenn eine Funktion oder Methode null oder undefined zurückgibt, soll die Variable z.B. auf jeden Fall einen default-Wert haben.

Eine kontante Variable kann aber nicht mit einer if-Bedingung angelegt werden.

let elem = document.querySelector(".foo");
if (!elem) {
	elem = default;
}

Das erledigt man besser mit einem ||

const elem = document.querySelector(".foo") || default;

oder mit dem Ternary-Operator:

const elem = document.querySelector (".foo") ? nodeA : nodeB;

Was ist das Gute an const?

Deklaration mit const vereinfachen das Scripting, weil bei einer Variablen, die als const angelegt wurde, weniger Seiteneffekte auftreten können.