Standardparameter von Funktionen in JavaScript: Vom Chaos zur Eleganz

Parameter ohne Geschenk? Wir klären die Standardwerte in JavaScript

Stellen Sie sich vor, Sie bestellen eine Pizza. Sie rufen beim Lieferservice an und sagen: „Ich hätte gerne eine Pizza, bitte.“ Der Mitarbeiter fragt nach: „Welche?“ – „Na, die Standard-Pizza mit Käse und Salami.“ Sie denken nicht einmal darüber nach, dass die Pizza Standardparameter hat.

Genauso ist es in JavaScript: Funktionen werden oft ohne alle Argumente aufgerufen. Und wenn der Programmierer kein set a default parameter value for a JavaScript function vorgesehen hat, kann der Code abstürzen oder sich unvorhersehbar verhalten. In diesem Artikel analysieren wir alle Möglichkeiten, einen Standardwert für einen Funktionsparameter in JS festzulegen – von den guten alten Notlösungen bis zur modernen ES6-Syntax. Los geht's!

Warum ist das überhaupt wichtig?

Angenommen, wir haben eine Funktion, die einen Benutzer begrüßt:

function greet(name) {\n    console.log('Hallo, ' + name + '!');\n}\n\ngreet(); // Gibt aus: "Hallo, undefined!" – unangenehm, oder?

Ohne default parameters javascript wird ein nicht übergebenes Argument zu undefined. Und wenn wir versuchen, eine Methode auf undefined aufzurufen, erhalten wir einen Fehler. Daher sind Parameter Standardwerte JS nicht nur eine Bequemlichkeit, sondern ein Schutz vor Bugs.

Methode 1: Klassiker – Der ternäre Operator (oder if)

Vor der Einführung von ES6 verwendeten Entwickler den ternären Operator in JavaScript oder eine einfache Prüfung. Das funktioniert, sieht aber umständlich aus:

function multiply(a, b) {\n    a = a !== undefined ? a : 1;\n    b = b !== undefined ? b : 2;\n    return a * b;\n}\n\nconsole.log(multiply(5)); // 10 (5 * 2)\nconsole.log(multiply());  // 2 (1 * 2)

Vorteile: Auch für Anfänger verständlich, kompatibel mit alten Browsern.
\nNachteile: Der Code wird aufgebläht. Bei 5–6 Parametern sinkt die Lesbarkeit drastisch.

Stolperfalle: Prüfung auf undefined vs. truthy

Viele Anfänger schreiben so:

function greet(name) {\n    name = name || 'Gast';\n    console.log('Hallo, ' + name);\n}

Das funktioniert, solange Sie nicht 0, einen leeren String '' oder false übergeben. Alle diese Werte sind falsy, und die Funktion ersetzt sie durch 'Gast'. Wenn Sie 0 als gültigen Wert übergeben müssen, wird dieser Ansatz fehlschlagen. Verwenden Sie eine strikte Prüfung auf undefined.

Methode 2: Das magische arguments-Objekt

Innerhalb jeder Funktion (außer Pfeilfunktionen) gibt es ein implizites, array-ähnliches Objekt arguments javascript. Es kann verwendet werden, um die übergebenen Argumente zu prüfen:

function showInfo(name, age) {\n    name = arguments.length > 0 ? name : 'Anonym';\n    age = arguments.length > 1 ? age : 'nicht angegeben';\n    return `${name}, Alter: ${age}`;\n}\n\nconsole.log(showInfo()); // Anonym, Alter: nicht angegeben

Vorteile: Bietet vollständige Kontrolle darüber, welche Argumente übergeben wurden.
\nNachteile: Die Syntax ist veraltet, funktioniert nicht in Pfeilfunktionen. Wird normalerweise nur für sehr spezifische Aufgaben verwendet (z. B. wenn die Anzahl der Parameter im Voraus unbekannt ist).

Methode 3: Moderner Standard – ES6-Standardparameter

Seit ECMAScript 2015 können Parameter Standardwerte JS direkt in der Funktionsdeklaration festgelegt werden. Dies ist die sauberste und empfohlene Methode:

function multiply(a = 1, b = 2) {\n    return a * b;\n}\n\nconsole.log(multiply(5)); // 10\nconsole.log(multiply());  // 2

Schön, oder? Aber es gibt wichtige Nuancen, die Sie kennen müssen, um nicht in eine Falle zu tappen.

Nuance 1: Standardwerte werden zum Zeitpunkt des Aufrufs ausgewertet

Das bedeutet: Wenn Sie undefined übergeben, wird der Standardwert verwendet. Wenn Sie null übergeben, nicht:

function test(x = 10) {