Parameter und return in JavaScript

Problem

Ein Bon, verschiedene Summen

Du willst eine Funktion, die die letzte Zeile des Bons ausgibt: „Summe: … €“. Aber die Summe ist bei jeder Bestellung anders.

Die Funktionen aus der letzten Lektion geben immer dasselbe aus. Eine Funktion printTotal() kann die Summe nicht kennen. Eine eigene Funktion für jede Summe willst du auch nicht. Du brauchst einen Weg, der Funktion die Summe beim Aufruf zu übergeben.

Die Idee

Parameter: was die Funktion bekommt

In die Klammern schreibst du einen Namen für das, was die Funktion erwartet. Das ist ein Parameter. In der Funktion ist er eine ganz normale Variable.

Beim Aufruf schreibst du den Wert in die Klammern. Dieser Wert heißt Argument.

function printTotal(total) {
  console.log(`Summe: ${total} €`);
}

printTotal(12.5);
printTotal(4.2);

Summe: 12.5 €
Summe: 4.2 €

total ist der Parameter. 12.5 und 4.2 sind die Argumente. Es gibt eine Funktion, und sie gibt verschiedene Summen aus.

Vor den Parameter schreibst du keinen Typ: JavaScript prüft nicht, was du übergibst. Übergibst du Text statt einer Zahl, gibt die Funktion ihn aus, ohne sich zu beschweren. Deshalb muss der Name des Parameters klar sagen, was erwartet wird.

Gibt es mehrere Parameter, trennst du sie mit Kommas. Die Argumente werden in derselben Reihenfolge übergeben.

Probier es aus

Nach Position, nicht nach Name

Was gibt das Programm aus?

function printLine(item, qty) {
  console.log(`${item}: ${qty} Stk.`);
}

const coffee = "Kaffee";
const qty = 3;
printLine(coffee, 2);

Antwort

Kaffee: 3 Stk.

coffee: 2 Stk.

Kaffee: 2 Stk.

Problem

Warum ist der Preis nicht gesunken?

Du hast eine Funktion für 10 % Rabatt geschrieben und sie aufgerufen:

function applyDiscount(price) {
  price = price * 0.9;
}

const price = 100;
applyDiscount(price);
console.log(price);  // 100

Der Preis ist immer noch 100. Die Funktion meldet keinen Fehler, und trotzdem ist der Rabatt nicht da. Wo ist er geblieben?

Sieh es dir an

Die Funktion bekommt eine Kopie

function applyDiscount(price) {
  price = price * 0.9;
}

const price = 100;
applyDiscount(price);
console.log(price);  // 100

Schritt für Schritt, in Worten

Im Programm gibt es eine Variable price = 100.
Du rufst applyDiscount(price) auf: Für die Funktion wird neuer Speicher bereitgestellt.
Der Wert wird in ihren Parameter price kopiert.
Die Funktion senkt ihre Kopie: 100 * 0.9 = 90.
Die Funktion endet, und ihr Speicher verschwindet, zusammen mit der Kopie.
Und price im Programm ist immer noch 100.

Beim Aufruf bekommt die Funktion nicht die Variable price selbst, sondern eine Kopie ihres Werts. Sie senkt die Kopie. Wenn die Funktion endet, verschwindet ihr Speicher und mit ihm die Kopie. Das nennt man Wertübergabe (pass by value).

Die beiden Variablen heißen absichtlich gleich (price): Genau das verwirrt in der Praxis. Der Name spielt keine Rolle. Jede Funktion hat ihre eigenen Variablen.

Genauer, für Neugierige

In JavaScript werden Argumente immer als Wert übergeben. Bei Arrays und Objekten wird der Verweis auf sie kopiert, deshalb sind Änderungen in der Funktion auch draußen zu sehen:

function addItem(items) {
  items.push("Milch");
}

const cart = ["Brot"];
addItem(cart);
console.log(cart);

[ 'Brot', 'Milch' ]

Objekte schauen wir uns im Modul „Klassen und Objekte“ an.

Die Idee

return: Die Funktion gibt ein Ergebnis zurück

