JavaScript Funktionen deklarieren: Syntax & Hoisting

Eine Funktion ist ein benannter Block von Anweisungen

Immer wenn du einem Stück Logik einen Namen geben und es wiederverwenden willst, schreibst du eine Funktion. Der älteste und einfachste Weg in JavaScript ist die Function Declaration – also das Schlüsselwort function, gefolgt von einem Namen.

Wenn wir das von vorne nach hinten durchgehen:

• function ist das Schlüsselwort, mit dem eine Funktionsdeklaration beginnt.
• greet ist der Name der Funktion.
• (name) ist die Parameterliste – also die Eingaben, die die Funktion entgegennimmt.
• Der Block in geschweiften Klammern ist der Funktionsrumpf.
• greet("Ada") ist ein Aufruf. JavaScript führt den Rumpf aus, wobei name an "Ada" gebunden ist.

Eine Funktion zu definieren heißt noch nicht, sie auszuführen. Erst der Aufruf startet sie.

Parameter und Argumente

Der Begriff Parameter bezeichnet den Namen innerhalb der Funktionsdefinition. Argument dagegen ist der konkrete Wert, den du beim Aufruf übergibst. Umgangssprachlich werden beide Begriffe oft synonym verwendet – beim Entziffern von Fehlermeldungen lohnt sich der Unterschied allerdings.

Hier sind base und exponent die Parameter. 2 und 10 sind die Argumente. JavaScript ordnet sie der Reihe nach zu: Das erste Argument landet beim ersten Parameter und so weiter.

Anders als manche Sprachen meckert JavaScript nicht, wenn du die falsche Anzahl Argumente übergibst. Fehlende Werte sind schlicht undefined, überzählige werden stillschweigend ignoriert. Das ist flexibel – und manchmal eine Stolperfalle. Zu Default-Werten und Rest-Parametern kommen wir in späteren Kapiteln.

return: Werte aus einer Funktion zurückgeben

console.log schreibt etwas in die Konsole. return dagegen gibt einen Wert an den Aufrufer zurück, damit dieser weiter damit arbeiten kann:

Ohne return liefert eine Funktion undefined zurück:

return beendet die Funktion außerdem sofort. Frühe Returns sind der übliche Weg, um bei Sonderfällen auszusteigen, bevor die eigentliche Logik überhaupt losgeht:

Early Returns verhindern, dass der eigentliche Funktionskörper zu einer Pyramide aus if/else wird.

Hoisting: Funktion aufrufen, bevor sie deklariert ist

Jetzt kommt ein Punkt, der Umsteiger aus anderen Sprachen immer wieder überrascht: Function Declarations werden gehoistet. JavaScript zieht sie also intern an den Anfang ihres Scopes, bevor überhaupt Code ausgeführt wird. Konkret heißt das: Du kannst eine Funktion schon in einer Zeile aufrufen, die über ihrer Deklaration steht:

Der Code läuft ohne Probleme. Bevor die Engine mit der Ausführung beginnt, scannt sie den Scope, registriert square als Funktion und arbeitet danach erst die Anweisungen von oben nach unten ab.

Das ist ein echter Verhaltensunterschied zwischen Function Declarations und den anderen Möglichkeiten, eine Funktion zu definieren (Function Expressions, Arrow Functions). Letztere werden zwar wie Variablen gehoistet — der Name ist bekannt, aber der Wert wird erst zugewiesen, wenn die entsprechende Zeile tatsächlich ausgeführt wird. Mehr zu diesem Unterschied gleich.

Die meisten Style Guides empfehlen ohnehin, Funktionen zu definieren, bevor du sie aufrufst. Hoisting ist ein Sicherheitsnetz, kein Stilmittel, auf das man bauen sollte.

Function Declaration vs. Function Expression

Eine Function Declaration steht als eigenständige Anweisung für sich. Eine Function Expression taucht dort auf, wo ein Wert erwartet wird — typischerweise als rechte Seite einer Zuweisung:

Beide erzeugen aufrufbare Funktionen. Die Unterschiede im Detail:

• Function Declarations werden vollständig gehoistet. Expressions folgen dagegen den Hoisting-Regeln der Variable, der sie zugewiesen werden (const und let liegen bis zur entsprechenden Zeile in der temporalen Todeszone).
• Declarations müssen einen Namen haben. Expressions dürfen anonym sein – ein Name hilft aber beim Lesen von Stack Traces.
• Declarations darf man nicht einfach überall hinschreiben. Im Strict Mode verhält sich ein function foo() {} innerhalb eines if-Blocks je nach Engine unterschiedlich – hier greift man besser zu einer Expression.

Für die meisten Helferfunktionen auf oberster Ebene einer Datei liest sich eine Declaration angenehm. Werden Funktionen dagegen als Argument übergeben oder einer Property zugewiesen, nimmt man üblicherweise eine Function Expression (oder eine Arrow Function).

Benennung und Stil

Der Name einer Funktion ist ein Versprechen darüber, was sie tut. Ein paar Zeichen mehr für einen aussagekräftigen Namen zahlen sich schon beim ersten Lesen des Codes aus.

Ein paar Konventionen, die sich bewährt haben:

• Funktionsnamen sollten Verben sein: fetchProfile, computeTotal, sendEmail.
• Schreib im camelCase – das ist in JavaScript Standard.
• Funktionen, die einen Boolean zurückgeben, beginnen oft mit is, has oder can: isValid, hasAccess, canEdit.

Ziel ist, dass der Aufruf sich später wie ein natürlicher Satz liest.

Ein kleines Beispiel aus der Praxis

Jetzt setzen wir alles zusammen – Parameter, ein frühzeitiges return und ein sprechender Name:

Eine Deklaration, ein Guard-Clause, ein klares return. Dieses Muster deckt die meisten Funktionen ab, die du je schreiben wirst.

Als Nächstes: Arrow Functions

Function Declarations sind das Arbeitstier, aber modernes JavaScript setzt an vielen Stellen auf eine kürzere Schreibweise – Arrow Functions – gerade bei Callbacks und Einzeilern. Sie sehen anders aus, verhalten sich rund um this anders und sind das Thema der nächsten Seite.