Lerne funktionale Array-Transformationen mit .map(), .filter() und .reduce().
Statt klassischer for-Schleifen nutzen wir funktionale Methoden:
const zahlen = [1, 2, 3, 4];
-const verdoppelt = zahlen.map(x => x * 2);
-const gerade = zahlen.filter(x => x % 2 === 0);
-const summe = zahlen.reduce((a, b) => a + b, 0);Lerne Entscheidungslogik mit if/else, switch und den mächtigen Schleifenkonstrukten in modernem JavaScript.
===)Bedingte Anweisungen steuern, welche Codeblöcke bei bestimmten Bedingungen ausgeführt werden. In modernem JavaScript verwenden wir ausnahmslos den strikten Vergleich === (bzw. !==), um ungewollte Typumwandlungen zu verhindern:
const alter = 17;
+
+if (alter >= 18) {
+ console.log("Zugang gewährt: Volljährig");
+} else if (alter >= 13) {
+ console.log("Jugendschutz: Eingeschränkter Zugang");
+} else {
+ console.log("Kindersicherung aktiv");
+}
+
+// ⚠️ Strikter Vergleich:
+console.log(42 === "42"); // false (Number !== String)
+console.log(42 == "42"); // true (Achtung: Gefährliche implizite Konvertierung!)Wenn du eine Variable gegen viele konkrete Werte prüfen möchtest, sorgt switch für sauberen Code. Für schnelle Zuweisungen ist der ternäre Operator (? :) die beste Wahl:
// 🎯 Switch-Case:
+const rolle = "admin";
+switch (rolle) {
+ case "admin":
+ console.log("Volle Administrationsrechte");
+ break; // Verhindert 'Fall-Through'
+ case "editor":
+ console.log("Inhalte bearbeiten");
+ break;
+ default:
+ console.log("Gastzugang (Nur Lesen)");
+}
+
+// 🎯 Ternärer Operator (Bedingung ? Wenn-Wahr : Wenn-Falsch):
+const hatRabatt = true;
+const endpreis = hatRabatt ? 80 : 100;for, for...of, whileWiederhole Operationen präzise. Mit break brichst du eine Schleife vorzeitig ab, mit continue springst du sofort zum nächsten Durchlauf:
// 1. Zählschleife:
+for (let i = 1; i <= 5; i++) {
+ if (i === 3) continue; // Überspringt die 3
+ console.log(i); // 1, 2, 4, 5
+}
+
+// 2. Iteration über Arrays (for...of):
+const zutaten = ["Mehl", "Zucker", "Eier"];
+for (const zutat of zutaten) {
+ console.log("Zutat:", zutat);
+}
+
+// 3. Bedingungsschleife:
+let countdown = 3;
+while (countdown > 0) {
+ console.log(countdown--);
+}Die Ampelkreuzung (if/else/switch): Je nachdem, welches Signal aufleuchtet, nimmt dein Datenstrom eine andere Abbiegung. switch ist der mehrspurige Kreisverkehr mit festen Ausfahrten.
Der Kreisverkehr (while/for): Dein Code kreist so lange, wie die Bedingung wahr ist. Mit continue fährst du ohne Halt in die nächste Runde, mit break nimmst du sofort die nächste Ausfahrt ins Freie!
| Konstrukt | +Beispiel | +Zweck | +
|---|---|---|
if / else if / else |
+ if (x > 0) { ... } |
+ Verzweigung nach Wahrheitswerten | +
switch(wert) { case ...: } |
+ case 1: return "Mo"; break; |
+ Gezielte Prüfung auf diskrete Werte | +
bed ? a : b |
+ const s = a >= 18 ? 'Erw' : 'Kind'; |
+ Kompakter ternärer Ausdruck | +
for (let i = 0; i < n; i++) |
+ for (let i = 0; i < 10; i++) |
+ Zählschleife mit Index-Schritten | +
for (const x of array) |
+ for (const item of items) |
+ Direkte Element-Iteration | +
while (bed) / do..while |
+ while (n > 0) n--; |
+ Bedingungsgesteuerte Schleifen | +
break / continue |
+ if (i % 2 !== 0) continue; |
+ Schleifenabbruch / Nächster Durchlauf | +
aufgabe.jsFür ungerade Zahlen kannst du if (i % 2 !== 0) continue; schreiben. Bei findeErstesVielfaches beende die Schleife mit break, sobald zahl % teiler === 0 zutrifft!
Meistere moderne Funktionsdeklarationen, Arrow Functions, Rest-Parameter, Gültigkeitsbereiche und Closures.
+JavaScript bietet klassische Deklarationen, Funktionsausdrücke und moderne Arrow Functions. Mit Default- und Rest-Parametern schreibst du flexiblen Code:
+ +// 🎯 1. Arrow Function mit implizitem Return:
+const verdopple = x => x * 2;
+
+// 🎯 2. Default-Parameter:
+function begruesse(name = "Gast") {
+ return `Willkommen, ${name}!`;
+}
+
+// 🎯 3. Rest-Parameter (...sammelt alle Argumente als Array):
+function summiere(...zahlen) {
+ return zahlen.reduce((sum, n) => sum + n, 0);
+}
+console.log(summiere(10, 20, 30)); // 60Variablen sind immer nur in ihrem deklarierten Bereich gültig. let und const erzeugen echte Block-Scopes:
{ let x = 1; }): Nur innerhalb des { }-Blocks
+ function scopeTest() {
+ const inside = "Ich lebe nur in der Funktion";
+ if (true) {
+ const block = "Ich lebe nur im if-Block";
+ }
+ // console.log(block); // ❌ ReferenceError: block is not defined
+}Eine Closure entsteht, wenn eine innere Funktion auf Variablen ihrer umgebenden Funktion zugreift – auch nachdem die äußere Funktion beendet ist:
+ +function erstelleZaehler(start = 0) {
+ let counter = start; // Kapselung (private Variable)
+
+ return function() {
+ counter++;
+ return counter;
+ };
+}
+
+const zaehlerA = erstelleZaehler(0);
+console.log(zaehlerA()); // 1
+console.log(zaehlerA()); // 2
+
+const zaehlerB = erstelleZaehler(100);
+console.log(zaehlerB()); // 101 (Komplett unabhängig von zaehlerA!)Die äußere Funktion ist der Tresorbauer: Sie konstruiert ein geschütztes Gehäuse (die privaten Variablen) und händigt dir lediglich einen Schlüsselanhänger (die zurückgegebene innere Funktion) aus.
+Niemand kann von außen in den Tresor greifen – nur durch Drehen des Schlüssels (Funktionsaufruf) wird das interne Zahnrad weitergedreht. Jeder neue Aufruf der äußeren Funktion baut einen neuen, isolierten Tresor!
+| Konzept | +Syntax / Beispiel | +Besonderheit | +
|---|---|---|
Arrow Function |
+ const f = (x) => x * 2; |
+ Kompakt, lexikalisches this |
+
Default-Parameter |
+ function f(a = 10) { ... } |
+ Greift bei fehlendem Argument / undefined |
+
Rest-Parameter |
+ function f(...args) { ... } |
+ Sammelt alle Parameter in ein Array | +
Block Scope |
+ { const x = 42; } |
+ Gültigkeit beschränkt auf geschweifte Klammern | +
Closure |
+ return () => ++counter; |
+ Behält Zugriff auf Variablen des Erzeugungs-Scopes | +
aufgabe.jsFür erstelleZaehler deklariere let zaehler = startWert; in der äußeren Funktion und gib eine innere Funktion zurück, die zaehler++ rechnet und den neuen Wert zurückliefert!
Lerne funktionale Transformationen mit .map(), .filter(), .reduce() sowie einzigartige Sets und flexible Maps.
map, filter, reduce)Verarbeite Datenreihen deklarativ, lesbar und unveränderlich (ohne das Original-Array zu mutieren):
+ +const preise = [10, 25, 40, 5];
+
+// 🎯 1. .map() - Jedes Element transformieren:
+const mitMwSt = preise.map(p => p * 1.19);
+
+// 🎯 2. .filter() - Elemente nach Kriterium filtern:
+const teuer = preise.filter(p => p >= 20); // [25, 40]
+
+// 🎯 3. .reduce() - Aggregieren zu einem Gesamtwert:
+const gesamt = preise.reduce((sum, p) => sum + p, 0); // 80Ein Set garantiert, dass jeder Wert nur genau einmal vorkommt. Ideal für Duplikatbereinigung und schnelle Existenzprüfungen:
// 🎯 Set erstellen & befüllen:
+const tags = new Set(["js", "web", "js", "frontend"]);
+console.log(tags.size); // 3 (da "js" nur 1x existiert)
+
+tags.add("backend");
+console.log(tags.has("web")); // true (O(1) schneller Lookup)
+
+// 🌟 Duplikate aus Array entfernen (Spread):
+const duplikate = [1, 2, 2, 3, 1, 4];
+const einzigartig = [...new Set(duplikate)]; // [1, 2, 3, 4]Eine Map verknüpft Schlüssel mit Werten. Jeder Schlüssel kann einen beliebigen Typ haben (auch Strings, Zahlen oder Objekte):
// 🎯 Map erstellen & befüllen:
+const config = new Map();
+config.set("thema", "dark");
+config.set("benachrichtigungen", true);
+
+console.log(config.get("thema")); // "dark"
+console.log(config.has("sprache")); // false
+console.log(config.size); // 2
+
+// 🎯 Aus 2D-Array initialisieren:
+const lexikon = new Map([
+ ["de", "Guten Tag"],
+ ["en", "Hello"]
+]);Array (Die Fotogalerie): Ein Fotoalbum mit festen Seiten-Nummern (Indizes 0, 1, 2...). Du kannst dasselbe Bild mehrfach einkleben und Filterfolien darüber legen.
+Set (Der VIP-Club): Die Gästeliste an der Tür: Ein Gast kann nicht zweimal auf der Liste stehen. Neue Duplikate werden sofort abgewiesen.
+Map (Das moderne Telefonbuch): Schnelles Nachschlagen: Du nennst den Namen (Key) und bekommst sofort die Nummer (Value) zurück.
+| Typ | +Syntax / Methode | +Beschreibung | +
|---|---|---|
Array |
+ arr.map(fn) |
+ Erzeugt neues transformiertes Array | +
Array |
+ arr.filter(fn) |
+ Filtert Elemente nach Wahrheitsbedingung | +
Array |
+ arr.reduce(fn, start) |
+ Aggregiert alle Werte zu einem Gesamtwert | +
Set |
+ new Set(arr) / [...set] |
+ Menge ohne Duplikate; Konvertierung zu Array | +
Set |
+ set.has(val) / set.add(val) |
+ Element prüfen / hinzufügen (Größe: .size) |
+
Map |
+ map.set(k, v) / map.get(k) |
+ Schlüssel-Wert-Paar setzen / abrufen | +
Map |
+ new Map(entries) |
+ Initialisierung aus [[k, v], ...] |
+
aufgabe.jsFür entferneDuplikate: return [...new Set(liste)];. Für zaehleHaeufigkeiten: Iteriere mit for (const w of woerter) und setze map.set(w, (map.get(w) || 0) + 1);.
Lerne professionelle Datenmodellierung mit ES6-Klassen, Kapselung, Vererbung und statischen Fabrikmethoden.
+class, constructor & this
+ Mit ECMAScript 2015 (ES6) führte JavaScript eine elegante, standardisierte Klassensyntax ein. Eine Klasse ist wie ein technischer Bauplan, aus dem mit dem Schlüsselwort new beliebig viele konkrete Objekte (Instanzen) gefertigt werden:
+
class Benutzer {
+ // Der Konstruktor wird beim Erzeugen mit 'new' aufgerufen:
+ constructor(name, email) {
+ this.name = name; // Instanzvariable zuweisen
+ this.email = email;
+ this.erstelltAm = new Date();
+ }
+
+ // Methoden werden direkt im Klassenkörper definiert (ohne 'function'):
+ begruessen() {
+ return `Hallo, mein Name ist ${this.name}!`;
+ }
+}
+
+// Instanziierung:
+const user1 = new Benutzer("Anna Schmidt", "anna@dev.io");
+console.log(user1.begruessen()); // "Hallo, mein Name ist Anna Schmidt!"
+ Objektorientierte Kapselung schützt interne Zustände vor unkontrollierten Änderungen von außen. Mit get und set steuerst du Lese- und Schreibzugriffe und validierst eingehende Werte:
+
class Bankkonto {
+ constructor(inhaber, startSaldo = 0) {
+ this.inhaber = inhaber;
+ this._saldo = startSaldo; // Konvention: Unterstrich signalisiert internen Zustand
+ }
+
+ // Getter: Zugriff wie auf eine normale Eigenschaft (konto.saldo)
+ get saldo() {
+ return this._saldo;
+ }
+
+ // Kontrollierte Methoden statt direktem Schreibzugriff:
+ einzahlen(betrag) {
+ if (betrag <= 0) {
+ throw new Error("Einzahlungsbetrag muss positiv sein.");
+ }
+ this._saldo += betrag;
+ return this._saldo;
+ }
+}
+ Stelle dir eine Klasse wie den CAD-Konstruktionsplan eines Autos in einer Autofabrik vor.
+ Jedes Mal, wenn du new Auto(...) ausführst, rollt ein eigenständiges Fahrzeug vom Fließband auf die Straße (die Instanz).
+ Das Auto besitzt eigene Farben und Seriennummern (Instanzvariablen), bedient sich über Pedale und Lenkrad (Methoden), und die Maschinen in der Fabrikhalle selbst sind die statischen Werkzeuge.
+
extends & Elternaufruf super()
+ Klassen können Eigenschaften und Methoden von Basisklassen erben. Mit extends leitet man eine Kindklasse ab und mit super(...) ruft man den Konstruktor oder die Methoden der Elternklasse auf:
+
// Basisklasse:
+class Fahrzeug {
+ constructor(marke, modell, baujahr) {
+ this.marke = marke;
+ this.modell = modell;
+ this.baujahr = baujahr;
+ }
+
+ beschreibung() {
+ return `${this.marke} ${this.modell} (${this.baujahr})`;
+ }
+}
+
+// Kindklasse erbt von Fahrzeug:
+class ElektroAuto extends Fahrzeug {
+ constructor(marke, modell, baujahr, batterieKapazitaet) {
+ super(marke, modell, baujahr); // 1. Pflicht: Eltern-Konstruktor aufrufen!
+ this.batterieKapazitaet = batterieKapazitaet; // 2. Eigene Eigenschaften setzen
+ }
+
+ // Methode der Elternklasse überschreiben & erweitern:
+ beschreibung() {
+ return `${super.beschreibung()} [Elektro: ${this.batterieKapazitaet} kWh]`;
+ }
+
+ reichweiteBerechnen(verbrauchPro100km) {
+ return (this.batterieKapazitaet / verbrauchPro100km) * 100;
+ }
+}static)
+ Statische Methoden gehören zur Klasse selbst und nicht zu einer einzelnen Instanz. Man ruft sie direkt über KlassenName.methode() auf. Sie eignen sich hervorragend für Hilfsfunktionen und Fabrikmuster (Factory Methods):
+
class ElektroAuto extends Fahrzeug {
+ // ... Konstruktor und Methoden ...
+
+ // Statische Fabrikmethode erzeugt vorkonfigurierte Instanzen:
+ static erstelleStandardTesla() {
+ return new ElektroAuto("Tesla", "Model 3", 2024, 75);
+ }
+}
+
+// Aufruf direkt an der Klasse, ohne vorheriges 'new':
+const meinTesla = ElektroAuto.erstelleStandardTesla();
+console.log(meinTesla.beschreibung());
+// "Tesla Model 3 (2024) [Elektro: 75 kWh]"| Konzept | +Syntax-Beispiel | +Bedeutung | +
|---|---|---|
| Klassendeklaration | +class Auto { ... } |
+ Definiert einen neuen Objekttypen-Bauplan | +
| Konstruktor | +constructor(farbe) { this.farbe = farbe; } |
+ Initialisiert neue Objekt-Instanzen | +
| Getter / Setter | +get saldo() { return this._saldo; } |
+ Kontrollierter Lese- und Schreibzugriff | +
| Vererbung | +class Kind extends Basis { ... } |
+ Übernimmt Attribute & Methoden der Elternklasse | +
| Super-Aufruf | +super(arg1, arg2); |
+ Führt den Eltern-Konstruktor oder Eltern-Methoden aus | +
| Statische Methode | +static erzeuge() { return new X(); } |
+ Klassenbezogene Hilfs- oder Fabrikmethode | +
| Typ-Prüfung | +obj instanceof Klasse |
+ Prüft, ob obj aus Klasse oder deren Vererbungslinie stammt |
+
aufgabe.js
+ Vergiss nicht, in der Kindklasse ElektroAuto als allererste Anweisung im Konstruktor super(marke, modell, baujahr) aufzurufen, bevor du auf this.batterieKapazitaet zugreifst!
+
Lerne mächtiges Pattern-Matching, Text-Mining, Datenvalidierung und Maskierung mit JavaScript RegExp.
+
+ Ein Regulärer Ausdruck (RegExp) ist ein Suchmuster zur Textanalyse, Validierung und Transformation. In JavaScript erstellst du Regex entweder als Literal mit Schrägstrichen /muster/flags oder über das RegExp-Objekt:
+
// 1. Literal-Schreibweise (empfohlen bei festen Mustern):
+const regexLiteral = /javascript/i; // 'i' = ignore case (Groß-/Kleinschreibung ignorieren)
+
+// 2. Konstruktor-Schreibweise (für dynamische Muster aus Variablen):
+const suchwort = "javascript";
+const regexDynamic = new RegExp(suchwort, "i");
+
+console.log(regexLiteral.test("Ich liebe JavaScript!")); // trueg (global): Findet alle Vorkommen im gesamten Text (nicht nur das erste).i (case-insensitive): Ignoriert Unterschiede zwischen Groß- und Kleinschreibung.m (multiline): Behandelt Zeilenumbrüche für ^ (Zeilenanfang) und $ (Zeilenende).RegExp nutzt spezielle Steuerzeichen, um Zeichenklassen und Wiederholungen zu beschreiben:
+ +^) & Textende ($){8,} (mind. 8)+ Stelle dir einen Regulären Ausdruck wie eine transparente Loch-Schablone vor, die du über eine riesige Zeitungswand legst. + Die Löcher der Schablone sind so gestanzt, dass überall dort, wo eine E-Mail-Adresse, IBAN oder Telefonnummer steht, der Text sofort ins Auge springt, während der restliche Fließtext ausgeblendet wird. +
+Je nachdem, ob du prüfen, extrahieren oder ersetzen willst, bietet JS passende Methoden:
+ +const text = "Support: info@code.de oder sales@code.de. Tel: 0171-1234567.";
+
+// 1. regex.test(str) -> boolean (perfekt für Validierung):
+const hatEmail = /@code\.de/.test(text); // true
+
+// 2. str.match(regex) -> Array mit allen Treffern (mit Flag 'g'):
+const emails = text.match(/[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}/g);
+console.log(emails); // ["info@code.de", "sales@code.de"]
+
+// 3. str.replace(regex, neu) -> String ersetzen mit Capturing Groups:
+const maskiert = text.replace(/(\d{4})-(\d+)/g, "$1-XXXX");
+console.log(maskiert); // "... Tel: 0171-XXXX."| Syntax / Methode | +Beispiel | +Beschreibung | +
|---|---|---|
/muster/flags |
+ /\d+/g |
+ Regex Literal mit Flags | +
regex.test(str) |
+ /^[A-Z]/.test("Hallo") // true |
+ Prüft, ob Muster im String vorkommt (liefert true/false) |
+
str.match(regex) |
+ "12 a 34".match(/\d+/g) // ["12", "34"] |
+ Liefert Array aller Fundstellen | +
str.replace(regex, sub) |
+ "Hi".replace(/i/, "allo") |
+ Ersetzt Treffer durch Ersatz-String oder Funktion | +
[a-z0-9] |
+ [A-Z] // Großbuchstabe |
+ Zeichenklasse (Matcht ein beliebiges Zeichen im Bereich) | +
(gruppe) & $1 |
+ str.replace(/(\d+)/, "Nr: $1") |
+ Capturing Group zum Wiederverwenden von Teiltreffern | +
aufgabe.js
+ In str.replace(regex, replacement) kannst du runde Klammern (\d{4}) für die letzten 4 Ziffern verwenden und diese mit $1 im Ersatz-String einfügen!
+
Schreibe robusten und defensiven JavaScript-Code mit try/catch/finally, benutzerdefinierten Fehler-Klassen und instanceof.
+try...catch...finally Kontrollmuster
+ Laufzeitfehler bringen ungesicherte Programme sofort zum Absturz. Mit try...catch fängst du Ausnahmen sicher ab und ermöglichst deiner Webanwendung eine kontrollierte Fehlerbehandlung:
+
try {
+ // 1. Code ausführen, der fehlschlagen könnte:
+ const daten = JSON.parse(roheEingabe);
+ verarbeite(daten);
+} catch (error) {
+ // 2. Wird nur ausgeführt, wenn im try-Block ein Fehler aufgetreten ist:
+ console.error("Fehler aufgetreten:", error.name, error.message);
+} finally {
+ // 3. Wird IMMER ausgeführt (z. B. für Aufräumarbeiten, Lade-Spinner stoppen):
+ schliesseLadeAnzeige();
+}try { ... } (Code ausführen)catch(err) { ... }finally { ... } (Aufräumen – läuft immer!)throw & Eigene Error-Klassen
+ Mit dem throw-Befehl löst du gezielt Fehler aus. Statt generischer Strings wirft man in professionellem JavaScript immer Instanzen von Error (oder abgeleiteten Klassen):
+
// Basisklasse für alle Domänenfehler der App:
+class AnwendungsFehler extends Error {
+ constructor(message) {
+ super(message);
+ this.name = "AnwendungsFehler";
+ }
+}
+
+// Spezifische Kindklasse mit Zusatzinformationen:
+class ValidierungsFehler extends AnwendungsFehler {
+ constructor(message, feld = null) {
+ super(message);
+ this.name = "ValidierungsFehler";
+ this.feld = feld; // Zusätzliche Metadaten für das UI-Highlighting
+ }
+}
+ Einen Fehler mit throw new ValidierungsFehler() zu werfen, ist wie das Ziehen der Sicherheits-Notbremse im fahrenden Zug: Der normale Ablauf stoppt sofort.
+ Der catch-Block ist der Auffang-Fallschirm, der den Sturz abfedert und dafür sorgt, dass die Passagiere (deine Web-App-Benutzer) sicher landen, statt ins Nichts abzustürzen.
+ Der finally-Block ist die Landestation, die in jedem Fall erreicht wird.
+
instanceof
+ Im catch-Block können unterschiedliche Fehlerarten auftreten. Mit dem instanceof-Operator kannst du gezielt auf Validierungsfehler anders reagieren als auf System- oder Netzwerkfehler:
+
try {
+ sendeZahlung(konto, 500);
+} catch (error) {
+ if (error instanceof GuthabenFehler) {
+ zeigeNutzerHinweis(`Nicht genügend Guthaben! Es fehlen ${error.betrag - error.saldo} €.`);
+ } else if (error instanceof ValidierungsFehler) {
+ markiereFormularFeldRot(error.feld, error.message);
+ } else {
+ // Unbekannter Systemfehler -> Erneut werfen oder an Monitoring-Service melden:
+ throw error;
+ }
+}| Befehl / Syntax | +Beispiel | +Wirkung | +
|---|---|---|
throw new Error(...) |
+ throw new Error("Ungültig!"); |
+ Löst Ausnahme aus und bricht aktuellen Stack ab | +
try { } catch(e) { } |
+ try { ... } catch (e) { ... } |
+ Fängt Laufzeitfehler ab und verhindert Crash | +
finally { } |
+ finally { cleanup(); } |
+ Wird garantiert ausgeführt (mit oder ohne Fehler) | +
class X extends Error |
+ class MeinFehler extends Error { } |
+ Eigene typisierte Fehlerklasse mit Stacktrace | +
err instanceof X |
+ if (e instanceof ValidierungsFehler) |
+ Prüft die Fehlerklasse zur differenzierten Behandlung | +
aufgabe.js
+ In parseBenutzerJson kannst du JSON.parse(jsonString) in einem inneren try...catch-Block aufrufen. Fange den SyntaxError ab und wirf stattdessen einen new ValidierungsFehler(..., "jsonString")!
+
Lerne clientseitige Datenhaltung mit localStorage, sessionStorage und robuster JSON-Verarbeitung für Offline-First Web-Apps.
Moderne Browser stellen zwei Schlüssel-Wert-Speicher zur Verfügung, die rein clientseitig ohne Server-Datenbank arbeiten:
+ +| Merkmal | +localStorage |
+ sessionStorage |
+
|---|---|---|
| Lebensdauer | +Dauerhaft (überlebt Browser-Neustarts) | +Nur für die Dauer des Browser-Tabs | +
| Scope | +Same-Origin (über alle Tabs derselben Domain) | +Isoliert auf den einzelnen Tab | +
| Speicherplatz | +ca. 5–10 MB pro Origin | +ca. 5 MB pro Tab | +
| Typischer Einsatz | +Theme (Dark Mode), Highscores, Entwürfe | +Mehrschritt-Formulare, temporärer Tab-Status | +
localStorage ist wie ein Bankschließfach: Was du dort ablegst, wartet auch nach Jahren treu auf dich. sessionStorage ist wie ein Reisetagebuch im Zugabteil: Sobald du den Zug verlässt (Tab schließen), verbleibt es im alten Zug und eine neue Fahrt beginnt mit leeren Blättern.
+Da Web Storage nur Strings akzeptiert, müssen Objekte und Arrays vor dem Speichern mit JSON.stringify() serialisiert und beim Laden mit JSON.parse() deserialisiert werden:
// 🎯 1. Objekt serialisieren & speichern:
+const benutzer = { id: 101, name: "Ada", skills: ["JS", "TS"], aktiv: true };
+localStorage.setItem("user_profile", JSON.stringify(benutzer));
+
+// 🎯 2. Laden & Deserialisieren:
+const raw = localStorage.getItem("user_profile");
+if (raw) {
+ const geladenerBenutzer = JSON.parse(raw);
+ console.log(geladenerBenutzer.skills[0]); // "JS"
+}
+
+// 🎯 3. Einzelnen Schlüssel entfernen:
+localStorage.removeItem("user_profile");Wenn du localStorage.setItem("obj", { a: 1 }) ohne JSON.stringify aufrufst, ruft JavaScript automatisch .toString() auf. Im Storage landet dann der unbrauchbare String "[object Object]"!
try / catchIm professionellen Umfeld kann der Inhalt von Storage durch manuelle Benutzer-Eingaben oder veraltete Formate korrupt sein. Defektes JSON wirft beim Parsen einen SyntaxError:
function ladeEinstellungenSicher(key, standardWert) {
+ try {
+ const raw = localStorage.getItem(key);
+ return raw !== null ? JSON.parse(raw) : standardWert;
+ } catch (err) {
+ console.warn(`Defektes JSON bei Schlüssel "${key}", nutze Standard-Fallback.`, err);
+ return standardWert;
+ }
+}| Befehl | +Signatur | +Beschreibung | +
|---|---|---|
setItem |
+ storage.setItem(key, value) |
+ Schreibt Schlüssel & Wert (als String) | +
getItem |
+ storage.getItem(key) |
+ Liest Wert oder liefert null |
+
removeItem |
+ storage.removeItem(key) |
+ Löscht den Schlüssel aus dem Speicher | +
clear |
+ storage.clear() |
+ Leert den gesamten Speicher der Domain | +
JSON.stringify/parse |
+ JSON.stringify(obj) / JSON.parse(str) |
+ Objekt-Serialisierung & Deserialisierung | +
aufgabe.jsLerne saubere Code-Strukturen mit ES6 Import/Export, Separation of Concerns und Dependency Injection für skalierbare Web-Anwendungen.
+In modernem JavaScript teilst du komplexen Code in wiederverwendbare, isolierte Module auf:
+ +// 📁 utils/math.js (Named Exports)
+export const PI = 3.14159;
+export function addieren(a, b) { return a + b; }
+
+// 📁 models/Rechner.js (Default Export)
+export default class Rechner { ... }
+
+// 📁 app.js (Gezielter & Default Import)
+import Rechner from "./models/Rechner.js";
+import { addieren, PI } from "./utils/math.js";
+import * as Formatters from "./utils/format.js";Monolithischer Code gleicht einer in Stein gemeißelten Statue: Ändert man einen Arm, bricht die gesamte Skulptur. Modulare Software ist wie ein Container-Hafen: Jeder Container hat genormte Maße (Exports/Imports), arbeitet innen autark und kann beliebig ausgetauscht oder transportiert werden.
+Jedes Modul hat genau eine Verantwortung. Das verhindert Nebeneffekte und macht Unittests zum Kinderspiel:
+ +RechnungsEngine): Steuert den Ablauf, kennt aber keine Formatierungsdetails.
+ MathModule): Rechnet mathematisch exakt, wirft Fehler bei 0-Division.
+ FormatterModule): Bereitet Zahlen als "1.250,50 EUR" und Datumsangaben für Menschen auf.
+ | Konstrukt | +Syntax-Beispiel | +Bedeutung | +
|---|---|---|
Named Export |
+ export function add() {} |
+ Exportiert mehrere benannte Elemente | +
Default Export |
+ export default class App {} |
+ Hauptexport eines Moduls (1x pro Datei) | +
Named Import |
+ import { add } from './math.js' |
+ Gezieltes Importieren einzelner Funktionen | +
Namespace Import |
+ import * as M from './math.js' |
+ Bündelt alle Exporte als Objekt | +
Dependency Injection |
+ new Engine(mathMod, fmtMod) |
+ Abhängigkeiten von außen übergeben (Testbarkeit) | +
aufgabe.jsBeherrsche fortgeschrittene Typsystem-Konzepte: Generics <T>, Custom Type Guards, Enums und Utility Types (Partial, Pick, Record).
<T>: Flexible & Typsichere ContainerMit Generics erstellst du Datenstrukturen und Funktionen, die mit beliebigen Typen arbeiten, ohne die Typsicherheit zu verlieren:
+ +// 🎯 Verwendung mit verschiedenen Datentypen:
+const userPage: PaginiertesErgebnis<User> = erstellePaginiertesErgebnis(users, 100, 1, 10);
+const taskPage: PaginiertesErgebnis<Task> = erstellePaginiertesErgebnis(tasks, 45, 2, 10);Ein Custom Type Guard (obj is TargetType) prüft zur Laufzeit Daten und versichert dem Compiler den genauen Typ:
function istAdminBenutzer(obj: any): obj is AdminBenutzer {
+ return (
+ obj !== null &&
+ typeof obj === "object" &&
+ obj.rolle === "ADMIN" &&
+ Array.isArray(obj.berechtigungen) &&
+ obj.berechtigungen.length > 0
+ );
+}Type Guards sind wie der Flughafen-Röntgenapparat: Unbekannte Daten werden gründlich durchleuchtet, bevor sie in geschützte Bereiche gelassen werden. Utility Types sind wie der Präzisions-Maßanzug: Aus einem Basis-Schnittmuster schneidest du passgenau eine Weste (Pick) oder ein flexibles Übergangshemd (Partial).
| Utility Type | +Syntax | +Wirkung & Einsatzgebiet | +
|---|---|---|
Partial<T> |
+ Partial<UserProfile> |
+ Alle Eigenschaften werden optional (?). Ideal für Updates. |
+
Readonly<T> |
+ Readonly<Config> |
+ Verhindert Überschreiben (Immutability). | +
Pick<T, K> |
+ Pick<User, "id" | "email"> |
+ Wählt nur bestimmte Schlüssel aus T aus. |
+
Omit<T, K> |
+ Omit<User, "passwordHash"> |
+ Entfernt bestimmte Schlüssel aus T. |
+
Record<K, T> |
+ Record<string, number> |
+ Erstellt typisierte Key-Value Maps / Dictionaries. | +
aufgabe.js