Funktionen und Closures in JavaScript verstehen

Eine Funktion gibt einer Aufgabe einen Namen und speichert die Anweisungen zu ihrer Ausführung. Das Definieren führt diese Anweisungen nicht aus. Ein Aufruf führt sie aus und ein weiterer Aufruf führt sie mit neuen Eingaben erneut aus.

Schreibe die Definition

Eine Deklaration enthält das Schlüsselwort function, einen Namen, runde Klammern für Parameter und geschweifte Klammern für den Rumpf:

function greet(name) {
  console.log("Hello, " + name + "!");
}

Hier ist name ein Parameter: ein lokaler Name für die Eingabe, die jeder Aufruf liefert. Der Rumpf verbindet diese Eingabe mit dem umgebenden Text und gibt das Ergebnis aus. Die schließende geschweifte Klammer markiert das Ende der Definition; die Ausführung wird mit der nächsten Anweisung außerhalb fortgesetzt.

Auch eine Funktion ohne Eingaben braucht runde Klammern. Beispielsweise definiert function sayHi() { console.log("Hi"); } eine Aufgabe mit leerer Parameterliste. Die geschweiften Klammern gehören zur Definition; die runden Klammern nach einem Namen stehen sowohl in Definitionen als auch in Aufrufen und haben dort unterschiedliche Aufgaben.

Führe die Aufgabe aus

greet("Amira");
greet("Li");

Der erste Aufruf gibt name den Wert "Amira" und gibt „Hello, Amira!“ aus. Der zweite beginnt einen neuen Aufruf mit name gleich "Li" und gibt „Hello, Li!“ aus. Die Definition wird gemeinsam genutzt; die Eingabe gehört zum jeweiligen Aufruf.

greet allein verweist auf den Funktionswert. Es führt den Rumpf nicht aus. Dieser Unterschied ist wichtig, wenn eine Zeile scheinbar nichts bewirkt: sayHi; liest einen Funktionswert und verwirft ihn, während sayHi(); „Hi“ ausgibt.

Ersetze kopierte Anweisungen

Angenommen, mehrere Berichte benötigen eine Überschrift zwischen Trennlinien:

function printHeading(title) {
  console.log("-----");
  console.log(title);
  console.log("-----");
}

printHeading("Report");
printHeading("Totals");

Der erste Aufruf gibt eine Linie, „Report“ und eine weitere Linie aus. Der zweite gibt denselben Rahmen um „Totals“ aus. Um die Art der Linien zu ändern, bearbeite die beiden Anweisungen zur Linienausgabe in dieser einen Definition. Ohne die Funktion müsste jede kopierte Überschrift einzeln korrigiert werden.

Wähle einen Namen, der beschreibt, was ein Aufruf tut. printHeading beschreibt eine Aktion; isValidEmail benennt eine Ja-Nein-Prüfung. Verwende camelCase, mit einem kleingeschriebenen ersten Wort und großgeschriebenen Anfängen der folgenden Wörter. Verbindet ein vorgeschlagener Name zwei getrennte Aufgaben mit „und“, überlege, jeder Aufgabe eine eigene Funktion zu geben.

Lies Code, der eine Deklaration früh aufruft

Deklarationen werden eingerichtet, bevor der umgebende Code ausgeführt wird. Dieses Verhalten heißt Hoisting:

sayHi();
function sayHi() {
  console.log("Hi");
}

Der Aufruf funktioniert innerhalb des Gültigkeitsbereichs der Deklaration, obwohl die geschriebene Definition später folgt. Hoisting führt den Rumpf nicht früher aus; es stellt die Funktion für einen Aufruf bereit.

Prüfe Schreibweise sowie Groß- und Kleinschreibung, wenn ein Aufruf fehlschlägt. Greet() und greet() sind verschiedene Namen. Der Aufruf eines nicht deklarierten greeet() löst einen ReferenceError aus; fehlen die Klammern des Aufrufs, kann der Fehler unbemerkt bleiben, weil das bloße Lesen einer vorhandenen Funktion gültiger Code ist.

Funktionen sind Werte. Du kannst eine Funktion in einer Variablen speichern, ihre Referenz kopieren, sie an eine andere Funktion übergeben oder zurückgeben. Ein Funktionsausdruck erzeugt diesen Wert dort, wo ein Ausdruck erwartet wird.

Speichere eine Funktion

const square = function (n) {
  return n * n;
};

const answer = square(4);

Der Ausdruck nach = erzeugt eine Funktion. Die Zuweisung speichert sie in square; der spätere Aufruf gibt 16 zurück. Diese Anweisung endet entsprechend der hier verwendeten Formatierungskonvention mit einem Semikolon.

Die Position von function unterscheidet die Formen. Eine als eigenständiges function square(n) { ... } geschriebene Definition ist eine Deklaration. Eine Funktion nach = oder direkt als Argument eines Aufrufs ist ein Ausdruck. Beide gewöhnlichen Funktionsformen können Parameter entgegennehmen und Werte zurückgeben.

Verwende const für eine Funktionsvariable, wenn ihr Wert gleich bleiben soll. Der Aufruf square(5) ist erlaubt; die Zuweisung square = 5; löst einen TypeError aus. Die Konstante schützt die Variable vor dem Ersetzen. Wiederholte Aufrufe verhindert sie nicht.

Speichere eine Funktion oder ihr Ergebnis

const sq = square;
const result = square(3);

sq verweist auf dieselbe Funktion wie square. Der Aufruf sq(3) gibt 9 zurück. result enthält die Zahl 9, die ein Aufruf zurückgegeben hat. Sie kann nicht als Funktion aufgerufen werden. typeof square und typeof sq ergeben "function"; typeof result ergibt "number".

Es hilft, eine Zuweisung von rechts nach links zu lesen: Entscheide zuerst, ob ihre rechte Seite eine Funktion erzeugt, auf eine vorhandene Funktion verweist oder eine Funktion aufruft. Die Variable links erhält diesen Wert. Das Kopieren der Referenz erzeugt keine zweite unabhängige Implementierung.

Warte, bis die Zuweisung ausgeführt wird

Eine Deklaration und ein gespeicherter Ausdruck sind zu unterschiedlichen Zeiten aufrufbar:

