Zum Inhalt springen
aviral gupta
Kontakt aufnehmen

// B4.3 · ca. 30 Min. · Einstieg

Rückgabewerte

Nach dieser Lektion geben Sie Ergebnisse zurück, statt sie auszugeben, beenden eine Funktion früh, wenn ihre Eingabe nicht stimmt, und geben mehrere Werte auf einmal zurück.

Lektion 3 von 5 in B4 Funktionen

Danach können Sie

  • Einen Wert aus einer Funktion zurückgeben und den Aufruf als diesen Wert verwenden, und Zurückgeben von Ausgeben unterscheiden
  • Wissen, dass eine Funktion ohne return undefined ergibt, und falsche Eingaben mit einem frühen return abfangen
  • Einen Zeilenumbruch direkt nach return vermeiden und ein Array oder Objekt für mehrere Werte zurückgeben

  1. Aufwärmen · Aufgabe 1 von 7

    Zum Aufwärmen: Welches Schlüsselwort gibt einen Wert aus einer Funktion an die aufrufende Zeile zurück?

  2. Vorhersagen · Aufgabe 2 von 7

    Sagen Sie es vorher, bevor Sie weiterlesen: Eine Funktion gibt aus, die andere gibt zurück. Was gibt das Programm aus?

    function addLog(a, b) {
  console.log(a + b);
}
function addReturn(a, b) {
  return a + b;
}
const x = addLog(2, 3);
const y = addReturn(2, 3);
console.log(x, y);

  3. Üben · Aufgabe 3 von 7

    Ergänzen Sie das Schlüsselwort, sodass double sein Ergebnis zurückgibt und das Programm 42 ausgibt.

    function double(n) {
  ____ n * 2;
}
console.log(double(21));
    n * 2;

  4. Üben · Aufgabe 4 von 7

    Jedes return beendet die Funktion. Was gibt der Code aus?

    function ticketPrice(age) {
  if (age < 6) {
    return 0;
  }
  if (age < 18) {
    return 5;
  }
  return 9;
}
console.log(ticketPrice(4), ticketPrice(12), ticketPrice(40));

  5. Üben · Aufgabe 5 von 7

    Jede Zeile ist der Rumpf einer Funktion. Ordnen Sie ihr zu, was console.log für einen Aufruf dieser Funktion ausgibt.

  6. Denksport · Aufgabe 6 von 7

    Knobelaufgabe. Der Wert steht in der nächsten Zeile, schön eingerückt. Was gibt der Code aus?

    function getTotal(a, b) {
  return
    a + b;
}
console.log(getTotal(2, 3));

  7. Anwenden · Aufgabe 7 von 7

    Mini-Aufgabe. Schreiben Sie minMax(numbers), das die kleinste und die größte Zahl als Array zurückgibt, [low, high]. Fangen Sie zuerst die leere Liste ab: Geben Sie sofort [] zurück. Geben Sie minMax([7, 2, 9, 4]), minMax([5]) und minMax([]) aus.

    Prüfen Sie Ihr Ergebnis anhand dieser Liste

Selbst programmieren

Lesen Sie das ausgearbeitete Beispiel und lösen Sie dann die Übungen. Ihr Code läuft in Ihrem Browser oder auf Ihrem Computer und wird nie hochgeladen.

Ausgearbeitetes Beispiel

Eine Kasse

Vier kleine Funktionen bauen einen Kassenbon. subtotal gibt eine Summe zurück, discount verwendet frühe returns als Wächter, und priceRange gibt zwei Werte in einem Array zurück. logLine gibt aus, statt zurückzugeben: Achten Sie darauf, was ihr Aufruf in der letzten Zeile ergibt. Führen Sie das Programm aus, ändern Sie dann den Code im ersten discount-Aufruf zu "save5" und sagen Sie den neuen Betrag vorher.

main.js

// Small functions that return values, combined into a receipt.
function subtotal(prices) {
  let sum = 0;
  for (const p of prices) {
    sum += p;
  }
  return sum;
}

function discount(amount, code) {
  if (code !== "SAVE5") {
    return 0;
  }
  if (amount < 20) {
    return 0;
  }
  return 5;
}

function priceRange(prices) {
  let low = prices[0];
  let high = prices[0];
  for (const p of prices) {
    if (p < low) {
      low = p;
    }
    if (p > high) {
      high = p;
    }
  }
  return [low, high];
}

function logLine(text) {
  console.log("> " + text);
}

