Funktionsrückgabewerte

Rückgabewerte sind genau das, wonach sie klingen — die Werte, die eine Funktion zurückgibt, wenn sie abgeschlossen ist. Sie haben Rückgabewerte bereits mehrmals getroffen, obwohl Sie möglicherweise nicht explizit darüber nachgedacht haben.

Lassen Sie uns zu einem bekannten Beispiel zurückkehren (aus einem früheren Artikel in dieser Serie):

const myText = "The weather is cold";
const newString = myText.replace("cold", "warm");
console.log(newString); // Should print "The weather is warm"
// the replace() string function takes a string,
// replaces one substring with another, and returns
// a new string with the replacement made

Die replace()-Funktion wird auf der myText-Zeichenkette aufgerufen und erhält zwei Parameter:

• Die zu findende Teilzeichenkette ('cold')
• Die Zeichenkette, mit der sie ersetzt wird ('warm')

Wenn die Funktion abgeschlossen ist (beendet), gibt sie einen Wert zurück, nämlich eine neue Zeichenkette, bei der die Ersetzung vorgenommen wurde. Im obigen Code wird das Ergebnis dieses Rückgabewerts in der Variablen newString gespeichert.

Wenn Sie sich die öffentliche Seite der replace()-Funktionsreferenz auf MDN ansehen, finden Sie einen Abschnitt namens Rückgabewert. Es ist sehr nützlich zu wissen und zu verstehen, welche Werte von Funktionen zurückgegeben werden, daher versuchen wir, diese Informationen wann immer möglich bereitzustellen.

Einige Funktionen geben keinen Wert zurück. (In diesen Fällen führen unsere Referenzseiten den Rückgabewert als void oder undefined auf.) Zum Beispiel wird in der displayMessage()-Funktion, die wir im vorherigen Artikel erstellt haben, kein spezifischer Wert zurückgegeben, wenn die Funktion aufgerufen wird. Sie lässt einfach irgendwo auf dem Bildschirm eine Box erscheinen — das ist alles!

Im Allgemeinen wird ein Rückgabewert verwendet, wenn die Funktion ein Zwischenschritt in einer Berechnung irgendeiner Art ist. Sie möchten ein Endergebnis erreichen, das einige Werte umfasst, die von einer Funktion berechnet werden müssen. Nachdem die Funktion den Wert berechnet hat, kann sie das Ergebnis zurückgeben, sodass es in einer Variablen gespeichert werden kann; und Sie können diese Variable im nächsten Schritt der Berechnung verwenden.

Um einen Wert aus einer benutzerdefinierten Funktion zurückzugeben, müssen Sie das return-Schlüsselwort verwenden. Wir haben dies kürzlich in unserem Beispiel random-canvas-circles.html gesehen. Unsere draw()-Funktion zeichnet 100 zufällige Kreise irgendwo auf einem HTML-<canvas>:

function draw() {
  ctx.clearRect(0, 0, WIDTH, HEIGHT);
  for (let i = 0; i < 100; i++) {
    ctx.beginPath();
    ctx.fillStyle = "rgb(255 0 0 / 50%)";
    ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
    ctx.fill();
  }
}

In jeder Schleifeniteration werden drei Aufrufe der random()-Funktion vorgenommen, um einen zufälligen Wert für die aktuelle Kreis-x-Koordinate, y-Koordinate und Radius zu erzeugen. Die random()-Funktion nimmt einen Parameter — eine ganze Zahl — und gibt eine zufällige ganze Zahl zwischen 0 und dieser Zahl zurück. Sie sieht so aus:

function random(number) {
  return Math.floor(Math.random() * number);
}

Dies könnte wie folgt geschrieben werden:

function random(number) {
  const result = Math.floor(Math.random() * number);
  return result;
}

Aber die erste Version ist schneller zu schreiben und kompakter.

In jedem Aufruf der Funktion Math.floor(Math.random() * number) wird das Ergebnis der Berechnung zurückgegeben. Dieser Rückgabewert erscheint an den Punkt, an dem die Funktion aufgerufen wurde, und der Code läuft weiter.

Also wenn Sie folgendes ausführen:

ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);

Wenn die drei random()-Aufrufe die Werte 500, 200 und 35 zurückgeben, wird die Zeile tatsächlich ausgeführt, als ob sie dies wäre:

ctx.arc(500, 200, 35, 0, 2 * Math.PI);

Die Funktionsaufrufe auf der Zeile werden zuerst ausgeführt und ihre Rückgabewerte werden durch die Funktionsaufrufe ersetzt, bevor die Zeile selbst dann ausgeführt wird.

Lassen Sie uns versuchen, unsere eigenen Funktionen mit Rückgabewerten zu schreiben.

1. Erstellen Sie eine lokale Kopie der function-library.html Datei von GitHub. Dies ist eine einfache HTML-Seite mit einem Text-<input>-Feld und einem Absatz. Es gibt auch ein <script>-Element, in dem wir eine Referenz zu beiden HTML-Elementen in zwei Variablen gespeichert haben. Diese Seite ermöglicht es Ihnen, eine Zahl in das Textfeld einzugeben und verschiedene damit zusammenhängende Zahlen darunter anzuzeigen.