Bei const oder let kann der Name vor der Initialisierung nicht verwendet werden. Bei var existiert der Name früh, der Funktionswert wird aber erst zugewiesen, wenn die Ausführung den Ausdruck erreicht. Das Hoisting der Variablen bewirkt kein Hoisting der Zuweisung.

Gib einem Ausdruck einen internen Namen

const factorial = function fact(n) {
  return n <= 1 ? 1 : n * fact(n - 1);
};

Der äußere Name ist factorial. Der Name fact gehört in die Funktion und ermöglicht ihr, sich selbst aufzurufen; Code außerhalb kann diesen internen Namen nicht direkt verwenden. Der Name des Ausdrucks kann auch Stacktraces leichter lesbar machen. Beispielsweise berechnet factorial(3) 3 mal 2 mal 1 und gibt 6 zurück.

Deklarationen eignen sich gut für die wichtigsten benannten Aufgaben in einem Skript. Ausdrücke passen an Stellen, an denen Code einen Funktionswert benötigt, etwa bei einer Variablenzuweisung oder einem Argument. Die Wahl eines Ausdrucks ändert, wie der Wert erzeugt und gespeichert wird, nicht aber, wie er mit runden Klammern aufgerufen wird.

Pfeilfunktionen sind Funktionsausdrücke mit einer kürzeren Schreibweise. Ihr Rückgabeverhalten hängt davon ab, was auf den Pfeil folgt. Sieh dir daher den Rumpf an, bevor du entscheidest, was ein Aufruf liefert.

Wähle die Parameterform

const sayHi = () => "hi";
const double = n => n * 2;
const add = (a, b) => a + b;

Ohne Parameter sind leere Klammern erforderlich. Bei einem einfachen Parameter dürfen die Klammern entfallen. Bei zwei oder mehr sind sie erforderlich. Auch ein Standard- oder Restparameter braucht Klammern: (n = 1) => n * 2 und (...nums) => nums.length sind zulässig.

Der Pfeil trennt die Eingaben vom Rumpf. const double = n => n * 2; erzeugt die Funktion und speichert sie; double(6) ruft sie später auf und gibt 12 zurück. Wie jede mit const gespeicherte Funktion aus einem Funktionsausdruck kann double nicht gelesen werden, bevor seine Initialisierungszeile ausgeführt wird.

Gib einen Ausdruck zurück oder schreibe einen Block

Ein Ausdrucksrumpf gibt seinen Ausdruck automatisch zurück. Geschweifte Klammern beginnen einen Block aus Anweisungen. In einem Block gibt das Auswerten eines Ausdrucks ihn nicht an den aufrufenden Code zurück; schreibe return ausdrücklich.

Verwende einen Block, wenn die Aufgabe Zwischenschritte braucht:

const describe = (n) => {
  const kind = n % 2 === 0 ? "even" : "odd";
  return n + " is " + kind;
};

Für describe(7) ist die Bedingung falsch, sodass kind zu "odd" wird. Die Rückgabe verbindet dann die Zahl und die Wörter zu „7 is odd“. Würdest du diese Rückgabe entfernen, bliebe die lokale Berechnung bestehen, aber der aufrufende Code erhielte undefined.

Gib ein Objektliteral zurück

Ein Objektliteral verwendet ebenfalls geschweifte Klammern. Setze es in runde Klammern, damit der Parser es als Ausdruck behandelt:

const makePoint = (x, y) => ({ x: x, y: y });

makePoint(2, 5) gibt ein Objekt zurück, dessen x gleich 2 und dessen y gleich 5 ist. Ohne die runden Klammern beginnt die erste geschweifte Klammer einen Block. Die Form mit einer Eigenschaft () => { value: 1 } gibt undefined zurück; die ähnliche Form mit zwei Eigenschaften und einem Komma führt zu einem Syntaxfehler. Die runden Klammern ändern, wie der Rumpf gelesen wird.

Kenne die Grenzen der kürzeren Form

Pfeilfunktionen haben kein eigenes this oder arguments und können nicht mit new aufgerufen werden, um Objekte zu konstruieren. Bei einer einfachen Berechnung, die weder this noch arguments verwendet, verhalten sich eine Pfeilfunktion und ein gewöhnlicher Funktionsausdruck gleich. Ersetzt du jede gewöhnliche Funktion durch eine Pfeilfunktion, kann sich Code ändern, der von diesen Eigenschaften abhängt.

Kurze Pfeilfunktionen sind als Callbacks besonders gut lesbar. [1, 2, 3].map(n => n * 10) übergibt eine Funktion, die ein transformiertes Element zurückgibt, und erzeugt [10, 20, 30]. Änderst du sie zu n => { n * 10; }, geht jeder Rückgabewert unbemerkt verloren.

Die Parameter einer Funktion geben den von einem Aufruf gelieferten Werten Namen. Um einen Aufruf nachzuvollziehen, ordne zuerst die Eingaben nach ihrer Position zu und verfolge dann die Operationen im Rumpf.

Ordne Positionen und Typen zu

function area(width, height) {
  return width * height;
}

area(4, 2.5);

width und height sind Parameter; 4 und 2,5 sind Argumente. Während dieses Aufrufs enthält width den Wert 4 und height den Wert 2,5, sodass das Ergebnis 10 ist. Parameternamen werden nicht mit Variablennamen des aufrufenden Codes abgeglichen. Bei divide(a, b) ändert das Vertauschen von divide(10, 2) zu divide(2, 10) das Ergebnis von 5 auf 0,2.

JavaScript schreibt die Anzahl der Argumente nicht vor. area(4) belässt height bei undefined; die Multiplikation damit ergibt NaN. area(4, 2, 99) gibt 8 zurück, weil dieser Rumpf das dritte Argument nicht verwendet. Eine Funktion kann zusätzliche Argumente sammeln, aber ungenutzte zusätzliche Argumente verursachen nicht automatisch einen Fehler.

Auch die Typen sind wichtig, selbst wenn der Aufruf akzeptiert wird. area("4", 2) gibt 8 zurück, weil die Multiplikation den Text umwandelt. Eine Additionsfunktion verhält sich anders: add("4", 2) gibt „42“ zurück, wenn ihr Rumpf return a + b; lautet. Stellt Text eine Zahl dar, gibt add(Number("4"), 2) den Wert 6 zurück.

Weise einem lokalen Parameter einen neuen Wert zu

