JavaScript

Früher war JS nur für kleine Spielereien ("Lauftext in der Statusleiste") da. Heute ist es ein Kraftwerk. Es gibt riesige Frameworks (Baukästen), mit denen man ganze Apps baut:

1. React (von Facebook): Für hochdynamische UIs (Instagram, Airbnb).
2. Angular (von Google): Für große Unternehmens-Software.
3. Vue.js: Einsteigerfreundlich und flexibel.

Und mit Node.js läuft JavaScript jetzt sogar auf Servern (Backend). Du kannst also mit einer Sprache Frontend (Browser) und Backend (Server) programmieren ("Full Stack").

Praxisroutine

In der Praxis lernst du JavaScript, indem du mit einem kleinen, kontrollierten Beispiel beginnst. Baue zuerst einen Minimalfall, prüfe das Ergebnis, veraendere genau eine Sache und beobachte, was sich ändert. Notiere dir Eingabe, Aktion, Ausgabe und typischen Fehler.

Übung: Erstelle ein Beispiel aus deinem Alltag, fuehre den Ablauf gedanklich Schritt für Schritt durch und markiere die Stelle, an der du Feedback oder ein Log brauchst. Wenn du diese Stelle benennen kannst, verstehst du den Begriff praktisch.

1. Single Threaded & Event Loop

JavaScript kann (eigentlich) nur eine Sache gleichzeitig tun (Single Threaded). Wenn es rechnet "1+1", kann es nicht gleichzeitig auf einen Mausklick reagieren. Der Trick: Der Event Loop. Schwere Aufgaben (z. B. "Lade Daten vom Server") werden an den Browser delegiert ("Web API"). JS sagt: "Sag mir Bescheid, wenn du fertig bist, ich mach solange was anderes." Sobald die Daten da sind, wird eine Callback-Funktion aufgerufen. So blockiert die Seite nie, obwohl nur ein Thread läuft (Asynchronität / Promises / Async-Await).

2. Typisierung (Dynamisch vs. Statisch)

JS ist schwach typisiert. var x = 5; (Zahl) x = "Hallo"; (Text) Das ist in JS erlaubt. In strengen Sprachen (Java, C++) würde das Programm abstürzen. Das macht JS flexibel, aber fehleranfällig ("Warum rechnet er '5' + 5 = '55' statt 10?"). Deshalb nutzen Profis TypeScript (JS mit strengen Typen).

1. The Event Loop und Microtask Queue

JS hat die Call Stack und den Web API (oder Node.js libuv) Handler für Async-Calls (z.B. setTimeout(fn, 0)). Wenn der Call Stack leer ist, pumpt der Event Loop die Tasks aus der Macrotask Queue in den Call Stack. Aber als Promises (für Fetch, Async/Await) dazukamen, reichte das nicht. Sie bilden die privilegierte Microtask Queue. Architektur-Gotcha: Der Event Loop priorisiert immer die Microtasks vor den Macrotasks. Sendest du 10.000 Promises in einer Schleife ab, wird die Microtask-Queue nie leer. Ein simples setTimeout (Macrotask) für die UI-Aktualisierung wird auf ewig verhungern (Starvation). Die Seite friert komplett ein, obwohl der Async-Code eigentlich "nicht-blockierend" war.

2. Prototypal Inheritance vs Class Syntax

class User {} in JS (ES6) ist pure Illusion ("Syntactic Sugar"). Im Hintergrund betreibt die V8-Engine weiterhin klassenlose Prototypal Inheritance. Jedes Objekt (Funktion in JS) speichert einen Link auf sein Elterobjekt in dem versteckten Attribut __proto__ (der Prototype Link). Wenn du user.getName() aufrufst, sucht JS zuerst am Objekt selbst. Wenn nicht vorhanden, referenziert es das Elterobjekt, dann das Großelternobjekt, bis es bei der null Root ankommt (Prototype Chain). Verändert man den Prototypen zur Laufzeit (User.prototype.age = 20), erhalten schlagartig alle existierenden Kind-Instanzen diese neue Eigenschaft (Memory-effizient, aber hochgefährlich bei Pollution).

3. Closure und Memory Leaks

Ein Scope speist Variablen ein. Wenn die innere Funktion am Ende der Elternfunktion zurückgegeben wird (return innerFn), kapselt sie den äußeren Zustand dauerhaft mit ein (Die Closure). closures sind genial für private Variablen (const bankAccount = (function(){ let balance = 0; return { deposit(){...} }})()). Der Nachteil: Der Garbage Collector darf Variablen im Eltern-Scope solange nicht im RAM zerstören, wie die Child-Closure existiert. Registrierst du am DOM einen .addEventListener('click', () => do(largeData)), und entfernst den Event-Listener (Closure) beim 페이지wechsel nicht manuell (removeEventListener), explodiert der Arbeitsspeicher (Memory Leak in SPA React/Angular Apps).