Fortgeschrittene Funktionen
Closures, Callbacks und Higher-Order Functions sind die Muster hinter fast jedem JavaScript-Framework.
Ansicht
01
Verstehen
Lies die Kernidee und das Beispiel.
02
Prüfen
Beantworte die Aktiv-Checks.
03
Anwenden
Setze die Transferaufgabe um.
Lerninhalt
Verstehen & anwenden
Closures
Eine Funktion behält Zugriff auf die Variablen ihres Entstehungsorts — auch nachdem die äussere Funktion beendet ist.
Damit lassen sich private Zustände bauen, etwa ein Zähler ohne globale Variable.
function erstelleZähler() {
let stand = 0;
return () => {
stand += 1;
return stand;
};
}
const zähle = erstelleZähler();
zähle(); // 1
zähle(); // 2Higher-Order Functions
Funktionen, die Funktionen entgegennehmen oder zurückgeben, heißen Higher-Order Functions.
map, filter und addEventListener funktionieren genau so: Du übergibst Verhalten als Wert.
Debounce
Debounce verzögert einen Aufruf, bis eine Ruhepause eintritt — etwa bei Suchfeldern, damit nicht jeder Tastendruck eine Anfrage schickt.
Das Muster kombiniert Closure und Timer.
function debounce(fn, delay) {
let timerId;
return (...args) => {
clearTimeout(timerId);
timerId = setTimeout(() => fn(...args), delay);
};
}Vertiefung
Closures halten Zustand
Eine Closure ist eine Funktion, die Variablen aus ihrem Entstehungskontext behält. So lassen sich private Zähler und Konfigurationen bauen, ohne globale Variablen zu verschmutzen.
Higher-Order Functions nehmen Funktionen entgegen oder geben sie zurück. Debounce ist ein klassisches Beispiel: Es speichert den Timer in einer Closure.
function zaehler() {
let stand = 0;
return () => ++stand;
}
const next = zaehler();
next(); // 1
next(); // 2Merksatz: Closures machen Zustand privat und wiederverwendbar. Jede erzeugte Funktion hat ihren eigenen Zustand.
Übungsaufgabe
Debounce-Suche
Schreibe eine debounce-Funktion, die eine Suchfunktion erst nach 300 ms Ruhe aufruft. Teste sie mit mehreren schnellen Aufrufen.
Das soll dein Programm können
- Closure für timerId
- clearTimeout und setTimeout
- Rest-Parameter ...args
- Rückgabe einer Funktion
Schreibe den Code hier oder in deiner IDE und vergleiche ihn dann mit der Lösung.
Dein Code wird automatisch auf diesem Gerät gespeichert.
Hinweis anzeigen
Die zurückgegebene Funktion muss den alten Timer löschen, bevor sie einen neuen setzt.
Lösung anzeigen
function debounce(fn, delay) {
let timerId;
return (...args) => {
clearTimeout(timerId);
timerId = setTimeout(() => fn(...args), delay);
};
}
const suche = debounce((begriff) => console.log("Suche:", begriff), 300);
suche("j");
suche("ja");
suche("java");Warum funktioniert das?
Jeder Aufruf setzt den Timer zurück. Nur der letzte Aufruf nach 300 ms Ruhe wird ausgeführt; die früheren werden verworfen.
Aktiv-Check
Teste dein Verständnis
Erkennen: Welcher Abschnitt passt?
Welcher Abschnitt passt zu diesen Begriffen?
Transfer
Mini-Projekt: Der Lernzähler
Baue einen kleinen Zähler, der bei jedem Klick hochzählt und den Wert im DOM anzeigt. Erweitere ihn um einen Reset-Button.
Selbstcheck
Kann ich das schon?
Hake ab, was du wirklich erklären oder selbst bauen könntest.
Fortschritt
Bereit zum Abschließen?
Markiere die Lektion als abgeschlossen, um XP und Streak zu erhalten.