Verstehen der Standardparameter in JavaScript

Der Autor hat den COVID-19 Relief Fund dazu ausgewählt, eine Spende im Rahmen des Programms Write for DOnations zu erhalten.

Einführung

In ECMAScript 2015 wurden Standardfunktionsparameter in die JavaScript-Sprache eingeführt. Diese ermöglichen Entwicklern, eine Funktion mit Standardwerten zu initialisieren, wenn dem Funktionsaufruf die Argumente nicht geliefert werden. Wenn Sie Funktionsparameter auf diese Weise initialisieren, werden Ihre Funktionen leichter lesbar und weniger fehleranfällig, und Sie erhalten ein Standardverhalten für Ihre Funktionen. Dies hilft Ihnen, Fehler zu vermeiden, die aus der Übergabe von undefined Argumenten und der Destrukturierung nicht vorhandener Objekte resultieren.

In diesem Artikel werden Sie den Unterschied zwischen Parametern und Argumenten überprüfen, lernen, wie man Standardparameter in Funktionen verwendet, alternative Möglichkeiten zur Unterstützung von Standardparametern sehen und erfahren, welche Arten von Werten und Ausdrücken als Standardparameter verwendet werden können. Sie werden auch Beispiele durcharbeiten, die zeigen, wie Standardparameter in JavaScript funktionieren.

Argumente und Parameter

Bevor die Standardfunktionsparameter erklärt werden, ist es wichtig zu wissen, worauf Parameter standardmäßig eingestellt werden können. Aus diesem Grund werden wir zunächst den Unterschied zwischen Argumenten und Parametern in einer Funktion untersuchen. Wenn Sie mehr über diese Unterscheidung erfahren möchten, lesen Sie unseren früheren Artikel in der JavaScript-Reihe, Definieren von Funktionen in JavaScript.

Im folgenden Codeblock erstellen Sie eine Funktion, die die Kubikzahl einer gegebenen Zahl, definiert als x, zurückgibt:

// Define a function to cube a number
function cube(x) {
  return x * x * x
}

Die Variable x in diesem Beispiel ist ein Parameter – eine benannte Variable, die an eine Funktion übergeben wird. Ein Parameter muss immer in einer Variable enthalten sein und darf niemals einen direkten Wert haben.

Werfen Sie nun einen Blick auf diesen nächsten Codeblock, der die soeben erstellte Funktion cube anruft:

// Invoke cube function
cube(10)

Dadurch erhalten Sie folgenden Output:

Output
1000

In diesem Fall ist 10 ein Argument – ein Wert, der einer Funktion beim Aufrufen übergeben wird. Häufig wird der Wert auch in einer Variable enthalten sein, wie in diesem nächsten Beispiel:

// Assign a number to a variable
const number = 10

// Invoke cube function
cube(number)

Dies führt zum gleichen Ergebnis:

Output
1000

Wenn Sie ein Argument nicht an eine Funktion übergeben, die ein solches erwartet, wird die Funktion implizit als Wert undefined verwendet:

// Invoke the cube function without passing an argument
cube()

Dies gibt zurück:

Output
NaN

In diesem Fall versucht cube() den Wert von undefined * undefined * undefined zu berechnen, was zu NaN oder „Not a Number“, also „Keine Zahl“, führt. Weitere Informationen hierzu finden Sie in dem Abschnitt Verstehen von Datenarten in JavaScript.

Dieses automatische Verhalten kann manchmal ein Problem darstellen. In einigen Fällen möchten Sie vielleicht, dass der Parameter einen Wert hat, auch wenn kein Argument an die Funktion übergeben wurde. Hier kommt die Standardparameter-Funktion ins Spiel, ein Thema, das Sie im nächsten Abschnitt behandeln werden.

Syntax der Standardparameter

Durch die Hinzufügung von Standardparametern in ES2015 können Sie nun jedem Parameter einen Standardwert zuweisen, den die Funktion beim Aufruf ohne Argument anstelle von undefined verwendet. Dieser Abschnitt zeigt Ihnen zunächst, wie Sie dies manuell tun, und führt Sie dann durch die Einstellung von Standardparametern.

Ohne Standardparameter müssten Sie explizit auf undefined Werte prüfen, um Standardwerte zu setzen, wie in diesem Beispiel gezeigt:

// Check for undefined manually
function cube(x) {
  if (typeof x === 'undefined') {
    x = 5
  }

  return x * x * x
}

cube()

Dabei wird mit Hilfe einer bedingten Anweisung geprüft, ob der Wert automatisch als undefined bereitgestellt wurde; dann wird der Wert von x auf 5 gesetzt. Dies führt zu der folgenden Ausgabe:

Output
125

Im Gegensatz dazu wird durch die Verwendung von Standardparametern dasselbe Ziel mit wesentlich weniger Code erreicht. Sie können dem Parameter in cube einen Standardwert zuweisen, indem Sie ihm den Gleichheitszuweisungsoperator (=), wie hier hervorgehoben, zuweisen:

// Define a cube function with a default value
function cube(x = 5) {
  return x * x * x
}

