JavaScript

Fortgeschrittene Funktionen

Closures, Callbacks und Higher-Order Functions sind die Muster hinter fast jedem JavaScript-Framework.

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.

Zähler mit Closure

function erstelleZähler() {
  let stand = 0;
  return () => {
    stand += 1;
    return stand;
  };
}

const zähle = erstelleZähler();
zähle(); // 1
zähle(); // 2

Higher-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.

<higher-order><callback>

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.

Debounce

function debounce(fn, delay) {
  let timerId;
  return (...args) => {
    clearTimeout(timerId);
    timerId = setTimeout(() => fn(...args), delay);
  };
}

Fortschritt

Markiere die Lektion als abgeschlossen, um XP und Streak zu erhalten.