Viele Programmiersprachen verfügen über diese Möglichkeit. Anstatt alle Parameter für eine Funktion zu definieren, können ihr eine beliebige Anzahl von Parametern an eine Funktion übergeben und dann mit ihnen arbeiten.

Funktionen mit statischen Parametern

Bevor wir uns mit dynamischen Parametern beschäftigen, führen wir erst einmal eine Funktion ein, mit der wir dann anschließend arbeiten können. Wie wäre es mit einer, die zwei Zahlen addiert?

function sum( a, b ) {
    return a + b;
}
 
console.log( sum( 4, 5 ) ); // 9

Nichts Besonderes hier, oder? Aber was würde passieren, wenn wir dem Funktionsaufruf einfach weitere Parameter hinzufügen?

console.log( sum( 4, 5, 6 ) ); // 9

Es würde nichts passieren, da die Funktion nur die ersten beiden Parameter verwendet. Wir erhalten aber auch keine Fehlermeldung. JavaScript verwendet den dritten Parameter einfach nicht.

Das arguments Objekt

Auch wenn wir den dritten Parameter nicht verwenden, ist er immer noch verfügbar. Aber wie können wir ihn verwenden, wenn wir keinen Parameternamen für ihn haben? Wir können das arguments Objekt verwenden, um alle Parameter zu erhalten, selbst dann, wenn wir überhaupt keine Parameter definiert haben:

function sum() {
  let total = 0;
  for (const number of arguments) {
    total += number;
  }
  return total;
}
 
console.log( sum( 4, 5 ) ); // 9
console.log( sum( 4, 5, 6 ) ); // 15

Das arguments Objekt funktioniert ähnlich wie ein Array. Ihr können mit arguments[0] auf den ersten Parameter zugreifen usw. In unserer Funktion sum() haben wir überhaupt keine Argumente, wie zuvor erwähnt. Aber man kann auch definierte Parameter mit zusätzlichen kombinieren:

function someFunction( a, b ) {
    console.log( a ); // 4
    console.log( b ); // 5
    console.log( arguments ); // [4, 5, 'a string', Array(2), ...]
}
 
someFunction( 4, 5, 'a string', [ 'an', 'array' ] );

Das arguments-Objekt enthält immer alle Parameter, die an die Funktion übergeben werden, auch solche mit einem Namen. Das Objekt hat noch einige andere Eigenschaften, über die ihr in der Dokumentation mehr erfahren könnt.

Der Rest-Parameter

Eine modernere Art, dynamische Parameter in JavaScript zu verwenden, ist der Rest -Parameter. Lasst uns wieder mit einem einfachen Beispiel beginnen. Wir implementieren unsere Funktion sum() und verwenden dieses Mal den Rest-Parameter:

function sum( ...numbers ) {
    let total = 0;
    for ( const number of numbers ) {
        total += number;
    }
    return total;
}
 
console.log( sum( 4, 5 ) ); // 9
console.log( sum( 4, 5, 6 ) ); // 15

Der einzige Parameter ist hier „...numbers“ und das ist der „Rest-Parameter“. Ein weiteres gutes Beispiel ist dieses:

function calc( operation, ...numbers ) {
    switch ( operation ) {
        case "sum":
            return numbers.reduce( ( total, num ) => total + num, 0 );
        case "multiply":
            return numbers.reduce( ( product, num ) => product * num, 1 );
        case "subtract":
            return numbers.reduce( ( difference, num ) => difference - num );
        case "divide":
            return numbers.reduce( ( quotient, num ) => quotient / num );
        default:
            console.error(`Invalid operation "${operation}"`);
            return;
    }
}
 
console.log( calc( "sum", 4, 5, 6 ) ); // 15
console.log( calc( "multiply", 4, 5, 6  ) ); // 120

Jetzt macht der „Rest“ Sinn, oder? Wir haben einige normale Parameter, gefolgt vom Rest-Parameter, der alle anderen Parameter enthält, eben einfach ausgedrückt, den „Rest“ der Parameter. Es kann immer nur einen Rest-Parameter geben, und dieser muss der letzte Parameter sein. Dieses Beispiel zeigt auch einen guten Anwendungsfall für die Funktion console.error() aus unserem letzten Blogbeitrag.

Bonus: das arguments Objekt verwendet als Rest-Parameter

In unserem ersten Beispiel für den Rest-Parameter bräuchten wir nicht einmal den Parameter ...numbers, da er der einzige Parameter ist. Wir hätten einfach das arguments Objekt in Kombination mit dem Spread-Operator wie folgt verwenden können:

function sum() {
  let total = 0;
  const numbers = [...arguments]; // Convert arguments object to a real array
  for (const number of numbers) {
    total += number;
  }
  return total;
}

Diese Umwandlung in Zeile 3 ist eigentlich nicht notwendig, da sich das arguments Objekt sehr ähnlich zu einem Array verhält, aber man kann es trotzdem tun, je nach eigenem Anwendungsfall dafür. Sobald ihr aber mehr (benannte) Parameter habt, würde das wahrscheinlich nicht mehr funktionieren.

Fazit

Eine Funktion mit einer festen Anzahl von Argumenten kann zu unflexibel sein, vor allem, wenn man mit Arrays oder Listen arbeitet. In diesen Fällen kann der Rest-Parameter oder das arguments Objekt helfen, einige schöne und kurze Funktionen zu schreiben.