Variablen – var, let oder const?

= Variablen zum Speichern von Daten/Werten

🧠 Best Practice

• Standardmäßig const
• let wenn sich der Wert ändern soll
• var vermeiden

🔥 Vergleichstabelle

1. var (veraltet, besser vermeiden)

Gültigkeitsbereich (Scope):

• Funktionsscope
• Ignoriert Blockscope ({ }) = ausserhalb erreichbar; kann zu Problemen führen

if (true) {
  var x = 10;
}
console.log(x); // ✅ 10

if (true) {
  var x = 10;
}
console.log(x); // ✅ 10

Hoisting:

• Wird nach oben gezogen und mit undefined initialisiert
• Zugriff vor der Deklaration → kein Fehler, nur undefined

Mehrfachdeklaration:

• ✅ erlaubt (kann zu Bugs führen)

var x = 1;
var x = 2; // ✅ kein Fehler

var x = 1;
var x = 2; // ✅ kein Fehler

2. let (modern, empfohlen)

Gültigkeitsbereich (Scope):

• Blockscope ({ })
• Vorhersehbarer als var

if (true) {
  let y = 10;
}
console.log(y); // ❌ ReferenceError, weil vorher nicht deklariert

if (true) {
  let y = 10;
}
console.log(y); // ❌ ReferenceError, weil vorher nicht deklariert

Hoisting:

• Wird zwar gehoistet, aber nicht initialisiert
• Zugriff vor Deklaration → Temporal Dead Zone (TDZ) = ReferenceError

Mehrfachdeklaration:

• ❌ nicht erlaubt im gleichen Scope

let y = 1;
let y = 2; // ❌ Fehler

let y = 1;
let y = 2; // ❌ Fehler

Neuwertzuweisung:
✅ erlaubt

3. const (für Werte, die sich nicht ändern)

Gültigkeitsbereich (Scope):

• Blockscope (wie let)

Neuwertzuweisung:

• ❌ nicht erlaubt

const a = 5;
a = 10; // ❌ Fehler

const a = 5;
a = 10; // ❌ Fehler

Mehrfachdeklaration:

• ❌ nicht erlaubt

Objekte & Arrays bei const:

• Der Inhalt kann trotzdem verändert werden:

const user = { name: "Sam" };
user.name = "Alex"; // ✅ erlaubt

const user = { name: "Sam" };
user.name = "Alex"; // ✅ erlaubt

Übersicht Scopes:

Global Scope
│
├─ varGlobal                <-- mit var im globalen Scope</em>
├─ letGlobal                <-- mit let/const im globalen Scope</em>
│
└─ function myFunc() {      <-- Function Scope beginnt
    ├─ varFunc              <-- mit var innerhalb der Funktion</em>
    ├─ letFunc              <-- mit let/const innerhalb der Funktion</em>
    │
    └─ if (true) {          <-- Block Scope beginnt
        ├─ varBlock         <-- in der Funktion sichtbar</em>
        ├─ letBlock         <-- nur hier sichtbar</em>
        └─ constBlock       <-- nur hier sichtbar</em>
    }                       <-- Block Scope endet
}                           <-- Function Scope endet

Global Scope
│
├─ varGlobal                <-- mit var im globalen Scope</em>
├─ letGlobal                <-- mit let/const im globalen Scope</em>
│
└─ function myFunc() {      <-- Function Scope beginnt
    ├─ varFunc              <-- mit var innerhalb der Funktion</em>
    ├─ letFunc              <-- mit let/const innerhalb der Funktion</em>
    │
    └─ if (true) {          <-- Block Scope beginnt
        ├─ varBlock         <-- in der Funktion sichtbar</em>
        ├─ letBlock         <-- nur hier sichtbar</em>
        └─ constBlock       <-- nur hier sichtbar</em>
    }                       <-- Block Scope endet
}                           <-- Function Scope endet