Zum Inhalt springen
aviral gupta
Kontakt aufnehmen

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

Standardwerte und Rest-Parameter

Nach dieser Lektion wissen Sie, was ein Parameter ohne Argument enthält, geben ihm einen Standardwert und sammeln beliebig viele Argumente in einem Array.

Lektion 2 von 5 in B4 Funktionen

Danach können Sie

  • Vorhersagen, was ein Parameter ohne Argument enthält, und ihm einen Standardwert geben
  • Wissen, welche Argumente den Standardwert auslösen: ein fehlendes oder undefined, aber nicht null, 0 oder ""
  • Beliebig viele Argumente mit einem Rest-Parameter, ...items, in einem echten Array sammeln

  1. Aufwärmen · Aufgabe 1 von 7

    Zum Aufwärmen: Eine Funktion ist als function f(a, b) deklariert und wird als f(1) aufgerufen. Was enthält b in diesem Aufruf?

  2. Vorhersagen · Aufgabe 2 von 7

    Sagen Sie es vorher, bevor Sie weiterlesen: Was gibt dieser Code aus?

    function greet(name = "friend") {
  return "Hello, " + name;
}
console.log(greet(), "|", greet(null));

  3. Üben · Aufgabe 3 von 7

    Geben Sie factor den Standardwert 2, sodass scale(5) 10 ergibt und scale(5, 3) 15.

    function scale(value, factor____) {
  return value * factor;
}
console.log(scale(5), scale(5, 3));
    function scale(value, factor) {

  4. Üben · Aufgabe 4 von 7

    function show(a = "default") { return a; }. Ordnen Sie jedem Aufruf zu, was console.log dafür ausgibt.

  5. Üben · Aufgabe 5 von 7

    Was gibt dieser Code aus?

    function count(first, ...others) {
  return others.length;
}
console.log(count("a", "b", "c", "d"));

  6. Denksport · Aufgabe 6 von 7

    Knobelaufgabe. total addiert seine Argumente. Es wird einmal mit einem Array aufgerufen und einmal mit dem verteilten Array. Was gibt der Code aus?

    function total(...prices) {
  let sum = 0;
  for (const p of prices) {
    sum += p;
  }
  return sum;
}
const basket = [4, 6, 10];
console.log(total(basket), total(...basket));

  7. Anwenden · Aufgabe 7 von 7

    Mini-Aufgabe. Schreiben Sie receipt(customer, ...prices) mit dem Standardwert "guest" für customer. Die Funktion addiert die Preise und gibt eine Zeile wie Ada paid 12.5 EUR for 3 item(s) zurück. Rufen Sie sie mit einem Namen und drei Preisen auf, mit undefined und einem Preis, und mit einem Namen ganz ohne Preise.

    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 Pizza-Bestellzeile

orderLine erhält eine Pizza, eine Größe mit dem Standardwert "medium" und beliebig viele Beläge in einem Rest-Parameter. Achten Sie auf die vier Aufrufe: Einer lässt die Größe weg, einer übergibt sie, einer übergibt undefined, um den Standardwert zu behalten und trotzdem Beläge anzugeben, und einer übergibt null. Die letzte Zeile zeigt, dass ein Rest-Parameter ein Array ist, auch ein leeres. Führen Sie das Programm aus und fügen Sie einen fünften eigenen Aufruf hinzu.

main.js

// A pizza order line: a default size and any number of toppings.
function orderLine(pizza, size = "medium", ...toppings) {
  let line = size + " " + pizza;
  for (const t of toppings) {
    line += " + " + t;
  }
  return line;
}

function toppingsOf(...toppings) {
  return toppings;
}

console.log(orderLine("margherita"));
console.log(orderLine("margherita", "large"));
console.log(orderLine("funghi", undefined, "olives", "chili"));
console.log(orderLine("funghi", null));
console.log(toppingsOf("ham", "basil"), toppingsOf().length);

Ausführen mit

node main.js

Ausgabe

medium margherita
large margherita
medium funghi + olives + chili
null funghi
[ 'ham', 'basil' ] 0
  • Eine fehlende und eine undefined-Größe ergeben beide den Standardwert, medium.
  • null ist ein Wert, also gilt der Standardwert nicht, und die Zeile beginnt mit null.
  • toppings ist ein Array: Ohne Beläge ist es leer, und die for...of-Schleife läuft nicht.
  • toppingsOf() ohne Argumente gibt ein leeres Array zurück, dessen Länge 0 ist.
Ä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

Ein Gruß mit Standardwerten

greet(name, greeting) soll eine Zeile wie Hi, Ada! zurückgeben. Geben Sie name den Standardwert "guest" und greeting den Standardwert "Hello", sodass greet() Hello, guest! zurückgibt und greet(undefined, "Hey") Hey, guest!. Verwenden Sie Standardwerte in der Parameterliste, kein if im Rumpf.

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: greet() gibt undefined, undefined! zurück, weil beide Parameter fehlen.

  2. Hinweis 2

    Ein Standardwert steht direkt hinter dem Parameternamen: name = "guest".

  3. Hinweis 3

    Schreiben Sie beide: function greet(name = "guest", greeting = "Hello").

Eine Lösung zeigen

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

export function greet(name = "guest", greeting = "Hello") {
  return greeting + ", " + name + "!";
}
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 greet(name, greeting) {
  return greeting + ", " + name + "!";
}

main.test.js

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

test('greet() verwendet beide Standardwerte', () => {
  assert.equal(greet(), 'Hello, guest!', `greet() hat ${JSON.stringify(greet())} zurückgegeben, erwartet "Hello, guest!"`);
});

test('greet("Ada") behält den Standardgruß', () => {
  assert.equal(greet('Ada'), 'Hello, Ada!', `greet("Ada") hat ${JSON.stringify(greet('Ada'))} zurückgegeben, erwartet "Hello, Ada!"`);
});

test('greet("Ada", "Hi") verwendet beide Argumente', () => {
  assert.equal(greet('Ada', 'Hi'), 'Hi, Ada!', `greet("Ada", "Hi") hat ${JSON.stringify(greet('Ada', 'Hi'))} zurückgegeben, erwartet "Hi, Ada!"`);
});

test('undefined als Name ergibt den Standardwert', () => {
  assert.equal(greet(undefined, 'Hey'), 'Hey, guest!', `greet(undefined, "Hey") hat ${JSON.stringify(greet(undefined, 'Hey'))} zurückgegeben, erwartet "Hey, guest!"`);
});

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

Der Durchschnitt beliebig vieler Zahlen

average soll beliebig viele Zahlen als einzelne Argumente erhalten, average(2, 4, 6), und ihren Durchschnitt zurückgeben: 4. Ganz ohne Argumente gibt sie 0 zurück, statt durch null zu teilen. Der Startcode erwartet ein einzelnes Array und scheitert. Machen Sie aus dem Parameter einen Rest-Parameter und behandeln Sie den leeren Fall.

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: average(2, 4, 6) übergibt drei Argumente, numbers erhält aber nur die 2. Eine for...of-Schleife über eine Zahl scheitert.

  2. Hinweis 2

    Setzen Sie drei Punkte vor den Parameter: ...numbers sammelt alle Argumente in einem Array.

  3. Hinweis 3

    Ohne Argumente ist numbers ein leeres Array, und sum / 0 ist NaN. Geben Sie numbers.length === 0 ? 0 : sum / numbers.length zurück.

Eine Lösung zeigen

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

export function average(...numbers) {
  let sum = 0;
  for (const n of numbers) {
    sum += n;
  }
  return numbers.length === 0 ? 0 : sum / numbers.length;
}
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 average(numbers) {
  let sum = 0;
  for (const n of numbers) {
    sum += n;
  }
  return sum / numbers.length;
}

main.test.js

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

test('average(2, 4, 6) ist 4', () => {
  assert.equal(average(2, 4, 6), 4, `average(2, 4, 6) hat ${average(2, 4, 6)} zurückgegeben, erwartet 4`);
});

test('funktioniert mit zwei Zahlen', () => {
  assert.equal(average(1, 2), 1.5, `average(1, 2) hat ${average(1, 2)} zurückgegeben, erwartet 1.5`);
});

test('funktioniert mit einer Zahl', () => {
  assert.equal(average(5), 5, `average(5) hat ${average(5)} zurückgegeben, erwartet 5`);
});

test('average() ohne Zahlen ist 0', () => {
  assert.equal(average(), 0, `average() hat ${average()} zurückgegeben, erwartet 0`);
});

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 Argument vergessen

function shout(text) {
  return text.toUpperCase() + "!";
}
console.log(shout());

Was Node.js ausgibt

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

Warum, und die Lösung

shout() übergibt kein Argument, also ist text undefined, und undefined hat keine Methoden. Die Meldung nennt die Methode, die auf undefined gesucht wurde. Übergeben Sie das Argument, shout("hi"), oder geben Sie dem Parameter einen Standardwert: function shout(text = "") { … }.

Erwarten, dass null den Standardwert auslöst

function greet(name = "guest") {
  return "Hello, " + name.toUpperCase();
}
console.log(greet(null));

Was Node.js ausgibt

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

Warum, und die Lösung

Ein Standardwert gilt nur, wenn das Argument fehlt oder undefined ist. null wurde absichtlich übergeben, also ist name null und hat kein toUpperCase. Wenn ein Aufrufer null übergeben könnte, rufen Sie stattdessen greet(undefined) auf, oder prüfen Sie im Rumpf auf null, bevor Sie den Wert verwenden.

Ein Rest-Parameter, der nicht am Ende steht

function order(...items, customer) {
  return customer + ": " + items.length;
}
console.log(order("tea", "cake", "Ada"));

Was Node.js ausgibt

SyntaxError: Rest parameter must be last formal parameter

Warum, und die Lösung

Ein Rest-Parameter nimmt alles, was übrig ist, also kann nichts nach ihm kommen, und die Datei lässt sich nicht einmal lesen. Setzen Sie die einzelnen Parameter zuerst und den Rest-Parameter zuletzt: function order(customer, ...items), und rufen Sie order("Ada", "tea", "cake") auf.

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

Ein fehlendes Argument ist undefined

JavaScript prüft nicht, wie viele Argumente ein Aufruf übergibt. Ein Parameter ohne Argument enthält undefined, und überzählige Argumente werden ignoriert. function add(a, b) { return a + b; } ergibt bei add(2) also NaN, denn 2 + undefined ist keine Zahl. Eine String-Methode auf einem fehlenden Argument stoppt das Programm: text.toUpperCase() mit text gleich undefined ergibt TypeError: Cannot read properties of undefined (reading 'toUpperCase'). Kommt undefined oder NaN aus einer Funktion, prüfen Sie zuerst, ob jedes Argument übergeben wurde.

Standardwerte

Schreiben Sie = und einen Wert hinter einen Parameter, um ihm einen Standardwert zu geben: function greet(name = "guest"). Der Standardwert gilt, wenn das Argument fehlt oder undefined ist, und nur dann. null, 0, "" und false sind echte Werte, also ergibt greet(null) Hello, null. Ein Standardwert kann die Parameter davor verwenden: function box(width, height = width). Setzen Sie Parameter mit Standardwert hinter die ohne, damit Aufrufer sie am Ende weglassen können. Für einen Standardwert in der Mitte übergeben Sie undefined: orderLine("funghi", undefined, "olives").

Rest-Parameter sammeln den Rest

Drei Punkte vor dem letzten Parameter, wie in function total(...prices), sammeln alle übrigen Argumente in einem echten Array. Bleiben keine Argumente übrig, ist es ein leeres Array, nie undefined; prices.length und for (const p of prices) funktionieren also immer. Nur der letzte Parameter kann ein Rest-Parameter sein: function f(...items, last) ergibt SyntaxError: Rest parameter must be last formal parameter. Dieselben Punkte in einem Aufruf bewirken das Gegenteil: total(...basket) verteilt ein Array auf einzelne Argumente. Das ist hier nur ein Ausblick; Modul B5 behandelt Spread.

Quellen

Zuletzt geprüft am 3. Oktober 2026