Jeder Parameter ist lokal für seinen Aufruf. Weist du ihm eine neue Zahl zu, wird der Variablen des aufrufenden Codes kein neuer Wert zugewiesen:

let score = 5;
function reset(s) {
  s = 0;
}
reset(score);

Der Aufruf kopiert den Wert 5 in s. Die Zuweisung ändert s auf 0 und score bleibt 5. Zahlen, Zeichenketten und boolesche Werte folgen dieser Regel der Wertkopie. Code außerhalb kann s nicht direkt lesen; eine verschachtelte Funktion kann über eine Closure Zugriff darauf behalten.

Ändere ein Array über eine kopierte Referenz

Ein Arraywert ist eine Referenz auf ein Array. Beim Übergeben dieses Werts wird die Referenz kopiert, sodass der aufrufende Code und der Parameter auf dasselbe Array zugreifen können:

const list = [1, 2];
function addItem(arr) {
  arr.push(3);
}
addItem(list);

list ist nun [1, 2, 3]. Die Funktion hat list keinen neuen Wert zugewiesen; sie hat das Array geändert, auf das beide Namen zugreifen. Eine const-Deklaration verhindert das Ersetzen ihrer gespeicherten Referenz, nicht aber das Ändern des Arrayinhalts.

Vergleiche eine lokale Neuzuweisung:

function clearLocal(arr) {
  arr = [];
}
clearLocal(list);

Dadurch verweist nur arr auf ein neues leeres Array. list greift weiterhin auf [1, 2, 3] zu. Frag dich, ob eine Operation ein vorhandenes Array ändert, wie push, oder einem Namen einen anderen Wert zuweist, wie =.

Gib ein neues Array zurück, wenn die Eingabe erhalten bleiben soll

function withItem(arr, item) {
  return arr.concat(item);
}

withItem([1, 2], 3) erzeugt [1, 2, 3] als neues Array. Das Eingabearray bleibt [1, 2]. Das macht die Funktion nützlich, wenn der aufrufende Code sowohl die alte als auch die erweiterte Liste benötigt. Mache durch Namen und Verhalten einer Funktion deutlich, welche Änderungen sie an ihrer Eingabe vornehmen soll, damit aufrufender Code sie erwartungsgemäß nutzen kann.

Standardwerte machen eine Eingabe optional; Restparameter erlauben es einem Aufruf, viele Eingaben zu übergeben. Die Spread-Syntax verbindet ein vorhandenes Array mit einer Funktion, die einzelne Argumente erwartet.

Verwende einen Standardwert nur bei undefined

function greet(name = "friend") {
  return "Hello, " + name;
}

Sowohl greet() als auch greet(undefined) geben „Hello, friend“ zurück. greet(null) gibt „Hello, null“ und greet("") gibt „Hello, “ zurück. Ein Standardwert prüft auf undefined, nicht auf jeden Wert, der leer aussieht.

Standardwerte werden ausgewertet, wenn ein Aufruf sie benötigt. Sie dürfen frühere Parameter verwenden: function makeBox(width, height = width) { return width * height; } gibt für makeBox(3) den Wert 9 und für makeBox(3, 4) den Wert 12 zurück. Das ausdrücklich angegebene zweite Argument ersetzt für diesen Aufruf den Standardwert.

Setze erforderliche Eingaben an den Anfang. Bei function total(amount, rate = 0.25) { return amount + amount * rate; } gibt total(80) den Wert 100 und total(80, 0.5) den Wert 120 zurück. Würden die Parameter vertauscht, wäre für den üblichen Aufruf mit Standardsatz total(undefined, 80) nötig.

Älterer Code verwendet möglicherweise level = level || 50;. Das ersetzt auch 0, false und eine leere Zeichenkette, weil sie Falsy-Werte sind. Ein Standardparameter erhält diese Werte: function setVolume(level = 50) { return level; } gibt für setVolume(0) den Wert 0 und für setVolume(undefined) den Wert 50 zurück.

Sammle Argumente mit Rest

function sum(...numbers) {
  let total = 0;
  for (const n of numbers) {
    total += n;
  }
  return total;
}

sum(1, 2, 3) legt [1, 2, 3] in numbers ab und gibt 6 zurück. sum() übergibt ein leeres Array, sodass die Schleife nichts addiert und 0 zurückgibt. Ein Restparameter ist ein echtes Array und kann direkt für Arraymethoden oder Schleifendurchläufe verwendet werden.

Eine feste Eingabe kann vor Rest stehen: In function log(label, ...values) { console.log(label, values); } gibt log("scores", 7, 9) dem Parameter label die Zeichenkette „scores“ und values das Array [7, 9]. Nur ein Restparameter ist erlaubt und er muss zuletzt stehen; andernfalls kann JavaScript die übrigen Argumente mit dieser Syntax nicht eindeutig zuordnen.

Entfalte Argumente mit Spread

Math.max(...[3, 7, 2]) erhält drei Zahlen und gibt 7 zurück. Math.max([3, 7, 2]) erhält ein Array und gibt NaN zurück. Die drei Punkte sehen im Code gleich aus, aber die umgebende Syntax zeigt dir, welche Aufgabe sie erfüllen.

Gewöhnliche Funktionen haben auch ein arguments-Objekt, das die an sie übergebenen Argumente enthält. Es ist arrayähnlich und hat indizierte Einträge und eine Länge, ist aber kein echtes Array und hat keine eigenen Methoden map oder filter. Pfeilfunktionen haben kein eigenes arguments. Bevorzuge für neuen Code, der eine flexible Liste von Eingaben benötigt, einen Restparameter.

Ein Rückgabewert ist die Ausgabe, die anderer Code von einem Aufruf erhält. Eine Ausgabe auf dem Bildschirm kann denselben Wert anzeigen, liefert dem aufrufenden Code aber ein anderes Ergebnis, sofern die Funktion ihn nicht auch zurückgibt.

Verwende den Aufruf als Wert

function double(n) {
  return n * 2;
}
const x = double(5) + 1;

double(5) gibt 10 zurück, sodass die Zuweisung 10 plus 1 berechnet und 11 speichert. Ein Aufruf kann überall dort stehen, wo ein passender Wert benötigt wird. double(double(3)) erhält zuerst 6 vom inneren Aufruf und gibt dann 12 vom äußeren zurück. Math.round(double(2.3)) verdoppelt auf 4,6 und rundet auf 5.

