JavaScript-Funktionen

Einführung in JavaScript-Funktionen

Eine Funktion ist ein wiederverwendbarer Codeblock, der eine bestimmte Aufgabe erfüllt. Anstatt dieselben Anweisungen überall zu wiederholen, schreibt man sie einmal, gibt ihnen einen Namen und ruft sie bei Bedarf auf, indem man die Funktion aufruft. Funktionen sind eines der grundlegenden Bausteine von JavaScript: Sie ermöglichen es, Code zu organisieren, Wiederholungen zu vermeiden und komplexe Programme aus kleinen, testbaren Einheiten aufzubauen.

Dieses Kapitel behandelt, wie man Funktionen definiert, Daten mit Parametern übergibt, Daten mit return zurückgibt, und die drei Hauptformen, die im echten Code vorkommen: Deklarationen, Ausdrücke und Pfeilfunktionen. Außerdem werden Hoisting und Scope erklärt — zwei Verhaltensweisen, die Anfänger oft überraschen.

Eine Funktion definieren

Grundlegende Funktionssyntax

Eine Funktionsdeklaration verwendet das Schlüsselwort function, gefolgt von einem Namen, einer durch Kommas getrennten Liste von Parametern in runden Klammern und einem Block von Anweisungen in geschweiften Klammern. Der Block wird nur ausgeführt, wenn die Funktion aufgerufen wird — geschrieben als Funktionsname gefolgt von runden Klammern.

function greet() {
    console.log("Hello, World!");
}

greet(); // call the function → Outputs: Hello, World!

Eine Funktion zu definieren tut von sich aus nichts; es wird nichts ausgegeben, bis greet() ausgeführt wird.

Funktions-Hoisting

Funktions-Deklarationen werden gehoisted: Die Engine registriert sie, bevor ein Code ausgeführt wird, sodass man eine Deklaration auch in einer Zeile aufrufen kann, die vor ihrer Definition steht.

Dies gilt nicht für Funktionsausdrücke oder Pfeilfunktionen (weiter unten behandelt) — diese sind erst verfügbar, nachdem die Zeile, die sie zuweist, ausgeführt wurde. Ein früherer Aufruf löst einen ReferenceError oder TypeError aus. Wenn Sie mehr darüber erfahren möchten, warum das passiert, lesen Sie Variablen-Scope.

Funktionsparameter und Argumente

Ein Parameter ist ein Name, der in der Funktionsdefinition aufgeführt wird; ein Argument ist der tatsächliche Wert, den man beim Aufruf übergibt. Innerhalb des Funktionskörpers verhalten sich Parameter wie lokale Variablen.

Parameter übergeben

Wenn man eine Funktion mit weniger Argumenten als Parametern aufruft, sind die fehlenden undefined und kein Fehler:

Standardparameter

Um undefined zu vermeiden, erlaubt ES6, einem Parameter einen Standardwert zu geben, der nur verwendet wird, wenn kein Argument (oder undefined) übergeben wird.

Rest-Parameter

Ein Rest-Parameter (geschrieben ...name) sammelt eine beliebige Anzahl verbleibender Argumente in einem echten array, sodass eine Funktion eine variable Anzahl von Eingaben akzeptieren kann. Er muss der letzte Parameter sein.

Rest-Parameter teilen die Syntax mit dem Spread-Operator, erfüllen aber den entgegengesetzten Zweck. Lesen Sie Rest-Parameter und Spread-Syntax für das vollständige Bild.

Die Return-Anweisung

Eine Funktion kann mit return einen Wert an den Aufrufer zurückgeben. Der zurückgegebene Wert kann in einer Variablen gespeichert oder direkt in einem Ausdruck verwendet werden.

return stoppt die Funktion sofort — jeder Code danach wird übersprungen. Eine Funktion ohne return (oder mit einem einfachen return;) liefert undefined.

Anonyme Funktionen und Ausdrücke

Funktionsausdrücke

Ein Funktionsausdruck speichert eine Funktion in einer Variablen. Anders als eine Deklaration wird die Funktion erst erstellt, wenn die Ausführung diese Zeile erreicht, daher wird sie nicht gehoisted — man kann sie erst danach aufrufen.

Anonyme Funktionen

Die obige Funktion hatte keinen Namen — das ist eine anonyme Funktion. Sie sind häufig als Argumente für andere Funktionen anzutreffen, zum Beispiel als Callbacks, die an array-Methoden wie forEach oder an setTimeout übergeben werden. (Siehe Einführung in Callbacks.)

Pfeilfunktionen in ES6

Syntax der Pfeilfunktionen

ES6 hat Pfeilfunktionen eingeführt, eine prägnante Syntax für Funktionsausdrücke. Wenn der Körper ein einzelner Ausdruck ist, können die geschweiften Klammern und das Schlüsselwort return weggelassen werden — der Wert des Ausdrucks wird automatisch zurückgegeben.

Pfeilfunktionen haben kein eigenes this

Pfeilfunktionen binden kein eigenes this; sie erben es aus dem umgebenden Scope. Das macht sie ideal als Callbacks innerhalb von Objektmethoden, wo eine reguläre Funktion das this des Objekts verlieren würde.

Weitere Informationen dazu, wie this innerhalb von Methoden aufgelöst wird, finden Sie unter Objektmethoden, this.

Die richtige Form wählen

• Funktionsdeklaration (function foo() {}) — wird gehoisted, gut für benannte Hilfsfunktionen auf oberster Ebene, die von überall aufgerufen werden können.
• Funktionsausdruck (const foo = function() {}) — wird an Ort und Stelle erstellt; nützlich, wenn man eine Funktion bedingt zuweisen oder übergeben möchte.
• Pfeilfunktion (const foo = () => {}) — kürzeste Syntax, kein eigenes this; bevorzugt für kurze Callbacks.

Funktionen sind auch die Grundlage für fortgeschrittene Muster wie Closures und Rekursion.

Fazit

Funktionen ermöglichen es, Logik einmal zu verpacken und überall wiederzuverwenden. Sie haben gesehen, wie man sie definiert, Argumente übergibt (einschließlich Standardwerte und Rest-Parameter), Ergebnisse zurückgibt und die Unterschiede zwischen Deklarationen, Ausdrücken und Pfeilfunktionen — sowie das Hoisting- und this-Verhalten, das sie voneinander unterscheidet. Diese Formen zu beherrschen ist ein grundlegender Schritt hin zu sauberem, wartbarem JavaScript.

Übungen