Wenn die Funktion cube nun ohne Argument aufgerufen wird, weist sie 5 zu x zu und gibt anstelle von NaN die Berechnung zurück:

// Invoke cube function without an argument
cube()

Output
125

Bei der Übergabe eines Arguments funktioniert sie weiterhin wie beabsichtigt, indem sie den Standardwert ignoriert:

// Invoke cube function with an argument
cube(2)

Output
8

Ein wichtiger zu beachtender Vorbehalt ist jedoch, dass der Standardparameterwert auch eine explizite undefined Übergabe als Argument an eine Funktion überschreibt, wie hier gezeigt:

// Invoke cube function with undefined
cube(undefined)

Dies ergibt die Berechnung mit x gleich 5:

Output
125

In diesem Fall wurden die Standardparameterwerte berechnet und ein expliziter Wert undefined hat sie nicht überschrieben.

Nachdem Sie nun eine Vorstellung von der grundlegenden Syntax von Standardparametern haben, zeigt der nächste Abschnitt, wie Standardparameter mit verschiedenen Datentypen funktionieren.

Datentypen für Standardparameter

Jeder primitive Wert oder jedes Objekt kann als Standardparameterwert verwendet werden. In diesem Abschnitt sehen Sie, wie diese Flexibilität die Möglichkeiten zur Verwendung von Standardparametern erhöht.

Zuerst setzen Sie Parameter, indem Sie eine Zahl, Zeichenfolge, booleschen Wert, ein Objekt, ein Array und einen Nullwert als Standardwert verwenden. In diesem Beispiel wird die Syntax der Pfeilfunktion verwendet:

// Create functions with a default value for each data type
const defaultNumber = (number = 42) => console.log(number)
const defaultString = (string = 'Shark') => console.log(string)
const defaultBoolean = (boolean = true) => console.log(boolean)
const defaultObject = (object = { id: 7 }) => console.log(object)
const defaultArray = (array = [1, 2, 3]) => console.log(array)
const defaultNull = (nullValue = null) => console.log(nullValue)

Wenn diese Funktionen ohne Parameter aufgerufen werden, verwenden sie alle die Standardwerte:

// Invoke each function
defaultNumber()
defaultString()
defaultBoolean()
defaultObject()
defaultArray()
defaultNull()

Output
42
"Shark"
true
{id: 7}
(3) [1, 2, 3]
null

Beachten Sie, dass jedes in einem Standardparameter erzeugte Objekt bei jedem Aufruf der Funktion erzeugt wird. Einer der häufigsten Anwendungsfälle für Standardparameter ist die Verwendung dieses Verhaltens, um Werte aus einem Objekt zu erhalten. Wenn Sie versuchen, einen Wert aus einem nicht existierenden Objekt zu destrukturieren oder auf einen Wert zuzugreifen, wird ein Fehler ausgelöst. Wenn der Standardparameter jedoch ein leeres Objekt ist, gibt er Ihnen einfach undefined Werte aus, anstatt einen Fehler zu verursachen:

// Define a settings function with a default object
function settings(options = {}) {
  const { theme, debug } = options

  // Do something with settings
}

Dadurch wird der Fehler vermieden, der durch die Destrukturierung nicht existierender Objekte verursacht wird.

Nachdem Sie nun gesehen haben, wie Standardparameter mit verschiedenen Datentypen arbeiten, erklärt der nächste Abschnitt, wie mehrere Standardparameter zusammenarbeiten können.

Verwenden mehrerer Standardparameter

Sie können in einer Funktion beliebig viele Standardparameter verwenden.  In diesem Abschnitt erfahren Sie, wie Sie dies tun und wie Sie damit das DOM in einem realen Beispiel manipulieren können.

Zuerst deklarieren Sie eine Funktion sum() mit mehreren Standardparametern:

// Define a function to add two values
function sum(a = 1, b = 2) {
  return a + b
}

sum()

Dies führt zu der folgenden Standardberechnung:

Output
3

Zusätzlich kann der in einem Parameter verwendete Wert in jedem nachfolgenden Standardparameter von links nach rechts verwendet werden. Beispielsweise erstellt diese Funktion createUser ein Benutzerobjekt userObj als dritten Parameter, und die Funktion selbst gibt nur userObj mit den ersten beiden Parametern zurück:

// Define a function to create a user object using parameters
function createUser(name, rank, userObj = { name, rank }) {
  return userObj
}

// Create user
const user = createUser('Jean-Luc Picard', 'Captain')

Wenn Sie user hier aufrufen, erhalten Sie Folgendes:

Output
{name: "Jean-Luc Picard", rank: "Captain"}

Es wird normalerweise empfohlen, alle Standardparameter an das Ende einer Parameterliste zu setzen, sodass Sie optionale Werte einfach weglassen können. Wenn Sie einen Standardparameter zuerst verwenden, müssen Sie undefined explizit übergeben, um den Standardwert zu verwenden.

Hier ist ein Beispiel mit dem Standardparameter am Anfang der Liste:

// Define a function with a default parameter at the start of the list
function defaultFirst(a = 1, b) {
  return a + b
}