return beendet auch den aktuellen Aufruf sofort. Eine Wächterklausel (Guard Clause) behandelt einen Sonderfall vor der Hauptarbeit:

function safeDivide(a, b) {
  if (b === 0) {
    return null;
  }
  return a / b;
}

safeDivide(6, 0) gibt null zurück und erreicht die Division nie. safeDivide(6, 2) überspringt die Wächterklausel und gibt 3 zurück. Setze die Bedingung vor die Operation, die sie absichert.

Unterscheide Rückgabe und Anzeige

function addLog(a, b) {
  console.log(a + b);
}

addLog(2, 3) gibt 5 aus, aber sein Rückgabewert ist undefined. Daher gibt addLog(2, 3) * 2 den Wert 5 aus und wird zu NaN ausgewertet. Eine Funktion, die ihr Ende ohne Rückgabe erreicht oder ein alleinstehendes return; ausführt, gibt undefined zurück. Die Konsolenanzeige ist ein Seiteneffekt, nicht das nutzbare numerische Ergebnis des Aufrufs.

Wenn der aufrufende Code eine Summe benötigt, schreibe return a + b;. Der aufrufende Code kann dann entscheiden, ob er sie ausgibt, speichert oder in einer weiteren Berechnung verwendet. So bleibt die Entscheidung über die Anzeige außerhalb einer wiederverwendbaren Berechnung.

Halte den zurückgegebenen Ausdruck in derselben Zeile

function brokenAdd(a, b) {
  return
  a + b;
}

JavaScript beendet die return-Anweisung am Zeilenumbruch. Die Funktion gibt undefined zurück; der nachfolgende Ausdruck wird nie erreicht. Beginne bei einem langen Ausdruck diesen oder öffne eine Klammer in der return-Zeile und fahre dann darunter fort.

Fasse mehrere Ergebnisse in einem Wert zusammen

Ein Aufruf gibt einen Wert zurück, aber dieser Wert kann ein Array sein:

function minMax(nums) {
  return [Math.min(...nums), Math.max(...nums)];
}
const [low, high] = minMax([4, 9, 1]);

Das zurückgegebene Array ist [1, 9]. Die Destrukturierung weist seinen ersten Eintrag low und seinen zweiten high zu. Es bleibt ein Rückgabewert, der zwei nützliche Ergebnisse enthält.

Eine reine Funktion berechnet ihre Ausgabe aus ihren Argumenten und ändert außerhalb ihrer selbst nichts. double ist rein. Ausgaben, das Aktualisieren einer äußeren Variablen und das Verändern eines Eingabearrays sind Seiteneffekte. Reine Berechnungen lassen sich leicht mit Eingabe-Ausgabe-Beispielen prüfen; Seiteneffekte gehören in klar benannte Funktionen, wo das Programm sichtbare Änderungen benötigt.

Wenn eine Funktion eine andere aufruft, pausiert die aufrufende Funktion, bis dieser Aufruf zurückkehrt. Der Aufrufstapel hält die unerledigte Arbeit fest, damit die Ausführung an der richtigen Stelle fortgesetzt werden kann.

Füge Stapelrahmen hinzu und entferne sie

Jeder aktive Aufruf hat einen Stapelrahmen (Stack Frame), der seine Parameter, lokalen Variablen und die Stelle für die Rückkehr enthält. Ein neuer Aufruf kommt oben auf den Stapel; eine Rückkehr entfernt diesen obersten Rahmen.

function square(n) {
  return n * n;
}
function sumOfSquares(a, b) {
  return square(a) + square(b);
}
sumOfSquares(3, 4);

Zuerst beginnt sumOfSquares mit a gleich 3 und b gleich 4. Die Funktion ruft square(3) auf, das 9 zurückgibt und endet. Dann wird square(4) ausgeführt und gibt 16 zurück. Die pausierte Addition kann nun als 9 plus 16 abgeschlossen werden und sumOfSquares gibt 25 zurück. Die beiden Aufrufe von square überschneiden sich in diesem Ablauf nicht.

Jeder Aufruf erhält neue Parameter und lokale Variablen. Zwei Aufrufe derselben Funktion verwenden den lokalen numerischen Zustand eines früheren Aufrufs nicht erneut. Selbst wenn eine Funktion sich selbst aufruft, hat der neue Aufruf seinen eigenen Rahmen.

Verkleinere ein Problem mit Rekursion

Eine rekursive Funktion ruft sich selbst auf. Ein Basisfall endet ohne weiteren Selbstaufruf; ein rekursiver Fall macht einen Schritt auf diesen Basisfall zu.

function factorial(n) {
  if (n <= 1) {
    return 1;
  }
  return n * factorial(n - 1);
}

Für nicht negative ganzzahlige Eingaben multipliziert dies die Ganzzahlen abwärts bis 1. Verfolge factorial(4) in zwei Richtungen:

1. factorial(4) wartet auf factorial(3).
2. Dieser Aufruf wartet auf factorial(2).
3. Dieser Aufruf wartet auf factorial(1).
4. Der Basisfall gibt 1 zurück.
5. Die wartenden Aufrufe geben 2, dann 6 und dann 24 zurück.

Die Multiplikation im Aufruf mit n gleich 4 erfolgt, nachdem der kleinere Aufruf zurückgekehrt ist. Sein eigenes n ist während des Wartens 4 geblieben.

Ein Basisfall muss erreichbar sein. Nur n === 1 zu verwenden, schlägt bei einer Starteingabe von 0 fehl, wenn jeder rekursive Aufruf 1 abzieht: Die Werte werden negativ und erreichen 1 nie. n <= 1 fängt sowohl 0 als auch 1 ab. Ohne einen Pfad zum Anhalten erschöpfen die wiederholten Aufrufe den Stapel. Chrome und Node.js melden „RangeError: Maximum call stack size exceeded“; Firefox verwendet „InternalError: too much recursion“.

Erkenne eine kleinere Kopie derselben Aufgabe

function countItems(list) {
  let count = 0;
  for (const item of list) {
    if (Array.isArray(item)) {
      count += countItems(item);
    } else {
      count += 1;
    }
  }
  return count;
}