2. Fügen Sie einige nützliche Funktionen zu diesem <script>-Element unter den beiden bestehenden Zeilen hinzu:

   js

   function squared(num) {
     return num * num;
   }
   
   function cubed(num) {
     return num * num * num;
   }
   
   function factorial(num) {
     if (num < 0) return undefined;
     if (num === 0) return 1;
     let x = num - 1;
     while (x > 1) {
       num *= x;
       x--;
     }
     return num;
   }
   

   Die squared()- und cubed()-Funktionen sind relativ selbsterklärend — sie geben das Quadrat bzw. den Würfel der als Parameter übergebenen Zahl zurück. Die factorial()-Funktion gibt die Fakultät der gegebenen Zahl zurück.

3. Fügen Sie eine Methode hinzu, um Informationen über die eingegebene Zahl in das Texteingabefeld auszugeben, indem Sie den folgenden Ereignishandler unter den vorhandenen Funktionen hinzufügen:

   js

   input.addEventListener("change", () => {
     const num = parseFloat(input.value);
     if (isNaN(num)) {
       para.textContent = "You need to enter a number!";
     } else {
       para.textContent = `${num} squared is ${squared(num)}. `;
       para.textContent += `${num} cubed is ${cubed(num)}. `;
       para.textContent += `${num} factorial is ${factorial(num)}. `;
     }
   });
   

4. Speichern Sie Ihren Code, laden Sie ihn in einem Browser und probieren Sie es aus.

Hier einige Erklärungen zur addEventListener-Funktion im obigen Schritt 3:

• Durch Hinzufügen eines Listeners zum change-Ereignis wird diese Funktion ausgeführt, wann immer das change-Ereignis an der Texteingabe ausgelöst wird — also wenn ein neuer Wert in die Texteingabe eingegeben und gesendet wird (z.B. einen Wert eingeben, dann den Fokus aus der Eingabe durch Drücken von Tab oder Return entfernen). Wenn diese anonyme Funktion ausgeführt wird, wird der Wert in der input in der Konstanten num gespeichert.
• Die if-Anweisung gibt eine Fehlermeldung aus, wenn der eingegebene Wert keine Zahl ist. Die Bedingung prüft, ob der Ausdruck isNaN(num) true zurückgibt. Die isNaN()-Funktion testet, ob der num-Wert keine Zahl ist — wenn ja, gibt sie true zurück, und wenn nicht, false.
• Wenn die Bedingung false zurückgibt, ist der num-Wert eine Zahl und die Funktion gibt einen Satz innerhalb des Absatzelements aus, der die Quadrat-, Würfel- und Fakultätswerte der Zahl angibt. Der Satz ruft die squared(), cubed() und factorial()-Funktionen auf, um die erforderlichen Werte zu berechnen.

An diesem Punkt möchten wir, dass Sie versuchen, ein paar eigene Funktionen zu schreiben und sie der Bibliothek hinzuzufügen. Wie wäre es mit der Quadrat- oder Kubikwurzel der Zahl? Oder dem Umfang eines Kreises mit gegebenem Radius?

Einige zusätzliche Tipps zu Funktionen:

• Sehen Sie sich ein weiteres Beispiel an, um Fehlerbehandlung in Funktionen zu schreiben. Es ist allgemein eine gute Idee sicherzustellen, dass alle notwendigen Parameter validiert werden und dass alle optionalen Parameter irgendeine Art von Standardwert erhalten. Auf diese Weise ist Ihr Programm weniger wahrscheinlich, Fehler zu werfen.
• Denken Sie über die Idee nach, eine Funktionsbibliothek zu erstellen. Wenn Sie tiefer in Ihre Programmierkarriere eintauchen, werden Sie anfangen, dieselben Dinge immer und immer wieder zu tun. Es ist eine gute Idee, Ihre eigene Bibliothek von Dienstprogrammfunktionen zu erstellen, um diese Arten von Aufgaben zu erledigen. Sie können sie in neuen Code kopieren oder sogar einfach auf HTML-Seiten anwenden, wo auch immer Sie sie benötigen.

Sie haben das Ende dieses Artikels erreicht, aber können Sie sich an die wichtigsten Informationen erinnern? Sie können einige weitere Tests finden, um zu überprüfen, ob Sie diese Informationen behalten haben, bevor Sie weitermachen — siehe Testen Sie Ihr Wissen: Funktionen.

Da haben wir es — Funktionen sind spannend, sehr nützlich und obwohl es viel über ihre Syntax und Funktionalität zu besprechen gibt, sind sie relativ verständlich.

Falls es etwas gibt, das Sie nicht verstanden haben, zögern Sie nicht, den Artikel noch einmal zu lesen oder kontaktieren Sie uns um Hilfe zu bitten.

• Funktionen im Detail — ein detaillierter Leitfaden, der fortgeschrittenere Informationen zu Funktionen enthält.
• Callbacks in JavaScript — ein häufiger JavaScript-Muster ist, eine Funktion in eine andere Funktion als Argument zu übergeben. Diese wird dann innerhalb der ersten Funktion aufgerufen. Dies liegt ein wenig außerhalb des Umfangs dieses Kurses, aber es lohnt sich, es bald zu studieren.

• Zurück
• Übersicht: JavaScript Grundbausteine
• Weiter