Kapitel 4: Variablen und Konstanten

Variablen sind wie "Schachteln", in denen wir Daten speichern können. In diesem Kapitel lernen Sie alles über Variablen und Konstanten in JavaScript.

4.1 Was sind Variablen? Warum brauchen wir sie?

Stellen Sie sich eine Variable wie eine Schachtel mit einem Etikett vor.

Warum Variablen?

Ohne Variablen:

console.log("Max");
console.log("Max");
console.log("Max");
// Wenn sich der Name ändert, müssen wir 100 Stellen ändern!

Mit Variablen:

let name = "Max";
console.log(name);
console.log(name);
console.log(name);
// Nur eine Änderung nötig: name = "Moritz";

Beispiel aus der Praxis

// Preis berechnen
let preis = 50;
let mwst = 0.19;
let gesamtpreis = preis * (1 + mwst);

console.log("Gesamtpreis:", gesamtpreis);

4.2 Variablen-Deklaration: var / let / const

JavaScript hat 3 Möglichkeiten, Variablen zu deklarieren:

let (Empfohlen für veränderliche Werte)

let alter = 25;
alter = 26; // Erlaubt!
console.log(alter); // 26

Eigenschaften:

• ✅ Kann geändert werden
• ✅ Block-Scoped (gilt nur innerhalb von { })
• ✅ Nicht neu deklarierbar (let x = 5; let x = 10; → Fehler)

const (Empfohlen für konstante Werte)

const PI = 3.14159;
PI = 3.14; // FEHLER! Konstante kann nicht geändert werden

const benutzer = { name: "Max" };
benutzer.name = "Moritz"; // Erlaubt! (nur der Inhalt des Objekts kann geändert werden)

Eigenschaften:

• ✅ Nicht neu zuweisbar
• ✅ Muss sofort initialisiert werden
• ✅ Block-Scoped

var (Veraltet - vermeiden!)

var alter = 25;
alter = 26; // Erlaubt
var alter = 30; // Erlaubt (schlecht!)

Warum var vermeiden?

• ❌ Kein Block-Scope (führt zu Fehlern)
• ❌ Kann mehrfach deklariert werden
• ❌ Wird "gehoisted" (nach oben gezogen)

Empfehlung für Anfänger

Schlüsselwort	Verwendung
let	Für Werte, die sich ändern können
const	Für Werte, die sich nicht ändern sollten
var	❌ Nicht verwenden (veraltet)

4.3 Variablen-Benennungsregeln (Muss eingehalten werden!)

JavaScript hat strenge Regeln für Variablennamen.

Erlaubte Zeichen

• ✅ Buchstaben (a-z, A-Z)
• ✅ Zahlen (0-9) - aber nicht als erstes Zeichen
• ✅ Unterstrich (_)
• ✅ Dollarzeichen ($)

Beispiele für gültige Namen

let name = "Max";          // ✅ Gültig
let alter2 = 25;          // ✅ Gültig
let _geheim = "xyz";      // ✅ Gültig
let $preis = 100;         // ✅ Gültig
let firstName = "Max";    // ✅ Gültig (camelCase)

Beispiele für ungültige Namen

let 2alter = 25;          // ❌ FEHLER: Darf nicht mit Zahl beginnen
let mein-name = "Max";    // ❌ FEHLER: Bindestrich nicht erlaubt
let class = "A";          // ❌ FEHLER: "class" ist ein reserviertes Wort

Reservierte Wörter (dürfen nicht verwendet werden)

break, case, catch, continue, debugger, default, delete, do, else, finally, 
for, function, if, in, instanceof, new, return, switch, this, throw, try, 
typeof, var, void, while, with, class, const, enum, export, extends, import, 
super, implements, interface, let, package, private, protected, public, static, 
yield

Namenskonventionen (Best Practices)

// ✅ Gut: camelCase (Standard in JavaScript)
let firstName = "Max";
let totalPrice = 100;
let isUserLoggedIn = true;

// ✅ Gut: Beschreibende Namen
let studentCount = 25;
let calculateAverage = function() { ... };

// ❌ Schlecht: Zu kurz oder unklar
let x = 25;
let fn = function() { ... };

// ✅ Gut: Konstanten in UPPER_SNAKE_CASE
const MAX_SIZE = 100;
const API_KEY = "abc123";

4.4 Einsatzbereiche für Konstanten

Verwenden Sie const für Werte, die sich nicht ändern sollten.

Geeignet für const

// Mathematische Konstanten
const PI = 3.14159;
const GRAVITY = 9.81;

// Konfiguration
const MAX_LOGIN_ATTEMPTS = 3;
const API_URL = "https://api.beispiel.de";

// Farbcodes
const PRIMARY_COLOR = "#3498db";

// Array/Objekt (Inhalt kann geändert werden!)
const students = ["Max", "Moritz"];
students.push("Lisa"); // ✅ Erlaubt!

Nicht geeignet für const

// Werte, die sich ändern
let alter = 25;          // ✅ besser als const
let punkte = 0;         // ✅ besser als const
let isLoggedIn = false; // ✅ besser als const

4.5 Übung: Variablen deklarieren (Name/Alter/Geschlecht)

Aufgabe 1: Erstellen Sie Variablen für persönliche Daten

// Ihr Code hier:
let vorname = "Max";
let nachname = "Mustermann";
let alter = 25;
let geschlecht = "männlich";
let istStudent = true;

console.log("Vorname:", vorname);
console.log("Nachname:", nachname);
console.log("Alter:", alter);
console.log("Geschlecht:", geschlecht);
console.log("Ist Student:", istStudent);

Aufgabe 2: Berechnen Sie das Geburtsjahr

let aktuellesJahr = 2024;
let alter = 25;
let geburtsjahr = aktuellesJahr - alter;

console.log("Geburtsjahr:", geburtsjahr);

Aufgabe 3: Ändern Sie Werte

let punkte = 100;
console.log("Punkte:", punkte); // 100

punkte = punkte + 50;
console.log("Punkte nach Erhöhung:", punkte); // 150

punkte = punkte - 30;
console.log("Punkte nach Verringerung:", punkte); // 120

Aufgabe 4: Verwenden Sie Konstanten

const STEUERSATZ = 0.19;
let nettoPreis = 100;
let bruttoPreis = nettoPreis * (1 + STEUERSATZ);

console.log("Netto:", nettoPreis);
console.log("Steuersatz:", STEUERSATZ * 100 + "%");
console.log("Brutto:", bruttoPreis);

📝 Zusammenfassung

In diesem Kapitel haben Sie gelernt:

• ✅ Variablen sind "Schachteln" zum Speichern von Daten
• ✅ let für veränderliche Werte (empfohlen)
• ✅ const für konstante Werte (empfohlen)
• ✅ var vermeiden (veraltet)
• ✅ Benennungsregeln: keine Zahlen am Anfang, keine Sonderzeichen (außer _ und $)
• ✅ camelCase für Variablen und Funktionen
• ✅ UPPER_SNAKE_CASE für Konstanten

➡️ Nächster Schritt

Im nächsten Kapitel lernen wir Datentypen - die verschiedenen Arten von Daten, die wir in Variablen speichern können!

---

Übung:

1. Erstellen Sie eine HTML-Datei mit JavaScript
2. Deklarieren Sie Variablen für Ihren Namen, Alter, Stadt
3. Geben Sie diese Variablen in der Konsole aus
4. Ändern Sie die Werte und geben Sie sie erneut aus
5. Verwenden Sie const für Werte, die sich nicht ändern sollten