countItems([1, [2, 3], [4, [5]]]) gibt 5 zurück. Jedes verschachtelte Array stellt dieselbe Zählfrage für eine kleinere Liste. Für eine einfache Fakultätsberechnung eignet sich auch eine Schleife; Rekursion ist besonders nützlich, wenn die Daten selbst verschachtelt sind.

Schlägt ein Aufruf fehl, lies den Stacktrace vom letzten Aufruf ganz oben aus. Die folgenden Einträge zeigen, welche noch nicht abgeschlossenen Aufrufe dorthin geführt haben. Wiederholte Einträge für eine Funktion können eine Rekursion zeigen, die nicht angehalten hat.

Der Gültigkeitsbereich einer Variablen ist der Bereich, in dem ihr Name verwendet werden kann. Gültigkeitsbereiche ermöglichen es Funktionen, ihre Arbeitsdaten getrennt zu halten und zugleich Eingaben und Werte aus dem umgebenden Code zu verwenden.

Ziehe Grenzen um Deklarationen

let und const haben einen Blockgültigkeitsbereich. Ein Block ist ein Bereich innerhalb geschweifter Klammern, etwa ein if-Rumpf, ein Schleifenrumpf oder ein Funktionsrumpf:

if (true) {
  const msg = "hi";
  console.log(msg);
}

Die Ausgabe funktioniert innerhalb des Blocks. Fügst du console.log(msg); danach hinzu, löst dies einen ReferenceError aus, weil dieser äußere Code nicht auf die Deklaration zugreifen kann. Eine andere äußere Deklaration mit demselben Namen wäre eine andere Variable.

Parameter und Variablen innerhalb einer Funktion sind lokal für diese Funktion. In function f() { let temp = 1; } kann Code außerhalb temp nicht lesen. Zwei Funktionen können jeweils ein lokales total haben, ohne es zu teilen. Jeder Aufruf beginnt mit neuen lokalen Variablen; eine zurückgegebene verschachtelte Funktion kann den Zugriff später über eine Closure erhalten.

Lies ältere var-Deklarationen

function test() {
  if (true) {
    var x = 1;
  }
  return x;
}

test() gibt 1 zurück, weil var die Grenze des if-Blocks ignoriert. Ersetzt du es durch let x = 1;, schlägt die Rückgabe fehl: Das x des Blocks ist dort nicht verfügbar. Ebenso hält for (let i = 0; i < 3; i++) {} das i innerhalb der Schleife, während ein var i nach der Schleife in seiner umschließenden Funktion oder seinem Skript verfügbar bleibt und 3 enthält.

Suche von der geschriebenen Position der Funktion aus nach außen

Gültigkeitsbereiche sind verschachtelt. Eine innere Funktion kann Namen in ihren umschließenden Gültigkeitsbereichen verwenden, aber äußerer Code kann nicht nach innen in die lokalen Variablen einer inneren Funktion suchen. Das ist der lexikalische Gültigkeitsbereich: Die Stelle, an der der Code geschrieben steht, bestimmt die verfügbaren Namen.

const level = "global";
function show() {
  return level;
}
function run() {
  const level = "local";
  return show();
}

run() gibt „global“ zurück. show wurde außerhalb von run definiert, sodass sein umschließender Gültigkeitsbereich das äußere level enthält. Der Aufruf innerhalb von run gibt der Funktion keinen Zugriff auf das lokale level des aufrufenden Codes.

Setze gemeinsam genutzten Zustand bewusst ein

Eine Variable auf oberster Ebene in einem gewöhnlichen Skript ist global und für Funktionen innerhalb dieses Skripts erreichbar. Gemeinsam genutzte globale Variablen können dazu führen, dass unabhängige Aufgaben einander beeinflussen; auch Skripte auf derselben Seite können wegen gleicher Namen in Konflikt geraten. Die Übergabe von Eingaben und die Rückgabe von Ausgaben machen Abhängigkeiten sichtbar.

Deklariere jede Variable. Im strikten Modus löst count = 5; einen ReferenceError aus, wenn keine erreichbare Deklaration existiert. Ohne strikten Modus kann eine solche Zuweisung versehentlich eine globale Variable erzeugen. Ein Skript kann den strikten Modus mit "use strict"; an seinem Anfang aktivieren; Module aktivieren ihn automatisch. Bevorzuge const für Werte, denen kein neuer Wert zugewiesen wird, und let, wenn eine Neuzuweisung nötig ist.

Derselbe Name kann in mehreren Gültigkeitsbereichen vorkommen. JavaScript findet die passende Deklaration, indem es vom aktuellen Code aus nach außen sucht und beim ersten Treffer anhält.

Verfolge die Gültigkeitsbereichskette

let x = 1;
function f() {
  let x = 2;
  return x;
}

f() gibt 2 zurück. Die lokale Deklaration verdeckt das äußere x, sodass die Suche innerhalb von f endet. Der äußere Wert bleibt 1. Ein Parameter kann einen Namen auf dieselbe Weise verdecken. Deklariert kein Bereich der Kette einen Namen, löst sein Lesen einen ReferenceError aus.

Eine Zuweisung deklariert keine neue Variable. Bei let count = 0; function add() { count = count + 1; } findet add die äußere Deklaration und ändert sie. Das Einfügen von let ändert die Bedeutung: Es erzeugt einen neuen lokalen Namen, der genau den Wert verdecken kann, den du lesen wolltest.

Unterscheide Registrierung und Initialisierung

Hoisting beschreibt, wie Deklarationen registriert werden, bevor ihr Gültigkeitsbereich ausgeführt wird. Ihr Verhalten zu diesem frühen Zeitpunkt unterscheidet sich:

Beispielsweise gibt console.log(a); var a = 5; den Wert undefined aus. Die Zuweisung von 5 hat noch nicht stattgefunden. console.log(b); let b = 5; schlägt dagegen fehl. Der Zeitraum, in dem der lexikalische Name existiert, aber nicht darauf zugegriffen werden kann, heißt zeitliche Totzone, oft mit TDZ abgekürzt.

Verfolge eine Verdeckung vor der Deklarationszeile

let n = 10;
function f() {
  console.log(n);
  let n = 20;
}
f();

Das innere n verdeckt das äußere im gesamten Funktionsrumpf, auch vor der geschriebenen Deklarationszeile. Bei console.log(n) befindet sich dieser innere Name noch in seiner TDZ, sodass der Aufruf einen ReferenceError auslöst. JavaScript überspringt eine nicht initialisierte lokale Deklaration nicht, um auf den äußeren Wert 10 zurückzugreifen.

