return

Das hier ist die Stelle, an der die meisten Anfänger hängenbleiben, und zwar ohne es zu merken. Eine Funktion, die console.log macht, sieht aus wie eine Funktion, die arbeitet. Sie ist trotzdem eine Sackgasse.

01 / 04Der Unterschied, um den es geht

<h1>Ausgabe</h1>
<p>Was dieses Beispiel tut, steht in der Console.</p>

// Diese Funktion schreibt eine Zeile und liefert nichts.
function zeigeSumme(a, b) {
  console.log(a + b);
}

// Diese liefert einen Wert und schreibt nichts.
function summe(a, b) {
  return a + b;
}

zeigeSumme(2, 3);
summe(2, 3);

// Beide sehen von außen gleich aus. Der Unterschied zeigt sich,
// sobald jemand mit dem Ergebnis weiterarbeiten will.
console.log("Weitergerechnet mit zeigeSumme:", zeigeSumme(2, 3) * 10);
console.log("Weitergerechnet mit summe:", summe(2, 3) * 10);

console.log schreibt eine Zeile in die Console. Für dich, zum Anschauen, während du entwickelst. Das Programm hat davon nichts.

return liefert einen Wert an die Stelle zurück, an der die Funktion aufgerufen wurde. Damit kann weitergerechnet, verglichen, gespeichert und ausgegeben werden.

Im Beispiel siehst du beide nebeneinander, und in den ersten Zeilen sehen sie tatsächlich gleich aus. Erst die letzten beiden Zeilen trennen sie: Multipliziert man das Ergebnis mit 10, kommt einmal eine Zahl heraus und einmal NaN.

Der Merksatz dazu: console.log ist für dich, return ist für dein Programm. Und weil auf einer echten Seite später niemand in die Console schaut, ist return das, was zählt.

Am schärfsten sieht man den Unterschied in der Eingabezeile der Console, denn die zeigt beide Hälften getrennt: was eine Funktion tut und was sie hergibt. Tipp zeigeSumme(2, 3), und es erscheinen zwei Zeilen: erst die 5, die die Funktion schreibt, dann die Antwort undefined, also das, was sie zurückgibt. Tipp jetzt summe(2, 3), und es erscheint eine einzige Zeile, die Antwort 5. Geschrieben hat diese Funktion nichts.

Und weil eine Antwort ein Wert ist, kannst du gleich weiterrechnen: summe(2, 3) * 10 antwortet mit 50. Mit zeigeSumme an derselben Stelle bekommst du NaN, denn undefined * 10 ist keine Zahl. Das ist genau die letzte Zeile des Beispiels, nur dass du sie hier selbst auslöst.

Man kann beides in derselben Funktion tun, und beim Suchen eines Fehlers macht man das auch. Fertig ist eine Funktion aber erst mit return.

02 / 04return beendet die Funktion

<h1>Ausgabe</h1>
<p>Was dieses Beispiel tut, steht in der Console.</p>

function pruefe(zahl) {
  console.log("Diese Zeile läuft noch.");

  return zahl * 2;

  // Alles ab hier ist unerreichbar. Kein Fehler, es passiert
  // schlicht nie.
  console.log("Diese Zeile läuft nie.");
}

console.log("Ergebnis:", pruefe(21));

// return beendet auch eine Schleife mitsamt der ganzen Funktion.
function ersteGeradeZahl(bis) {
  for (let i = 1; i <= bis; i++) {
    if (i % 2 === 0) {
      return i;
    }
  }
  return -1;
}

console.log("Erste gerade Zahl bis 9:", ersteGeradeZahl(9));

return tut zwei Dinge auf einmal, und das zweite wird oft übersehen: Es liefert den Wert und beendet die Funktion sofort.

Alles, was danach im Rumpf steht, läuft nicht mehr. Auch nicht ein bisschen. Es gibt dafür keine Fehlermeldung, die Zeilen sind einfach unerreichbar.

Das gilt quer durch alles hindurch: aus einer Schleife heraus, aus einem if heraus, aus drei ineinandergeschachtelten Blöcken heraus. Im zweiten Block des Beispiels beendet das return die Schleife mitsamt der Funktion, und das ist genau der Fall, den Lektion 4.3 angekündigt hat. Eine Schleife mit mehreren break ist meistens eine Funktion mit return.

03 / 04Ohne return kommt undefined

<h1>Ausgabe</h1>
<p>Was dieses Beispiel tut, steht in der Console.</p>

function ohneReturn() {
  const ergebnis = 42;
}

function leeresReturn() {
  return;
}

console.log("ohneReturn liefert:", ohneReturn());
console.log("leeresReturn liefert:", leeresReturn());

// Beides ist undefined, und undefined verhält sich beim Rechnen
// so, wie du es aus Lektion 5.2 kennst.
console.log("Und damit gerechnet:", ohneReturn() + 1);

Jede Funktion liefert etwas. Steht kein return im Rumpf, ist es undefined, und ein return ohne Wert dahinter ergibt dasselbe.

Das ist kein Fehler, sondern eine Zusage: Du bekommst immer etwas zurück, und wenn nichts festgelegt wurde, ist es das Nichts aus Lektion 2.6.

Praktisch heißt das: Wenn eine Funktion undefined liefert, obwohl du einen Wert erwartest, fehlt fast immer das return. Der zweithäufigste Grund ist ein return an einer Stelle, die gar nicht erreicht wird, weil vorher schon eines gelaufen ist.

04 / 04Sonderfälle oben abfangen

<h1>Ausgabe</h1>
<p>Was dieses Beispiel tut, steht in der Console.</p>

// Eingerückt: der eigentliche Fall steht am tiefsten Punkt.
function rabattTief(preis, prozent) {
  if (preis > 0) {
    if (prozent > 0) {
      return preis - (preis * prozent) / 100;
    } else {
      return preis;
    }
  } else {
    return 0;
  }
}

// Früher Ausstieg: die Sonderfälle stehen oben und sind erledigt,
// der Normalfall steht unten und ohne Einrückung.
function rabattFlach(preis, prozent) {
  if (preis <= 0) return 0;
  if (prozent <= 0) return preis;

  return preis - (preis * prozent) / 100;
}

console.log(rabattTief(100, 10), rabattFlach(100, 10));
console.log(rabattTief(-5, 10), rabattFlach(-5, 10));

Weil return die Funktion beendet, lässt sich damit ein Muster bauen, das guten Code von verschachteltem unterscheidet.

Die erste Fassung im Beispiel prüft alles ineinander. Der eigentliche Fall, um den es geht, steht dabei am tiefsten Punkt der Einrückung, und die schließenden Klammern stapeln sich unten.

Die zweite Fassung dreht das um: Was schiefgehen kann, wird oben geprüft und sofort mit return beantwortet. Danach steht der Normalfall ohne Einrückung da, und beim Lesen weiß man an dieser Stelle sicher, dass alle Sonderfälle erledigt sind.

Das nennt man den frühen Ausstieg, und wenn du dir aus diesem Abschnitt eine Gewohnheit mitnimmst, dann diese. In der Challenge baust du sie einmal selbst.