Die Lösung: Die Funktion gibt den neuen Preis zurück. In den Rumpf schreibst du return und den Wert. Einen Typ für das Ergebnis schreibst du nicht: function bleibt gleich, ob die Funktion etwas zurückgibt oder nicht.

function applyDiscount(price) {
  return price * 0.9;
}

let price = 100;
price = applyDiscount(price);
console.log(price);  // 90

Schritt für Schritt, in Worten

Im Programm: price = 100.
Du rufst applyDiscount(price) auf: Für die Funktion wird Speicher bereitgestellt.
Der Wert wird in den Parameter price kopiert.
return price * 0.9: Das Ergebnis ist 90.
Das Ergebnis geht zurück ans Programm und wird in price gespeichert.
Jetzt ist price im Programm 90.

Der Aufruf applyDiscount(price) ist jetzt ein Wert. Du kannst ihn in einer Variable speichern (wie hier), ausgeben oder mit ihm rechnen.

Genauer, für Neugierige

Eine Funktion ohne return gibt trotzdem etwas zurück: undefined, den Wert für „nichts“. Gibst du das Ergebnis der ersten Version aus, die nur ihre eigene Kopie gesenkt hat, siehst du genau das:

function applyDiscount(price) {
  price = price * 0.9;
}

console.log(applyDiscount(100));

undefined

Du kannst return auch ohne Wert schreiben. Es beendet einfach die Funktion.

Eine Funktion kann mehrere Werte auf einmal in einem Array zurückgeben, und beim Aufruf verteilst du sie mit den Klammern [ ] auf einzelne Variablen:

function getLimits() {
  return [1, 10];
}

const [low, high] = getLimits();
console.log(low, high);

1 10

Probier es aus

Was ist das Ergebnis?

Die Funktion berechnet 20 % Mehrwertsteuer auf den Preis. Was gehört in die Lücke, damit der Aufrufer das Ergebnis bekommt?

function vat(price) {
   price * 0.2;
}

return: Ohne es rechnet die Funktion price * 0.2 aus und wirft das Ergebnis weg, und der Aufruf liefert undefined.

Probier es aus

Zurückgegeben, aber verloren

Was gibt das Programm aus?

function reserve(seats) {
  seats = seats - 2;
  console.log(`drinnen: ${seats}`);
  return seats;
}

const seats = 10;
reserve(seats);
console.log(`draußen: ${seats}`);

Antwort

drinnen: 8
draußen: 10

drinnen: 8
draußen: 8

drinnen: 10
draußen: 10

Die Idee

return beendet die Funktion

Der Shop berechnet für Bestellungen ab 50 € keine Lieferung. Sonst kostet die Lieferung 4,99 €:

function shippingCost(total) {
  if (total >= 50) {
    return 0;
  }
  return 4.99;
}

console.log(shippingCost(62.0));
console.log(shippingCost(18.5));

0
4.99

Sobald return erreicht ist, endet die Funktion sofort. Deshalb läuft bei 62 € das zweite return nicht, und wir brauchen kein else.

Eine Funktion mit Ergebnis muss auf jedem Weg einen Wert zurückgeben. Aber JavaScript prüft das nicht. Entfernst du die letzte Zeile, läuft das Programm, und bei einer Bestellung von 18,50 € erreicht die Funktion ihr Ende ohne return und gibt undefined zurück:

function shippingCost(total) {
  if (total >= 50) {
    return 0;
  }
}

console.log(shippingCost(62.0));
console.log(shippingCost(18.5));

0
undefined

Es gibt keine Fehlermeldung, deshalb ist so ein Versehen schwer zu finden. Achte auf die Ausgabe und probier jeden Weg durch die Funktion aus.

Probier es aus

Finde den Fehler

Clubmitglieder bekommen 10 % Rabatt, alle anderen zahlen den vollen Preis. Aber alle bekommen den Rabatt. In welcher Zeile ist der Fehler?

Wähle die Zeile mit dem Fehler.

Übung

Funktionen, die rechnen