Dasselbe Problem tritt bei let count = count + 1; innerhalb von add auf. Die rechte Seite liest das neue lokale count, bevor es initialisiert wurde. Soll ein äußerer Zähler aktualisiert werden, verwende eine Zuweisung ohne neue Deklaration. Soll ein eigener Wert berechnet werden, gib ihm einen anderen Namen und lies den äußeren Zähler ausdrücklich.

Unterscheide Neuzuweisung und Mutation

let und const können denselben Namen nicht erneut im selben Gültigkeitsbereich deklarieren; dies führt zu einem SyntaxError. Ein innerer Gültigkeitsbereich darf einen eigenen Namen deklarieren; das ist Verdeckung. var erlaubt wiederholte Deklarationen in seinem Gültigkeitsbereich, wodurch eine versehentliche Wiederverwendung von Namen schwerer zu erkennen ist.

const verhindert eine Neuzuweisung an seine Variable. Es friert ein Array nicht ein:

const list = [];
list.push(1);

Die in list gespeicherte Referenz bleibt gleich, während sich das Array zu [1] ändert. list = []; würde versuchen, die gespeicherte Referenz zu ersetzen, und fehlschlagen.

Platziere eine Deklaration im kleinsten Gültigkeitsbereich, in dem sie benötigt wird. Verschiedene Namen für verschiedene Aufgaben verringern den Aufwand, Verdeckungen gedanklich zu verfolgen. Eine Initialisierung vor der Verwendung vermeidet Fehler durch die TDZ.

Eine Funktion behält eine Verbindung zu dem Gültigkeitsbereich, in dem sie erzeugt wurde. Die Funktion und dieser erhaltene Zugriff bilden eine Closure. Die Verbindung ist besonders nützlich, wenn eine verschachtelte Funktion zurückgegeben und aufgerufen wird, nachdem ihr äußerer Aufruf beendet ist.

Gib einer zurückgegebenen Funktion ein Gedächtnis

function makeCounter() {
  let count = 0;
  return function () {
    count = count + 1;
    return count;
  };
}
const counter = makeCounter();

Der Aufruf von makeCounter erzeugt count, erzeugt eine innere Funktion und gibt diese Funktion zurück. Den inneren Rumpf führt er noch nicht aus. counter enthält nun den Funktionswert. Sein erster Aufruf ändert das erhaltene count von 0 auf 1 und gibt 1 zurück. Der nächste Aufruf ändert dieselbe Variable auf 2 und gibt 2 zurück.

Der Stapelrahmen des äußeren Aufrufs ist beendet, aber die eingefangene Variable bleibt zugänglich. Eine lokale Variable, die nicht mehr erreichbar verwendet werden kann, kann freigegeben werden; hier benötigt die aufrufbare innere Funktion sie noch. Der Zugriff über die Closure bleibt nach einer Rückkehr erhalten, ohne die Variable global zu machen.

Erzeuge mit getrennten Aufrufen unabhängige Speicher

const a = makeCounter();
const b = makeCounter();
a();
a();
b();

Die Ergebnisse sind 1, 2 und 1. Jeder Fabrikaufruf hat ein eigenes count erzeugt. Die beiden aus getrennten Aufrufen zurückgegebenen Funktionen haben denselben Code, aber unterschiedliche erhaltene Umgebungen.

Das Kopieren einer zurückgegebenen Funktionsreferenz funktioniert anders. Bei const alias = a; verwendet alias() den vorhandenen Zähler von a; es ruft nicht makeCounter auf und erzeugt keine weitere Umgebung.

Behalte Variablen, keine Momentaufnahmen

let greeting = "Hi";
const say = () => greeting;
greeting = "Hello";

say() gibt „Hello“ zurück. Die Closure liest die Variable bei ihrer Ausführung, sodass eine spätere Aktualisierung sichtbar ist. Sie speichert bei ihrer Erzeugung keine eingefrorene Kopie von „Hi“.

Code außerhalb kann nicht direkt auf das lokale count zugreifen und counter.count ist undefined. Nur Code mit Zugriff auf diese lexikalische Umgebung kann die Variable lesen oder aktualisieren. Der Aufruf des Zählers aus einer anderen Funktion ändert nicht, welche Zählervariable er verwendet.

Teile Zustand innerhalb eines äußeren Aufrufs

function makeWallet() {
  let balance = 0;
  return [
    function deposit(n) { balance += n; return balance; },
    function getBalance() { return balance; }
  ];
}
const [deposit, getBalance] = makeWallet();
deposit(50);
deposit(20);

getBalance() gibt 70 zurück, weil beide zurückgegebenen Funktionen im selben Aufruf erzeugt wurden und auf dasselbe balance verweisen. Ein weiterer Aufruf von makeWallet() erzeugt einen eigenen Kontostand.

Eine Funktionsfabrik nutzt den Zugriff über eine Closure, um Funktionen mit eigenen Einstellungen oder eigenem Zustand zu erzeugen. Der aufrufende Code übergibt die Konfiguration einmal und nutzt die zurückgegebene Funktion danach vielfach.

Konfiguriere eine Funktion mit einem Parameter

function makeMultiplier(factor) {
  return (n) => n * factor;
}
const double = makeMultiplier(2);
const triple = makeMultiplier(3);

double(5) gibt 10 und triple(5) gibt 15 zurück. Jede zurückgegebene Pfeilfunktion behält den factor aus ihrem eigenen Fabrikaufruf. Die äußere Funktion konfiguriert das Verhalten; die innere führt die wiederholte Arbeit aus.

Die kompakte Form lautet const makeMultiplier = (factor) => (n) => n * factor;. Zwei Pfeile bedeuten, dass zwei Funktionen erzeugt werden, nicht zwei aufeinanderfolgende Berechnungen mit einer Zahl. makeMultiplier(4)(5) gibt zuerst eine mit 4 konfigurierte Funktion zurück und ruft sie dann mit 5 auf, um 20 zu erhalten.

Setze eine Regel für privaten Zustand durch

function makeLimiter(max) {
  let used = 0;
  return function () {
    if (used >= max) {
      return false;
    }
    used = used + 1;
    return true;
  };
}
const tryLogin = makeLimiter(3);

