JavaScript Academy · Lektion

Reine Funktionen und Seiteneffekte

Schreiben Sie vorhersehbare, testbare Funktionen.

Reine Funktionen und Seiteneffekte ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was eine Funktion rein macht

Eine reine Funktion hat zwei Eigenschaften: Bei denselben Eingaben liefert sie immer dieselbe Ausgabe, und sie verursacht keine beobachtbaren Seiteneffekte. Reine Funktionen sind vorhersehbar und einfach zu testen.

function add(a, b) {
  return a + b;
}
console.log(add(2, 3));
console.log(add(2, 3)); // always 5

Deterministische Ausgabe

Reinheit bedeutet Determinismus. Dieselben Argumente müssen immer dasselbe Ergebnis liefern, ohne von verborgenem Zustand, der Zeit oder Zufallswerten abzuhängen.

function double(n) {
  return n * 2;
}
console.log(double(10)); // always 20

Was ist ein Seiteneffekt

Ein Seiteneffekt ist alles, was eine Funktion über die Rückgabe eines Werts hinaus tut: Protokollieren, Ändern eines externen Zustands, Schreiben in den Speicher, Netzwerkaufrufe oder Ändern ihrer Argumente.

let total = 0;
function impureAdd(n) {
  total += n;     // side effect: mutates outer state
  return total;
}
console.log(impureAdd(5));
console.log(impureAdd(5)); // 5 then 10, not pure

Abhängigkeit von externem Zustand

Auch das Lesen eines veränderlichen externen Zustands verletzt die Reinheit, da sich die Ausgabe ändert, obwohl das Argument gleich bleibt.

let rate = 1.5;
function priceImpure(x) {
  return x * rate; // depends on outside variable
}
console.log(priceImpure(10)); // 15
rate = 2;
console.log(priceImpure(10)); // 20 - different result

Eine Funktion rein machen

Übergeben Sie alles, was die Funktion benötigt, als Argumente. Ihr Ergebnis hängt dann nur noch von den Eingaben ab.

function price(x, rate) {
  return x * rate;
}
console.log(price(10, 1.5)); // 15
console.log(price(10, 2));   // 20

Das Ändern von Argumenten ist nicht rein

Das Ändern eines übergebenen Objekts oder Arrays ist ein Seiteneffekt, den der Aufrufer beobachten kann. Reine Funktionen verändern ihre Eingaben nicht.

function impurePush(arr, x) {
  arr.push(x);   // mutates caller array
  return arr;
}
const a = [1, 2];
impurePush(a, 3);
console.log(a); // [1, 2, 3] - caller changed

Neue Werte zurückgeben

Eine reine Variante erstellt und gibt einen neuen Wert zurück, anstatt die Eingabe zu verändern.

function pureAppend(arr, x) {
  return [...arr, x];
}
const a = [1, 2];
const b = pureAppend(a, 3);
console.log(a); // [1, 2] unchanged
console.log(b); // [1, 2, 3]

Warum Reinheit hilfreich ist

Reine Funktionen lassen sich ohne Weiteres testen (kein Setup, keine Mocks), sicher zwischenspeichern (Memoisierung) und in beliebiger Reihenfolge oder parallel ausführen. Sie machen die Überlegungen zum Code lokal.

function square(n) { return n * n; }
console.log([1, 2, 3].map(square)); // [1, 4, 9]

Unreinheit isolieren

Sie können nicht alle Seiteneffekte vermeiden; Anwendungen müssen protokollieren, Daten abrufen und rendern. Das Ziel besteht darin, Effekte an die Ränder zu verschieben und die Kernlogik rein zu halten.

function computeTotal(items) {
  return items.reduce((s, i) => s + i.price, 0);
}
const total = computeTotal([{ price: 5 }, { price: 7 }]);
console.log(total); // 12 - pure core, log at the edge

Referenzielle Transparenz

Ein reiner Aufruf kann durch sein Ergebnis ersetzt werden, ohne das Verhalten zu ändern. add(2, 3) ist überall austauschbar mit 5. Diese Eigenschaft wird referenzielle Transparenz genannt.

function add(a, b) { return a + b; }
const x = add(2, 3) + add(2, 3);
const y = 5 + 5;
console.log(x === y); // true

Unreinheit erkennen

Achten Sie auf Hinweise wie console, Math.random, Date.now, Zuweisungen an äußere Variablen oder das Ändern von Argumenten. Jedes dieser Merkmale macht eine Funktion unrein.

function pureRoll(seed) {
  return (seed * 1103515245 + 12345) % 100;
}
console.log(pureRoll(42)); // deterministic, testable

Kurzer Check

Reine Funktionen erkennen.

Zusammenfassung

Reine Funktionen sind deterministisch und frei von Seiteneffekten: keine Änderungen am externen Zustand, keine Ein-/Ausgabe und keine Änderungen an Argumenten. Übergeben Sie Abhängigkeiten als Argumente und geben Sie neue Werte zurück, statt etwas zu verändern. Reinheit ermöglicht Testbarkeit, Memoisierung, referenzielle Transparenz und sichere parallele Ausführung. Halten Sie den Kern rein und verschieben Sie Effekte an die Ränder.

Häufig gestellte Fragen

Ist die Lektion „Reine Funktionen und Seiteneffekte“ kostenlos?

Ja — der vollständige Text von „Reine Funktionen und Seiteneffekte“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des JavaScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Reine Funktionen und Seiteneffekte“?

Schreiben Sie vorhersehbare, testbare Funktionen. Du übst JavaScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um JavaScript Academy zu starten?

Keine Vorkenntnisse erforderlich. JavaScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „Reine Funktionen und Seiteneffekte“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser JavaScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede JavaScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu JavaScript Academy