Was ist Memoization und wie implementierst du sie?

Question

Accepted Answer

**Memoization** speichert die Ergebnisse einer Funktion in einem Cache mit Schlüsseln basierend auf ihren Argumenten, sodass wiederholte Aufrufe mit denselben Eingaben das gecachte Ergebnis sofort zurückgeben anstatt neu zu berechnen. Sie tauscht **Speicher gegen Geschwindigkeit** aus und funktioniert nur für **reine** Funktionen (gleiche Eingabe → gleiche Ausgabe, keine Nebenwirkungen).

## Ein generischer memoize-Wrapper

```js
function memoize(fn) {
  const cache = new Map();
  return (...args) => {
    const key = JSON.stringify(args); // build a cache key from the arguments
    if (cache.has(key)) {
      return cache.get(key);          // cache hit — skip the work
    }
    const result = fn(...args);
    cache.set(key, result);
    return result;
  };
}

const slowSquare = n => { /* expensive */ return n * n; };
const fastSquare = memoize(slowSquare);
fastSquare(4); // computes → 16
fastSquare(4); // cached → 16 instantly
```

## Ein klassischer Gewinn: rekursives Fibonacci

```js
const fib = memoize(n => (n < 2 ? n : fib(n - 1) + fib(n - 2)));
// turns exponential O(2^n) into roughly O(n) by caching subproblems
```

## Warum es wichtig ist

- **Cache-Schlüssel-Strategie**: `JSON.stringify` scheitert bei Funktionen, und die Schlüsselreihenfolge ist bei Objekten wichtig. Für Objektargumente vermeidet eine `WeakMap` (mit Referenzen als Schlüssel) Speicherlecks.
- **Unbegrenztes Wachstum**: der Cache schrumpft nie — verwende einen **LRU**-Cache für langlebige Prozesse.
- Memoisiere nur, wenn die Neuberechnung wirklich teuer ist und sich die Eingaben wiederholen.

## Trade-offs und Vorbehalte

Memoization ist überall: React's `useMemo`/`React.memo`, Reselect-Selektoren, dynamische Programmierung.

Das Konzept (reine Ergebnisse nach Eingabe cachen) ist gleich; die Kunst liegt darin, den Schlüssel zu wählen und den Cache zu begrenzen.