const prices = [12, 4.5, 20];
const sum = subtotal(prices);
const off = discount(sum, "SAVE5");
console.log("subtotal", sum);
console.log("discount", off, "and with a wrong code", discount(sum, "save5"));
console.log("to pay", (sum - off).toFixed(2));
console.log("range", priceRange(prices));
console.log("logLine gives", logLine("printed, not returned"));

Ausführen mit

node main.js

Ausgabe

subtotal 36.5
discount 5 and with a wrong code 0
to pay 31.50
range [ 4.5, 20 ]
> printed, not returned
logLine gives undefined
  • Die Ergebnisse von subtotal und discount werden in Konstanten gespeichert und in späteren Zeilen weiterverwendet.
  • discount gibt 0 zurück, sobald ein Test scheitert; return 5 wird nur erreicht, wenn beide bestehen.
  • priceRange gibt zwei Zahlen in einem Array zurück.
  • logLine gibt seine Zeile zuerst aus, während ihr Argument berechnet wird; der Aufruf selbst ist undefined.
Ändern und ausführen

Tab rückt ein, Umschalt+Tab rückt aus. Um den Editor mit der Tastatur zu verlassen, drücken Sie Esc und dann Tab.

Beim ersten Ausführen lädt Ihr Browser den JavaScript-Runner herunter (bis zu 0.1 MB) und speichert ihn im Cache. Ihr Code läuft in der eigenen Engine Ihres Browsers und bleibt auf Ihrem Gerät.

Übungen

Übung 1 von 2

Zurückgeben, nicht ausgeben

fullName(first, last) soll einen Namen wie Ada Lovelace zurückgeben, und initials(first, last) Initialen wie A.L.. Der Startcode gibt den richtigen Text aus, aber die Tests erhalten undefined. Ändern Sie beide Funktionen so, dass sie ihren Text zurückgeben, statt ihn auszugeben.

Tab rückt ein, Umschalt+Tab rückt aus. Um den Editor mit der Tastatur zu verlassen, drücken Sie Esc und dann Tab.

Beim ersten Ausführen lädt Ihr Browser den JavaScript-Runner herunter (bis zu 0.1 MB) und speichert ihn im Cache. Ihr Code läuft in der eigenen Engine Ihres Browsers und bleibt auf Ihrem Gerät.

Hinweise
  1. Hinweis 1

    Führen Sie die Tests aus: Der Text erscheint in der Ausgabe, aber jede Funktion gibt undefined zurück.

  2. Hinweis 2

    console.log zeigt einen Wert; return übergibt ihn dem Aufrufer.

  3. Hinweis 3

    Ersetzen Sie console.log( … ) durch return … und lassen Sie die schließende Klammer von console.log weg.

Eine Lösung zeigen

Ein möglicher Lösungsweg. Ihrer kann anders aussehen und trotzdem alle Prüfungen bestehen.

// Return the full name, such as "Ada Lovelace".
export function fullName(first, last) {
  return first + " " + last;
}

// Return the initials, such as "A.L.".
export function initials(first, last) {
  return first[0] + "." + last[0] + ".";
}
Auf dem eigenen Computer ausführen

Installieren Sie ECMAScript 2026 oder neuer. Speichern Sie diese Dateien in einem Ordner, öffnen Sie dort ein Terminal und führen Sie die Befehle unten aus.

main.js

// Return the full name, such as "Ada Lovelace".
export function fullName(first, last) {
  console.log(first + " " + last);
}

// Return the initials, such as "A.L.".
export function initials(first, last) {
  console.log(first[0] + "." + last[0] + ".");
}

main.test.js

import {test} from 'node:test';
import assert from 'node:assert/strict';
import {fullName, initials} from './main.js';

test('fullName gibt den vollen Namen zurück', () => {
  const got = fullName('Ada', 'Lovelace');
  assert.equal(got, 'Ada Lovelace', `fullName("Ada", "Lovelace") hat ${JSON.stringify(got)} zurückgegeben, erwartet "Ada Lovelace"`);
});

test('fullName funktioniert mit jedem Namen', () => {
  const got = fullName('Grace', 'Hopper');
  assert.equal(got, 'Grace Hopper', `fullName("Grace", "Hopper") hat ${JSON.stringify(got)} zurückgegeben, erwartet "Grace Hopper"`);
});

test('initials gibt die Initialen zurück', () => {
  const got = initials('Ada', 'Lovelace');
  assert.equal(got, 'A.L.', `initials("Ada", "Lovelace") hat ${JSON.stringify(got)} zurückgegeben, erwartet "A.L."`);
});

package.json

{
  "type": "module"
}

package.json sagt Node.js, dass die .js-Dateien Module sind; lassen Sie die Datei im Ordner.

Programm ausführen:

node main.js

Prüfungen ausführen (learnrun.js muss im selben Ordner liegen):

node --test
learnrun.js herunterladen

Übung 2 von 2

Die Versandkosten absichern

shippingCost(weight) gibt 5 für ein Paket bis 2 kg zurück, 9 bis 10 kg und 15 darüber. Alles, was keine Zahl über 0 ist, muss "invalid weight" zurückgeben. Der Startcode hat noch keinen Wächter, und eines seiner returns gibt undefined zurück. Fügen Sie den Wächter als frühes return ganz oben ein und reparieren Sie das kaputte return.

Tab rückt ein, Umschalt+Tab rückt aus. Um den Editor mit der Tastatur zu verlassen, drücken Sie Esc und dann Tab.

Beim ersten Ausführen lädt Ihr Browser den JavaScript-Runner herunter (bis zu 0.1 MB) und speichert ihn im Cache. Ihr Code läuft in der eigenen Engine Ihres Browsers und bleibt auf Ihrem Gerät.

Hinweise
  1. Hinweis 1

    Führen Sie die Tests aus: shippingCost(1) gibt undefined zurück. Sehen Sie sich die Zeile nach dem ersten return an.

  2. Hinweis 2

    Ein Zeilenumbruch direkt nach return beendet die Anweisung. Schreiben Sie return 5; in eine Zeile.

  3. Hinweis 3

    Für den Wächter setzen Sie if (typeof weight !== "number" || weight <= 0) { return "invalid weight"; } an den Anfang des Rumpfs.

Eine Lösung zeigen

Ein möglicher Lösungsweg. Ihrer kann anders aussehen und trotzdem alle Prüfungen bestehen.

export function shippingCost(weight) {
  // Return "invalid weight" for anything that is not a number above 0.
  if (typeof weight !== "number" || weight <= 0) {
    return "invalid weight";
  }
  if (weight <= 2) {
    return 5;
  }
  if (weight <= 10) {
    return 9;
  }
  return 15;
}
Auf dem eigenen Computer ausführen

Installieren Sie ECMAScript 2026 oder neuer. Speichern Sie diese Dateien in einem Ordner, öffnen Sie dort ein Terminal und führen Sie die Befehle unten aus.

main.js

export function shippingCost(weight) {
  // Return "invalid weight" for anything that is not a number above 0.
  if (weight <= 2) {
    return
      5;
  }
  if (weight <= 10) {
    return 9;
  }
  return 15;
}

main.test.js

import {test} from 'node:test';
import assert from 'node:assert/strict';
import {shippingCost} from './main.js';

test('ein Paket bis 2 kg kostet 5', () => {
  assert.equal(shippingCost(1), 5, `shippingCost(1) hat ${JSON.stringify(shippingCost(1))} zurückgegeben, erwartet 5`);
  assert.equal(shippingCost(2), 5, `shippingCost(2) hat ${JSON.stringify(shippingCost(2))} zurückgegeben, erwartet 5`);
});

test('ein Paket bis 10 kg kostet 9', () => {
  assert.equal(shippingCost(7), 9, `shippingCost(7) hat ${JSON.stringify(shippingCost(7))} zurückgegeben, erwartet 9`);
});

test('ein schwereres Paket kostet 15', () => {
  assert.equal(shippingCost(25), 15, `shippingCost(25) hat ${JSON.stringify(shippingCost(25))} zurückgegeben, erwartet 15`);
});

test('0 und negative Gewichte sind ungültig', () => {
  assert.equal(shippingCost(0), 'invalid weight', `shippingCost(0) hat ${JSON.stringify(shippingCost(0))} zurückgegeben, erwartet "invalid weight"`);
  assert.equal(shippingCost(-3), 'invalid weight', `shippingCost(-3) hat ${JSON.stringify(shippingCost(-3))} zurückgegeben, erwartet "invalid weight"`);
});

test('ein Gewicht, das keine Zahl ist, ist ungültig', () => {
  assert.equal(shippingCost('3'), 'invalid weight', `shippingCost("3") hat ${JSON.stringify(shippingCost('3'))} zurückgegeben, erwartet "invalid weight"`);
});

package.json

{
  "type": "module"
}

package.json sagt Node.js, dass die .js-Dateien Module sind; lassen Sie die Datei im Ordner.

Programm ausführen:

node main.js

Prüfungen ausführen (learnrun.js muss im selben Ordner liegen):

node --test
learnrun.js herunterladen

Häufige Fehler

Ein Zeilenumbruch nach return

function total(a, b) {
  return
    a + b;
}
console.log(total(2, 3).toFixed(2));