Die ersten drei Aufrufe geben true zurück und erhöhen used. Der vierte gibt false zurück, bevor der Wert erhöht wird. used ist lokal für den Fabrikaufruf, sodass Code außerhalb die Variable nicht über diesen Namen zurücksetzen kann. Die zurückgegebene Funktion steuert, welche Änderungen möglich sind. Ein weiterer Begrenzer hätte seine eigene Variable used und seinen eigenen Höchstwert.

Untersuche in Schleifen erzeugte Funktionen

const fns = [];
for (var i = 0; i < 3; i++) {
  fns.push(() => i);
}

Die Schleife erzeugt drei Funktionen, aber nur ein var i. Nach der Schleife enthält diese Variable 3. Der Aufruf einer beliebigen gespeicherten Funktion gibt nun 3 zurück, weil jede Closure dieselbe aktuelle Bindung liest. Das Erzeugen einer Funktion wertet ihren Rumpf nicht aus und erstellt keine Momentaufnahme des aktuellen i.

Änderst du den Schleifenkopf zu let i = 0, erhält jeder Schleifendurchlauf eine eigene Bindung. Die gespeicherten Funktionen geben dann 0, 1 und 2 zurück. Derselbe Unterschied erklärt eine verzögerte Ausgabe: Ein setTimeout-Callback, der nach der Schleife var i liest, sieht den Endwert, während die let-Version den Wert jedes Schleifendurchlaufs behält.

Erkenne einen sofort aufgerufenen Ausdruck

Älterer Code erzeugt oft einen privaten Funktionsgültigkeitsbereich und führt die Funktion sofort aus:

(function () {
  var hidden = 1;
  console.log(hidden);
})();

Dies ist ein sofort aufgerufener Funktionsausdruck, kurz IIFE. Die äußeren Klammern machen daraus einen Funktionsausdruck; die abschließenden Klammern rufen ihn auf. hidden gehört zu dieser Funktion und bleibt dadurch außerhalb des umgebenden globalen Gültigkeitsbereichs. Das Muster ist in Code verbreitet, der vor Deklarationen mit Blockgültigkeitsbereich und Modulen geschrieben wurde.

Der erhaltene Zugriff wirkt sich auch auf den Speicher aus. Eine aufrufbare Closure, die ein großes Array benötigt, hält diese Daten erreichbar. Sind die Funktion und ihre eingefangenen Daten nicht mehr erreichbar, können sie freigegeben werden. Speichere langlebige Closures bewusst, wenn ihr Speicher Teil der Aufgabe ist.

Ein Callback ist eine Funktion, die als Argument übergeben wird, damit eine andere Funktion sie aufruft. So kann die empfangende Funktion die Gesamtaufgabe bearbeiten, während der aufrufende Code eine bestimmte Aktion oder Prüfung liefert.

Übergib eine Aktion an eine Schleife

function repeat(times, action) {
  for (let i = 0; i < times; i++) {
    action(i);
  }
}
repeat(3, (i) => console.log(i));

repeat enthält die Schleife und wählt die Werte 0, 1 und 2. Die Pfeilfunktion bestimmt, was mit jedem Wert geschieht: Er wird ausgegeben. Jedes action(i) ruft die übergebene Funktion mit der Nummer des jeweiligen Schleifendurchlaufs auf.

Du kannst eine vorhandene Funktion übergeben oder eine direkt an Ort und Stelle schreiben. repeat(2, sayHi) übergibt die benannte Funktion. repeat(2, (i) => console.log("Round " + (i + 1))) gibt „Round 1“ und „Round 2“ aus. Ein Callback darf Argumente ignorieren, die er nicht benötigt.

Übergib den Wert und rufe die Funktion nicht vorzeitig auf

repeat(3, sayHi()) wertet sayHi() beim Vorbereiten der Argumente aus. Wenn sayHi nur etwas ausgibt, ist sein Rückgabewert undefined, sodass repeat diesen Wert als action erhält. Das spätere action(i) schlägt mit einem TypeError fehl, weil undefined nicht aufrufbar ist.

Verwende repeat(3, sayHi), um die Funktion zu übergeben. Wenn der spätere Aufruf ausgewählte Argumente benötigt, übergib einen Wrapper wie () => sayHi(), damit der Aufruf innerhalb des Callback-Rumpfs stattfindet. Das Erzeugen und das Aufrufen einer Funktion sind getrennte Schritte.

Prüfe, welche Argumente die empfangende Funktion liefert

Array-Callbacks erhalten oft mehr als ein Argument: Element, Index und das gesamte Array. Die Übergabe einer vorhandenen Funktion ist nur dann sicher, wenn diese Eingaben zur Bedeutung ihrer Parameter passen.

["1", "2", "3"].map(parseInt);

Dies gibt [1, NaN, NaN] zurück. parseInt akzeptiert ein zweites Argument für die Zahlenbasis, sodass der Arrayindex sein Verhalten ändert. Verwende ["1", "2", "3"].map((s) => parseInt(s, 10)), um die Basis 10 ausdrücklich zu wählen, oder .map(Number), um diese Zeichenketten umzuwandeln.

Gib eine Antwort an die empfangende Funktion zurück

function countIf(arr, test) {
  let n = 0;
  for (const x of arr) {
    if (test(x)) {
      n++;
    }
  }
  return n;
}

countIf([3, 8, 12, 5], (x) => x > 4) gibt 3 zurück. Der Callback beantwortet für jedes Element eine Frage; countIf nutzt jede Antwort, um zu entscheiden, ob erhöht wird. Vergleiche repeat, dessen Schleife den Rückgabewert des Callbacks ignoriert. Der Code oder die Dokumentation der empfangenden Funktion nennt dir sowohl die Argumente als auch die Rolle des Ergebnisses.

Callbacks können sofort oder später ausgeführt werden. repeat und Arraymethoden rufen sie synchron auf, bevor sie zurückkehren. setTimeout(sayHi, 2000) plant einen Callback für später ein, während der nachfolgende Code sofort weiterläuft. Die Bezeichnung Callback beschreibt, wie eine Funktion übergeben wird, nicht wann sie ausgeführt werden muss.

Eine Funktion höherer Ordnung nimmt eine Funktion entgegen, gibt eine Funktion zurück oder tut beides. Der Funktionswert liefert Verhalten, während die Funktion höherer Ordnung ein wiederverwendbares Muster verwaltet.

