Javascript const – Variablendeklaration mit Block Scope

Javascript Import und Export

Das Schlüsselwort const definiert einen Wert oder die Referenz auf ein Objekt als unveränderlich – eben als Konstante.

Variablen, die mit const definiert werden, verhalten sich wie Variablen, die mit let angelegt werden, nur kann ihnen kein neuer Wert zugewiesen werden.

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

const-Variablen muss schon bei der Deklaration ein Wert zugewiesen werden. Das geht also nicht

const color;
color = "blue";

const wird benutzt, wenn einer Variablen kein neuer Wert zugewiesen werden soll. 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 nicht einfach konstant

const definiert keinen konstanten Wert, sondern eine konstante Referenz auf einen Wert. Der Wert von primitiven Datentypen (number, string und boolean) kann nach der Deklaration nicht geändert werden, aber die Eigenschaften von konstanten Objekten 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");
const length = slideshow.length;
slideshow [ length - 1 ].classList.add("last");

Aber das Objekt kann nicht erneut deklariert werden:

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

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

const colors = ["hsl(320,50,80)", "hsl(240,80,30)", "hsl(90,60,70)"];
colors = ["hsl(320,50,80)", "hsl(240,80,30)", "hsl(90,60,70)"];