Wenn Sie diese Funktion aufrufen, müssten Sie defaultFirst() mit zwei Argumenten aufrufen:

defaultFirst(undefined, 2)

Dies würde Folgendes ergeben:

Output
3

Hier ist ein Beispiel mit dem Standardparameter am Ende der Liste:

// Define a function with a default parameter at the end of the list
function defaultLast(a, b = 1) {
  return a + b
}

defaultLast(2)

Dies würde den gleichen Wert ergeben:

Output
3

Beide Funktionen haben das gleiche Ergebnis, aber diejenige mit dem Standardwert am Ende ermöglicht einen wesentlich saubereren Funktionsaufruf.

Für ein Beispiel aus der realen Welt ist hier eine Funktion, die ein DOM-Element erstellt und ein Text-Label und Klassen, falls vorhanden, hinzufügt.

// Define function to create an element
function createNewElement(tag, text, classNames = []) {
  const el = document.createElement(tag)
  el.textContent = text

  classNames.forEach(className => {
    el.classList.add(className)
  })

  return el
}

Sie können die Funktion mit einigen Klassen in einem Array aufrufen:

const greeting = createNewElement('p', 'Hello!', ['greeting', 'active'])

Der Aufruf von greeting ergibt den folgenden Wert:

Output
<p class="greeting active">Hello!</p>

Wenn Sie jedoch das Array classNames aus dem Funktionsaufruf herauslassen, funktioniert die Funktion immer noch.

const greeting2 = createNewElement('p', 'Hello!')

greeting2 hat nun den folgenden Wert:

Output
<p>Hello!</p>

In diesem Beispiel kann forEach() auf ein leeres Array ohne Ausgabe angewendet werden. Wenn dieses leere Array nicht im Standardparameter festgelegt wäre, würden Sie den folgenden Fehler erhalten:

Output
VM2673:5 Uncaught TypeError: Cannot read property 'forEach' of undefined
    at createNewElement (<anonymous>:5:14)
    at <anonymous>:12:18

Nachdem Sie nun gesehen haben, wie mehrere Standardparameter zusammenwirken können, können Sie mit dem nächsten Abschnitt fortfahren, um zu sehen, wie Funktionsaufrufe als Standardparameter funktionieren.

Funktionsaufrufe als Standardparameter

Zusätzlich zu den Primitiven und Objekten kann das Ergebnis des Aufrufs einer Funktion als Standardparameter verwendet werden.

In diesem Codeblock erstellen Sie eine Funktion, die eine Zufallszahl zurückgibt und verwenden dann das Ergebnis als Standardparameterwert in einer Funktion cube:

// Define a function to return a random number from 1 to 10
function getRandomNumber() {
  return Math.floor(Math.random() * 10)
}

// Use the random number function as a default parameter for the cube function
function cube(x = getRandomNumber()) {
  return x * x * x
}

Wenn Sie nun die Funktion cube ohne Parameter aufrufen, hat jeder Aufruf der Funktion potenziell unterschiedliche Ergebnisse:

// Invoke cube function twice for two potentially different results
cube()
cube()

Die Ausgabe dieser Funktionsaufrufe wird variieren:

Output
512
64

Sie können sogar integrierte Methoden verwenden, wie beispielsweise die des Objekts Math, und den in einem Funktionsaufruf zurückgegebenen Wert als Parameter in einer anderen Funktion verwenden.

Im folgenden Beispiel wird x eine Zufallszahl zugewiesen, die als Parameter in der von Ihnen erstellten Funktion cube verwendet wird. Der Parameter y berechnet dann die Würfelwurzel der Zahl und überprüft, ob x und y gleich sind:

// Assign a random number to x
// Assign the cube root of the result of the cube function and x to y
function doesXEqualY(x = getRandomNumber(), y = Math.cbrt(cube(x))) {
  return x === y
}

doesXEqualY()

Dadurch ergibt sich Folgendes:

Output
true

Ein Standardparameter kann sogar, wie in diesem Beispiel, eine Funktionsdefinition sein, die einen Parameter als innere Funktion definiert und den Funktionsaufruf von parameter zurückgibt:

// Define a function with a default parameter that is an anonymous function
function outer(
  parameter = function inner() {
    return 100
  }
) {
  return parameter()
}

// Invoke outer function
outer()

Output
100

Die Funktion inner wird bei jedem Aufruf der Funktion outer von Grund auf neu erzeugt.

Zusammenfassung

In diesem Artikel haben Sie gelernt, was Standardfunktionsparameter sind und wie sie verwendet werden.  Jetzt können Sie Standardparameter verwenden, um Ihre Funktionen sauber und leicht lesbar zu halten. Sie können Parametern auch im Voraus leere Objekte und Arrays zuweisen, um sowohl die Komplexität als auch die Codezeilen zu reduzieren, wenn es um Situationen wie das Abrufen von Werten aus einem Objekt oder das Durchschleifen eines Arrays geht.

Wenn Sie mehr über JavaScript erfahren möchten, besuchen Sie die Homepage für unsere Reihe Codieren in JavaScript oder durchsuchen Sie unsere Reihe Codieren in Node.js für Artikel über Back-End-Entwicklung.