LU02a - Keywords: var, let, const

Variablen sind Platzhalter für Daten (Kontainer), die im Programm gespeichert und später wiederverwendet werden können. Sie ermöglichen es, Werte wie Zahlen, Texte oder Objekte mit einem Namen zu versehen, anstatt sie direkt im Code mehrfach zu verwenden. Dadurch wird der Code flexibler, besser lesbar und leichter wartbar.

Variablen dienen in JavaScript dazu, Werte zu speichern und wiederzuverwenden. Sie können Zahlen, Texte, Objekte, Funktionen und vieles mehr aufnehmen.

Zur Deklaration von Variablen stehen drei Keywords zur Verfügung:

• var
• let
• const

Das älteste Schlüsselwort in JavaScript. Es ist funktion-skopiert (gültig innerhalb der Funktion) und nicht block-skopiert (gültig im gesamten Block) und wird beim Programmstart an den Anfang des Scopes verschoben.

Hinweis: Heutzutage wird var selten empfohlen, da es leicht zu unerwartetem Verhalten führt, ist also veraltet.

Beispiel

function demoVar() {
  if (true) {
    var name = "Volkan";
  }
  console.log(name); // funktioniert, obwohl innerhalb des if-Blocks deklariert (scope innerhalb der Funktion
}
demoVar();

Wie in der Abbildung zu sehen ist, ist die Ausgabe der Variable name fehlerfrei, obwohl diese ausserhalb des if-Blocks definiert wurde. Der Scope (Gültigkeitsbereich) ist bei var die Funktion.

Seit ES6 (2015) eingeführt. let ist block-skopiert, d. h. die Variable existiert nur innerhalb des Blockes { … }, in dem sie definiert ist.

Beispiel

function demoLet() {
  if (true) {
    let age = 42;
    console.log(age); // 42
  }
  // console.log(age); // Fehler: age ist hier nicht definiert
}
demoLet();

Wie in der Ausgabe zu sehen, wird Markpoint 1: fehlerfrei ausgegeben, Markpoint 2: liefer dann eine Fehlermeldung, weil let ausserhalb des IF-Blocks deklariert wurde.

const gibt es ebenfalls seit ES6. const verhält sich wie let (block-skopiert), aber der Bezeichner darf nicht neu zugewiesen bzw. überschrieben werden. D.h. der Inhalt wird einmal geladen und ist gültig bis der Server neu gestartet wird. Dies ist beispielsweise bei Mehrwersteuer für eine Land der Fall, da diese sich über lange Zeit nicht verändern.

Wichtig: Das bedeutet nicht, dass der gespeicherte Wert „eingefroren“ ist – bei Objekten und Arrays lassen sich Inhalte weiterhin ändern.

Beispiel 1 - einfache Varibale

const id = "1234"; 
console.log("1: ", id); // Ausgabe des Inhalts
id = "3456"; // Versuch die Variable zu überschreiben
console.log("2: ", id); // 1234" 

Die Konsolenausgabe bei Markpoint 1: zeigt, dass der ursprüngliche Wert der Variable name 1234 war. Der Versuch den Inhalt zu überschreiben führt zu einer Fehlermeldung. Markpoint 2: zeigt, dass der Inhalt der Variable sich nicht verändert hat.

Beispiel 2 - Komplexe Variable (Objekt/Arra)

const user = { name: "Doe",
               vorname: "Joan"
             };
console.log("1: ", user); // { "name: "Doe", vorname: "Joan" }
user.name = "Muster";   // erlaubt, Objektinhalt änderbar
user.vorname = "Max";   // erlaubt, Objektinhalt änderbar
console.log("2: ", user); // { "name: "Doe", vorname: "Joan" }
user = {name: "Suter", vorname: "Thierry" 
       };  // Fehler: Neuzuweisung nicht erlaubt
console.log("3: ", user); // { "name: "Doe", vorname: "Joan" }

{{:de:modul:m288:learningunits:lu02:lu02_04.png?600|Const mit assoziativen Arrays}}

In der Abbildung ist zu sehen, dass der Versuch das Array neu zu schreiben eine Fehlermeldung herbeiführt. Hingegen kann der Inhalt des Arrays verändert werden.

• W3School- JavaScript Varibles
• SelfHTML - JS Variablen

Volkan Demir