Was Node.js ausgibt

TypeError: Cannot read properties of undefined (reading 'toFixed')

Warum, und die Lösung

JavaScript beendet die return-Anweisung am Zeilenumbruch, also gibt total undefined zurück, und a + b läuft nie. Der Fehler zeigt sich erst später, dort, wo der Aufrufer das Ergebnis verwendet. Lassen Sie den Wert in der return-Zeile: return a + b;. Ein langer Wert kann mit einer öffnenden Klammer in dieser Zeile beginnen: return ( … );.

Ausgeben statt zurückgeben

function greeting(name) {
  console.log("Hello, " + name);
}
const text = greeting("Ada");
console.log(text.toUpperCase());

Was Node.js ausgibt

TypeError: Cannot read properties of undefined (reading 'toUpperCase')

Warum, und die Lösung

greeting gibt seine Zeile aus, das Programm wirkt also zuerst richtig, aber es hat kein return, also ist text undefined. Geben Sie den Wert zurück, return "Hello, " + name;, und lassen Sie den Aufrufer ihn ausgeben, wenn er ihn braucht.

return außerhalb einer Funktion

const stock = 0;
if (stock === 0) {
  console.log("sold out");
  return;
}
console.log("in stock");

Was Node.js ausgibt

SyntaxError: Illegal return statement

Warum, und die Lösung

return gehört in den Rumpf einer Funktion. Auf oberster Ebene einer Datei ist es ein SyntaxError, die Datei lässt sich also nicht lesen, und nicht einmal sold out wird ausgegeben. Verwenden Sie else für den anderen Zweig, oder setzen Sie den Code in eine Funktion und kehren Sie aus ihr zurück.

JavaScript im Browser: die eigene Engine Ihres Browsers in einem abgeschotteten Worker. Syntaxfehler findet acorn 8.18.0, MIT. Lizenz und Quellcode

Abschlussquiz

5 Fragen, ohne Hinweise. Ab 80 % ist die Lektion abgeschlossen.

Erledigen Sie zuerst alle Aufgaben oben, um das Abschlussquiz freizuschalten.

Problem melden

Etwas ist falsch oder unklar? Beschreiben Sie es kurz, dann wird es geprüft und korrigiert.

#

Mindestens 20 Zeichen.

Nur, wenn Sie eine Antwort wünschen.

Kernideen

return gibt einen Wert zurück

return beendet die Funktion sofort und gibt dem Aufrufer einen Wert zurück: Der Aufruf wird zu diesem Wert. const total = subtotal(prices) speichert also das Ergebnis, und ein Aufruf passt überall hin, wo ein Wert passt: subtotal(prices) * 2, oder als Argument eines anderen Aufrufs. Ausgeben ist etwas anderes. console.log in einer Funktion zeigt Text in der Konsole, aber der Aufrufer erhält nichts, womit er weiterarbeiten kann: Der Aufruf ist undefined. Lassen Sie Funktionen ihre Ergebnisse zurückgeben und den Aufrufer entscheiden, ob er sie ausgibt. Das macht sie wiederverwendbar, und Tests können prüfen, was sie zurückgeben.

undefined, und früh zurückkehren

Eine Funktion ohne return oder mit einem bloßen return; ergibt undefined: Der Rumpf läuft, und der Aufruf ist undefined. Weil return die Funktion sofort beendet, eignet es sich gut als Wächter. Prüfen Sie falsche Eingaben ganz oben und kehren Sie sofort zurück: if (weight <= 0) { return "invalid weight"; }. Alles unter dem Wächter behandelt nur noch gültige Eingaben, ohne else und ohne zusätzliche Verschachtelung. Mehrere returns in einer Funktion sind normal: Das erste, das läuft, gewinnt, und die Zeilen danach laufen in diesem Aufruf nie.

Mehrere Werte, und die Zeilenumbruch-Falle

Eine Funktion gibt einen Wert zurück. Für mehrere geben Sie ein Array oder ein Objekt zurück: return [low, high]; oder return {min: low, max: high};. Der Aufrufer liest sie als result[0] oder result.min. Objekte und kürzere Wege, sie auszupacken, kommen in Modul B5; hier sind sie nur ein Ausblick. Eine Falle: Brechen Sie die Zeile nie direkt nach return um. JavaScript beendet die Anweisung dort, also gibt return allein in einer Zeile, gefolgt von a + b;, undefined zurück und rechnet a + b nie aus. Lassen Sie den Wert, oder wenigstens seine öffnende Klammer, in der return-Zeile.

Quellen

Zuletzt geprüft am 3. Oktober 2026