Löse die Aufgaben in deinem Editor. Jede Funktion bekommt, was sie braucht, als Parameter und gibt das Ergebnis zurück. Die Ausgabe passiert außerhalb der Funktionen, in den Zeilen darunter.

1. Durchschnitt. Die Funktion average(values) gibt den Durchschnitt der Zahlen im Array zurück. Lies darunter von der Tastatur ein, wie viele Zahlen es gibt, und dann die Zahlen selbst.

Durchschnitt: 20

2. Primzahl. Die Funktion isPrime(n) gibt zurück, ob die Zahl eine Primzahl ist (nur durch 1 und durch sich selbst teilbar). Für 7 gibt sie true zurück, für 12 false.

3. Temperaturen. Die Funktionen toFahrenheit(c) und toCelsius(f). F = C · 9 / 5 + 32. Lies eine Temperatur und eine Einheit (C oder F) ein und gib die umgerechnete aus.

100
C

100 C = 212 F

4. Taschenrechner. Die Funktion calculate(a, b, op) gibt das Ergebnis für +, -, * oder / zurück. Die Rechenart wird mit if gewählt.

10
5
+

10 + 5 = 15

5. Ein Dreieck mit Parameter. Wir haben es in der letzten Lektion versprochen. Die Funktion printTriangle(height) gibt ein rechtwinkliges Dreieck aus Sternchen mit der Höhe height aus. Für 3:

*
* *
* * *

Genauer, für Neugierige

In JavaScript liefert / immer eine Dezimalzahl, also ist 5 / 9 0,5555… und nicht 0 wie in Java und C#. Wenn du den ganzzahligen Teil brauchst, schreib Math.trunc(a / b):

console.log(5 / 9);
console.log(Math.trunc(7 / 2));

0.5555555555555556
3

Übung

Funktionen für Arrays

Jede Aufgabe ist eine Funktion, die ein Array (oder ein Wort) bekommt und ein Ergebnis zurückgibt. Am Ende setzt du alle zu einem Programm zusammen.

sum, sumEven und sumOdd: die Summe aller Zahlen, der geraden und der ungeraden im Array.
reverse: gibt ein neues Array mit den Zahlen in umgekehrter Reihenfolge zurück.
max und min: die größte und die kleinste Zahl.
isPalindrome(word): ob das Wort vorwärts und rückwärts gleich gelesen wird.
sumDiagonals und sumDiagonalsOnce: die Summe entlang beider Diagonalen einer quadratischen Matrix, wobei das mittlere Element zweimal bzw. einmal gezählt wird.
Alles zusammen: für das Array [1, 2, 3, 4, 5], die Zahl 7 (mit isPrime aus der Karte darüber), die Wörter „neben“ und „ABCDE“ und die 3 × 3-Matrix mit den Zahlen von 1 bis 9.

Summe: 15, Gerade: 6, Ungerade: 9
Umgekehrt: [5, 4, 3, 2, 1]
Max: 5, Min: 1
7 ist eine Primzahl: true
neben: true, ABCDE: false
Summe mit Wiederholung: 30, Summe ohne Wiederholung: 25

Test

Teste dich

1. Was ist in function vat(price) { … } der Parameter?pricefunctionvat

2. Eine Funktion gibt ihrem Parameter einen neuen Wert. Was passiert mit der Variable, die du beim Aufruf übergeben hast?Das hängt davon ab, ob ihre Namen gleich sindSie ändert sich auchNichts: Die Funktion hat nur ihre eigene Variable geändert

3. Was macht return?Es gibt den Wert ausEs gibt den Wert zurück, aber die Funktion läuft bis zum Ende weiterEs gibt den Wert zurück und beendet die Funktion sofort

4. Eine Funktion erreicht ihr Ende, ohne an einem return vorbeizukommen. Was gibt sie zurück?undefinedDas Programm bricht mit einem Fehler ab0

5. Was macht die Zeile price = applyDiscount(price);?Sie ruft die Funktion auf und speichert das zurückgegebene Ergebnis in priceSie vergleicht price mit dem Ergebnis der FunktionSie verbindet price dauerhaft mit dem Parameter

Parameter und return

Cookies