Schreibe das Muster einmal

function myMap(arr, transform) {
  const result = [];
  for (const item of arr) {
    result.push(transform(item));
  }
  return result;
}

myMap([1, 2, 3], (n) => n * n) gibt [1, 4, 9] zurück. Die Schleife und das Erstellen des Ausgabearrays bleiben gleich; der Callback bestimmt, wie sich jeder Eintrag ändert. Ein entsprechender Filter fügt ein Element nur hinzu, wenn test(item) einen Truthy-Wert ergibt. Mit [4, 7, 10, 3] und (n) => n % 2 === 0 behält dieses Muster [4, 10].

Wähle den benötigten Vertrag für den Callback

map, filter und find verändern das Eingabearray selbst nicht, aber Callbacks können es dennoch verändern. Dass eine Methode ein neues Array zurückgibt, macht nicht jeden übergebenen Callback rein.

Führe ein Ergebnis durch eine Reduktion

[5, 10, 15].reduce((total, n) => total + n, 0);

Der anfängliche Akkumulator ist 0. Der Callback gibt für das erste Element 5, für das zweite 15 und für das dritte 30 zurück. Jeder Rückgabewert wird zum total des nächsten Aufrufs. Nach dem letzten Element gibt die Methode 30 zurück. Bei einem leeren Array ohne anfänglichen Akkumulator löst reduce einen TypeError aus; ein ausdrücklicher Anfangswert legt auch das nutzbare Ergebnis für eine leere Eingabe fest.

Da Methoden Arrays zurückgeben, lassen sich Aufrufe verketten. [3, 8, 12, 5].filter((n) => n > 4).map((n) => n * 2) behält zuerst [8, 12, 5] und transformiert es dann zu [16, 24, 10]. Lies die Kette in Ausführungsreihenfolge von links nach rechts.

Gib eine numerische Sortierregel an

Ohne Vergleichsfunktion vergleicht sort Einträge als Zeichenketten. [10, 9, 1].sort() ergibt daher [1, 10, 9]. Verwende für eine aufsteigende numerische Reihenfolge .sort((a, b) => a - b). Ein negativer Rückgabewert setzt a an die erste Stelle, ein positiver b, und bei null gelten die beiden für die Reihenfolge als gleichwertig. Anders als map und filter ordnet sort sein Eingabearray um.

Prüfe die Rückgabewerte

[1, 2, 3].map((n) => { n * 2; }) ergibt [undefined, undefined, undefined], weil der Block keine Rückgabe hat. Auch der Versuch, mit forEach durch Zuweisung ein neues Ergebnis zu erstellen, schlägt fehl, wenn du erwartest, dass die Methode selbst ein Array zurückgibt. Wähle map für Transformationen und forEach für Aktionen, deren gesammelte Ausgaben nicht benötigt werden.

Eine Methode höherer Ordnung drückt ein bekanntes Muster klar aus. Eine einfache Schleife bleibt nützlich, wenn die Arbeit break benötigt oder nicht zum Vertrag der Methode passt.

Eine Funktion kann eine neue Funktion zurückgeben, die sich eine vorhandene merkt. Wrapper, Funktionskomposition und partielle Anwendung nutzen dieses Muster, um Verhalten anzupassen, ohne den Rumpf der ursprünglichen Funktion zu kopieren.

Umhülle einen Aufruf und erhalte sein Ergebnis

function logged(fn) {
  return (...args) => {
    console.log("Calling with", args);
    const result = fn(...args);
    console.log("Result", result);
    return result;
  };
}
const add = (a, b) => a + b;

logged(add) erzeugt eine Funktion, die add als fn behält. Der Aufruf logged(add)(2, 3) sammelt die Argumente, leitet sie an add weiter, gibt den Rückgabewert aus und liefert 5 zurück. Rest sammelt die Eingaben des Wrappers; Spread leitet sie weiter. Die abschließende Rückgabe hält die Ausgabe für spätere Berechnungen verfügbar.

logged(add(2, 3)) übergibt stattdessen die Zahl 5. Wird dieser Wrapper später aufgerufen, versucht er, 5 aufzurufen, und löst einen TypeError aus. Es gibt zwei Schritte: Konfiguriere den Wrapper mit einer Funktion und rufe dann die zurückgegebene Funktion mit Eingaben auf.

Behalte Zustand für eine Operation

function once(fn) {
  let done = false;
  let result;
  return (...args) => {
    if (!done) {
      done = true;
      result = fn(...args);
    }
    return result;
  };
}

Bei einer Operation, die normal zurückkehrt, führt der erste Aufruf fn aus und speichert das Ergebnis. Spätere Aufrufe geben diesen gespeicherten Wert zurück, ohne fn erneut auszuführen, selbst wenn ihre Argumente verschieden sind. Der boolesche Wert hält fest, ob die Operation ausgeführt wurde; den Wahrheitswert des Ergebnisses zu prüfen, wäre falsch, wenn ein zulässiges Ergebnis 0 oder false ist. Jeder Aufruf von once erzeugt ein eigenes Flag und ein eigenes gespeichertes Ergebnis.

Übergib ein Ergebnis an eine andere Funktion

const compose = (f, g) => (x) => f(g(x));
const addOne = (n) => n + 1;
const square = (n) => n * n;

compose(square, addOne)(3) führt zuerst addOne(3) aus und quadriert dann 4, um 16 zurückzugeben. compose(addOne, square)(3) quadriert zuerst 3 und addiert dann 1; das Ergebnis ist 10. Die Funktion, die der Eingabe am nächsten steht, wird zuerst ausgeführt, sodass die Reihenfolge der Argumente von compose wichtig ist.

Lege einige Argumente im Voraus fest

function partial(fn, ...fixed) {
  return (...rest) => fn(...fixed, ...rest);
}
const greetWith = (greeting, name) => greeting + ", " + name;
const hello = partial(greetWith, "Hello");

hello("Ana") ruft greetWith("Hello", "Ana") auf und gibt „Hello, Ana“ zurück. Diese Hilfsfunktion für partielle Anwendung setzt feste Argumente an den Anfang und spätere Argumente dahinter; eine Änderung dieser Reihenfolge ändert den zugrunde liegenden Aufruf.